html – 添加边框

在另一篇文章中,我读到如果我需要为除了标题行之外的每一行添加边框,我应该使用THEAD& TBODY.所以我已将它添加到页面中,但我找不到如何将其应用于TBODY.我是新手,所以忍受我.我可以在整个表格周围放置边框,但需要排除标题行.这是一个表的副本,其中TABLE标签中的border属性可以正常工作.

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

但是,您最好链接到外部样式表,这将进入文档的头部:

<link href="path/to/stylesheet.css" rel="stylesheet" type="text/css" />

或者,如果您的目标是那些不提供带边框样式的选项的浏览器,您可以使用以下内容定位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伪类的浏览器.

相关文章
相关标签/搜索