Previous Message
Next Message

Applying A Border To <tr>

Sent by Craig Cook on 22 March 2006 20:08


On 3/22/06, Michael Warkentin [EMAIL-REMOVED]> wrote:
> Is there a specific reason why a border can't be applied to <tr> elements?
> It seems kind of counter-intuitive.

Because <tr> doesn't really "exist" as a rendered element, it merely
serves to group <td>s and <th>s into a row. A <tr> cannot directly
contain any content, it MUST contain a <td> or <th> first. Since <tr>
is an invisible grouping element, CSS can't really be applied directly
to it, especially box-model type things like margin, padding, and
borders.

A <tr> can, however, be a handy hook for CSS. For example, you can
stripe a table row with a single class on the row rather than
redundant classes on every cell within it.

<tr class="odd"> ... a bunch of cells ... </tr>

tr.odd td { background-color: gray; }

While it may appear as if some CSS can be applied directly to a <tr>
(like background-color and font styles, depending on the browser),
what's really happening at rendertime is that the cells within the row
are inheriting their style from the parent by default. Different
browsers (IE) pass along this inheritance in different ways, so for
consistency you should always use <td> and <th> in your selectors, not
<tr> alone.


--
Craig, www.focalcurve.com
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: