How to apply a border to a <tr> element
November 11th, 2006 LukeA little while ago, I was working on Parakeet and I had a problem: I wanted to highlight a <tr> element when there was an error, by applying a unique background-color and border to it. However…you can’t apply a border to a <tr> element. That’s because a <tr> isn’t technically rendered, per se, so much as used by the browser to denote where a row starts and where a row stops.
This was a problem, that I was determined to solve. It took a custom class for the <tr> element, and some a few descendent selectors to get working, but it did. Here’s the breakdown:
.errorRow td {
border-top: 1px solid black;
border-bottom: 1px solid black;
background-color: green;
}
This piece of code makes it so that EVERY <td> inside anything with the class of ‘errorRow’ has these style rules applied to it. This allows us to set a default view for every cell within the table.
.errorRow td.outerLeft {
border: 1px solid black;
border-right: none;
}
.errorRow td.outerRight {
border: 1px solid black;
border-left: none;
}
This code makes it so that the two cells marked ‘outerRight’ and ‘outerLeft’ within our ‘errorRow’ element will override some of their default attributes, and set up their own border rules. The ‘outerRight’ class is applied to the cell that is on the right side of the <tr>, and the ‘outerLeft’ class is applied to the cell that is on the left side of the <tr>.
After setting all of this up, we can easily apply a border to the entire <tr> simple by setting its class to ‘errorRow’, or in some cases adding the class of ‘errorRow’ to it.
Here’s the code, all summed up:
.errorRow td {
border-top: 1px solid black;
border-bottom: 1px solid black;
background-color: green;
}
.errorRow td.outerLeft {
border: 1px solid black;
border-right: none;
}
.errorRow td.outerRight {
border: 1px solid black;
border-left: none;
}