I'm trying to design some HTML/CSS that can put a border around specific rows in a table. Yes, I know I'm not really supposed to use tables for layout but I don't know enough CSS to completely replace it yet.
Anyways, I have a table with multiple rows and columns, some merged with rowspan and colspan, and I'd like to put a simple border around parts of the table. Currently, I'm using 4 separate CSS classes (top, bottom, left, right) that I attach to the <td> cells that are along the top, bottom, left, and right of the table respectively.
.top {_x000D_
border-top: thin solid;_x000D_
border-color: black;_x000D_
}_x000D_
_x000D_
.bottom {_x000D_
border-bottom: thin solid;_x000D_
border-color: black;_x000D_
}_x000D_
_x000D_
.left {_x000D_
border-left: thin solid;_x000D_
border-color: black;_x000D_
}_x000D_
_x000D_
.right {_x000D_
border-right: thin solid;_x000D_
border-color: black;_x000D_
}<html>_x000D_
_x000D_
<body>_x000D_
_x000D_
<table cellspacing="0">_x000D_
<tr>_x000D_
<td>no border</td>_x000D_
<td>no border here either</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td class="top left">one</td>_x000D_
<td class="top right">two</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td class="bottom left">three</td>_x000D_
<td class="bottom right">four</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td colspan="2">once again no borders</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td class="top bottom left right" colspan="2">hello</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td colspan="2">world</td>_x000D_
</tr>_x000D_
</table>_x000D_
_x000D_
</html>Is there any easier way to do what I want? I tried applying top and bottom to a <tr> but it didn't work. (p.s. I'm new to CSS, so there's probably a really basic solution to this that I've missed.)
note: I do need to have multiple bordered sections. The basic idea is to have multiple bordered clusters each containing multiple rows.
This question is related to
html
css
border
css-tables
The answer is
Here's an approach using tbody elements that could be the way to do it. You can't set the border on a tbody (same as you can't on a tr) but you can set the background colour. If the effect you're wanting to acheive can be obtained with a background colour on the groups of rows instead of a border this will work.
<table cellspacing="0">
<tbody>
<tr>
<td>no border</td>
<td>no border here either</td>
</tr>
<tbody bgcolor="gray">
<tr>
<td>one</td>
<td>two</td>
</tr>
<tr>
<td>three</td>
<td>four</td>
</tr>
<tbody>
<tr>
<td colspan="2">once again no borders</td>
</tr>
<tbody bgcolor="gray">
<tr>
<td colspan="2">hello</td>
</tr>
<tbody>
<tr>
<td colspan="2">world</td>
</tr>
</table>
The only other way I can think of to do it is to enclose each of the rows you need a border around in a nested table. That will make the border easier to do but will potentially creat other layout issues, you'll have to manually set the width on table cells etc.
Your approach may well be the best one depending on your other layout rerquirements and the suggested approach here is just a possible alternative.
<table cellspacing="0">
<tr>
<td>no border</td>
<td>no border here either</td>
</tr>
<tr>
<td>
<table style="border: thin solid black">
<tr>
<td>one</td>
<td>two</td>
</tr>
<tr>
<td>three</td>
<td>four</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">once again no borders</td>
</tr>
<tr>
<td>
<table style="border: thin solid black">
<tr>
<td>hello</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">world</td>
</tr>
</table>
Based on your requirement that you want to put a border around an arbitrary block of MxN cells there really is no easier way of doing it without using Javascript. If your cells are fixed with you can use floats but this is problematic for other reasons. what you're doing may be tedious but it's fine.
Ok, if you're interested in a Javascript solution, using jQuery (my preferred approach), you end up with this fairly scary piece of code:
<html>
<head>
<style type="text/css">
td.top { border-top: thin solid black; }
td.bottom { border-bottom: thin solid black; }
td.left { border-left: thin solid black; }
td.right { border-right: thin solid black; }
</style>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function() {
box(2, 1, 2, 2);
});
function box(row, col, height, width) {
if (typeof height == 'undefined') {
height = 1;
}
if (typeof width == 'undefined') {
width = 1;
}
$("table").each(function() {
$("tr:nth-child(" + row + ")", this).children().slice(col - 1, col + width - 1).addClass("top");
$("tr:nth-child(" + (row + height - 1) + ")", this).children().slice(col - 1, col + width - 1).addClass("bottom");
$("tr", this).slice(row - 1, row + height - 1).each(function() {
$(":nth-child(" + col + ")", this).addClass("left");
$(":nth-child(" + (col + width - 1) + ")", this).addClass("right");
});
});
}
</script>
</head>
<body>
<table cellspacing="0">
<tr>
<td>no border</td>
<td>no border here either</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
</tr>
<tr>
<td>three</td>
<td>four</td>
</tr>
<tr>
<td colspan="2">once again no borders</td>
</tr>
</tfoot>
</table>
</html>
I'll happily take suggestions on easier ways to do this...
I was just playing around with doing this too, and this seemed to be the best option for me:
<style>
tr {
display: table; /* this makes borders/margins work */
border: 1px solid black;
margin: 5px;
}
</style>
Note that this will prevent the use of fluid/automatic column widths, as cells will no longer align with those in other rows, but border/colour formatting still works OK. The solution is to give the TR and TDs a specified width (either px or %).
Of course you could make the selector tr.myClass if you wanted to apply it only to certain rows. Apparently display: table doesn't work for IE 6/7, however, but there's probably other hacks (hasLayout?) that might work for those. :-(
An easier way is to make the table a server side control. You could use something similar to this:
Dim x As Integer
table1.Border = "1"
'Change the first 10 rows to have a black border
For x = 1 To 10
table1.Rows(x).BorderColor = "Black"
Next
'Change the rest of the rows to white
For x = 11 To 22
table1.Rows(x).BorderColor = "White"
Next
Thank you to all that have responded! I've tried all of the solutions presented here and I've done more searching on the internet for other possible solutions, and I think I've found one that's promising:
tr.top td {_x000D_
border-top: thin solid black;_x000D_
}_x000D_
_x000D_
tr.bottom td {_x000D_
border-bottom: thin solid black;_x000D_
}_x000D_
_x000D_
tr.row td:first-child {_x000D_
border-left: thin solid black;_x000D_
}_x000D_
_x000D_
tr.row td:last-child {_x000D_
border-right: thin solid black;_x000D_
}<html>_x000D_
_x000D_
<head>_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
_x000D_
<table cellspacing="0">_x000D_
<tr>_x000D_
<td>no border</td>_x000D_
<td>no border here either</td>_x000D_
</tr>_x000D_
<tr class="top row">_x000D_
<td>one</td>_x000D_
<td>two</td>_x000D_
</tr>_x000D_
<tr class="bottom row">_x000D_
<td>three</td>_x000D_
<td>four</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td colspan="2">once again no borders</td>_x000D_
</tr>_x000D_
<tr class="top bottom row">_x000D_
<td colspan="2">hello</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td colspan="2">world</td>_x000D_
</tr>_x000D_
</table>_x000D_
_x000D_
</body>_x000D_
_x000D_
</html>Output:
Instead of having to add the top, bottom, left, and right classes to every <td>, all I have to do is add top row to the top <tr>, bottom row to the bottom <tr>, and row to every <tr> in between. Is there anything wrong with this solution? Are there any cross-platform issues I should be aware of?
Group rows together using the <tbody> tag and then apply style.
<table>
<tr><td>No Style here</td></tr>
<tbody class="red-outline">
<tr><td>Style me</td></tr>
<tr><td>And me</td></tr>
</tbody>
<tr><td>No Style here</td></tr>
</table>
And the css in style.css
.red-outline {
outline: 1px solid red;
}
the trick is with outline property thanks to enigment's answer with little modification
use this class
.row-border{
outline: thin solid black;
outline-offset: -1px;
}
then in the HTML
<tr>....</tr>
<tr class="row-border">
<td>...</td>
<td>...</td>
</tr>
and the result is
hope this helps you
If you set the border-collapse style to collapse on the parent table you should be able to style the tr:
(styles are inline for demo)
<table style="border-collapse: collapse;">
<tr>
<td>No Border</td>
</tr>
<tr style="border:2px solid #f00;">
<td>Border</td>
</tr>
<tr>
<td>No Border</td>
</tr>
</table>
Output:
Source: Stackoverflow.com