在另一篇文章中,我读到如果我需要为除标题行之外的每一行添加边框,我应该使用 THEAD & TBODY。所以我已经将它添加到页面,但我找不到如何将它应用到 TBODY。我是新手,请多多包涵。我可以在整个表格周围放置边框,但需要排除标题行。这是一个表的副本,它在 TABLE 标记中具有边框属性,它可以正常工作。
<table width="300" BORDER=1 CELLPADDING=3 CELLSPACING=1 RULES=ROWS FRAME=BOX>
<thead>
<tr>
<th width="60" align="center" valign="top" scope="col">Type</th>
<th width="200" align="left" valign="top" scope="col">Address</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center" valign="top">Shipping</td>
<td align="left" valign="top">123 Main St</td>
</tr>
</tbody>
</table>
感谢任何帮助。
最佳答案
您应该使用 CSS 进行演示/样式设置:
tbody {
border: 1px solid #ccc;
}
我不确定你有多新,但为了完整性:
<head>
<!-- other stuff -->
<style type="text/css">
tbody {
border: 1px solid #ccc;
}
</style>
<!-- other stuff -->
</head>
您还可以在元素的开始标记中使用内联样式,例如:
<tbody style="border: 1px solid #ccc;">
不过,您最好链接到一个外部样式表,它进入文档的 head
:
<link href="path/to/stylesheet.css" rel="stylesheet" type="text/css" />
或者,如果您的目标浏览器不提供使用 border
设置 tbody
样式的选项,您可以针对 中的特定单元格>tbody
使用以下内容:
table {
margin: 0;
border-spacing: 0;
}
tbody tr td:first-child {
border-left: 2px solid #000;
}
tbody tr td:last-child {
border-right: 2px solid #000;
}
tbody tr:first-child td {
border-top: 2px solid #000;
}
tbody tr:last-child td {
border-bottom: 2px solid #000;
}
当然,这需要浏览器理解并实现 :last-child
和 :first-child
伪类。
关于html - 在 <tbody> 上添加边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6712946/