Add borders on <tbody>
In another post I read that if I need to add borders to every row except the header row I should use THEAD & TBODY. So I have added it to the page, but I cannot find how to apply it to the TBODY. I am a newbie so bear with me. I 开发者_如何学Gocan put borders around the entire table, but need to exclude the header row. Here is a copy of a table with the border attributes in the TABLE tag where it works fine.
<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>
Any help is appreciated.
You should use CSS for presentation/styling:
tbody {
border: 1px solid #ccc;
}
JS Fiddle demo.
I'm not sure how new you are, but for completeness:
<head>
<!-- other stuff -->
<style type="text/css">
tbody {
border: 1px solid #ccc;
}
</style>
<!-- other stuff -->
</head>
You could also use inline styles in the element's opening tag, for example:
<tbody style="border: 1px solid #ccc;">
Preferably, though, you'd link to an external stylesheet, this goes into the head of the document:
<link href="path/to/stylesheet.css" rel="stylesheet" type="text/css" />
Or, if you're targeting those browsers that don't offer the option to style the tbody with a border, you can target specific cells within the tbody using the following:
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.
This does, of course, require a browser that understands and implements the :last-child and :first-child pseudo-classes.
加载中,请稍侯......
精彩评论