html - 在 <tbody> 上添加边框

标签 html

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

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 伪类。

关于html - 在 <tbody> 上添加边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6712946/

相关文章:

javascript - 如何使用 jqueryui 仅在其右侧调整左侧 div 的大小,以及仅在其左侧调整相邻的右侧 div 的大小?

html - CSS - 使用 <ol> 和 "float: left"作为 <li> : numbers are not on the beginning of the line

javascript - 在 html 文档中从 javascript 调用变量

javascript - 使用 jQuery 更改对象宽度和窗口大小

PHP 执行脚本后返回空白页

html - 基本的 HTML 帮助。无法将页面分成三个

css - 如何在html中制作平滑的缩放效果?

php - 从 HTML 屏幕打印动态页眉或页脚

html - aspx页面中的div问题(html和css)

javascript - ng-enter 不调用任何函数