在 HTML 中创建只有底部边框的表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40895914/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create table with only bottom border in HTML
提问by Lorber
I'm trying to copy the Staff Directory portion part of this page from CSS, Javascript and HTML to just HTML. Most importantly, I'd love to be able to just make a table as you see here with only the bottom borders/dividers (or whatever they are called) for each line. How do I do that?
我正在尝试将此页面的员工目录部分从 CSS、Javascript 和 HTML 复制到 HTML。最重要的是，我希望能够像您在这里看到的那样制作一张表格，每行只有底部边框/分隔线（或它们的名字）。我怎么做？
http://sps.columbia.edu/about/staff-directory
http://sps.columbia.edu/about/staff-directory
Thanks!
谢谢！
Edit:
编辑：
I need only HTML, no CSS please. Thank you though!
我只需要 HTML，不需要 CSS。不过还是谢谢你！
回答by Martin2904
Just use the following code-snippet and paste it in you style.css
只需使用以下代码片段并将其粘贴到 style.css 中
tr {
border-bottom: 1px solid #ccc;
}
Without using style.css
不使用 style.css
<table>
<tr style="border-bottom: 1px solid red">
<td>Table Cell</td>
</tr>
</table>
回答by haltersweb
Here's a pure HTML version with inline styles.
这是一个带有内联样式的纯 HTML 版本。
Notice styles like "border-collapse" on the TABLE, "border-bottom" and "line-height" on the TRs, and "width" on the TDs
注意表格上的“边框折叠”、TR 上的“边框底部”和“行高”以及 TD 上的“宽度”等样式
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 80%; margin: 1.5em; font-family: Arial, Helvetica, sans-serif; font-size: 0.85em;">
<tbody>
<tr style="border-bottom: 1px solid #ccc; line-height: 1.8em;">
<td style="width: 70%; font-weight: bold;">Dean</td>
<td style="width: 30%; text-align: right;">Joe Cool</td></tr>
<tr style="border-bottom: 1px solid #ccc; line-height: 1.8em;">
<td style="width: 70%; font-weight: bold;">Senior Vice Dean</td>
<td style="width: 30%; text-align: right;">Jane Cool</td></tr>
<tr style="border-bottom: 1px solid #ccc; line-height: 1.8em;">
<td style="width: 70%; font-weight: bold;">Vice Dean</td>
<td style="width: 30%; text-align: right;">John Doe</td>
</tr>
</tbody>
</table>回答by bytanyar
I believe you want to remove the border from your table.directory tr and add it to the tbody element.
我相信您想从 table.directory tr 中删除边框并将其添加到 tbody 元素中。
That will give you a border just between each section.
这将为您提供每个部分之间的边界。
回答by Random Developer
you could use this
你可以用这个
<table style="border-bottom: 1px solid black">
<tr>
<td>Someone</td>
</tr>
</table>回答by bytanyar
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>Dean</td>
</tr>
<tr>
<td><hr /></td>
</tr>
<tr>
<td>Jane</td>
</tr>
<tr>
<td><hr /></td>
</tr>
<tr>
<td>Scott</td>
</tr>
<tr>
<td><hr /></td>
</tr>
</tbody>
</table>