在 <tbody> 上添加边框答案

【问题标题】：Add borders on <tbody>在 <tbody> 上添加边框
【发布时间】：2011-10-06 11:27:12
【问题描述】：

在另一篇文章中，我读到如果我需要为除标题行之外的每一行添加边框，我应该使用 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>

感谢任何帮助。

【问题讨论】：

标签： html

【解决方案1】：

您应该使用 CSS 进行展示/样式设置：

tbody {
    border: 1px solid #ccc;
}

JS Fiddle demo.

我不确定你是新人，但为了完整起见：

<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;
}

JS Fiddle demo.

当然，这需要一个能够理解并实现 :last-child 和 :first-child 伪类的浏览器。

【讨论】：

将以上内容添加到我的样式表中不会改变任何内容。是否需要在代码中以其他方式应用？
正如我之前所说的“将上述内容添加到我的样式表中不会改变任何内容。”已经有一个工作的 ext 样式表。另外，内联样式也什么都不做？
链接的JS Fiddle demo 有什么作用吗？如果你去掉所有的内联样式（BORDER=1 CELLPADDING=3 CELLSPACING=1 RULES=ROWS FRAME=BOX，并尝试引用你的属性值，给BORDER="1" CELLPADDING="3" CELLSPACING="1" RULES="ROWS" FRAME="BOX"）怎么样？
内联样式是测试的，当时我把它去掉了。去掉引号并没有改变任何东西。还是一样，如果我将上述参数应用于标签一切都很好，但是将它放在上没有效果。另外，我的页面里面有php，是不是有问题。

您是否尝试过使用与 tbody 相关的其他一些 css 元素，这些元素可以默认设置为隐藏边框。我并不是说这是对您问题的答案，但我相信以下一些内容会给您一些正在发生的事情的提示。边框：1px 实心#FFF；边框颜色：#FFF；边框折叠：分开；边框间距：2px；显示：块；