SYSK 175: Border for a
Element Without a ColSpan or a Div
Need to have a table row that has a border around it?
How about leveraging class selectors for this purpose:
<html>
<head>
<style type="text/css">
.rowgroup .leftmost
{
border-top:thin solid black;
border-left:thin solid black;
border-bottom:thin solid black;
}
.rowgroup td
{
border-top:thin solid black;
border-bottom:thin solid black;
}
.rowgroup .rightmost
{
border-top:thin solid black;
border-right:thin solid black;
border-bottom:thin solid black;
}
</style>
</head>
<body>
<table cellpadding="5" cellspacing="0">
<tr class="rowgroup">
<td class="leftmost">Table cell 1</td>
<td>Cell 2</td>
<td>Another cell in the middle...</td>
<td class="rightmost">Last cell</td>
</tr>
</table>
</body>
</html>
Special thanks to Nicolae Daian who has provided this solution.
Comments
- Anonymous
August 10, 2006
How about:
<html>
<head>
<style type="text/css">
table
{
border-collapse: collapse;
}
tr
{
border: solid 2px black;
}
</style>
</head>
<body>
<table>
<tr>
<td>Table cell 1</td>
<td>Table cell 2</td>
<td>Table cell 3</td>
</tr>
</table>
</html> - Anonymous
August 10, 2006
I'm sorry but what exactly is wrong with
tr { border: thin solid black }
? - Anonymous
August 10, 2006
Try it -- I don't believe you will get any border... Also, by not using class selectors, you can't apply the border only to selected rows -- the rule will apply to all <tr> tags. - Anonymous
August 11, 2006
Or, how about <table rules="rows">? - Anonymous
August 11, 2006
It doesn't work in IE. But that's because it's a bug. It works fine in Mozilla. If you just want one group just use a class. - Anonymous
August 12, 2006
You will get a border, but (at least in IE) it won't be black thin border you get with the original solution...