开发者

How do I put a border around a tr tag?

开发者 https://www.devze.com 2023-04-10 23:56 出处:网络
I have a very simple html page: <table> <开发者_开发百科tr><th>header1</th><th>header2</th></tr>

I have a very simple html page:

<table>
     <开发者_开发百科tr><th>header1</th><th>header2</th></tr>
     <tr><td>item1</td><td>item2</td></tr>
     <tr><td>item3</td><td>item4</td></tr>
</table>

With some simple css:

tr {
    border:1px solid blue;
}

I would expect this to put a border around the trs but it doesn't put a border around it at all. How do I get a border around the tr?


Add table { border-collapse: collapse; }.

From the CSS2 specification:

In [the border-collapse: separate model], each cell has an individual border. [...] Rows, columns, row groups, and column groups cannot have borders (i.e., user agents must ignore the border properties for those elements).


Your code works, if you want a border just on the row.

However, if you are looking to have the border everywhere, you will need to do this:

tr, td, th{
    border:1px solid blue;
}

Example: http://jsfiddle.net/jasongennaro/83VjH/


Borders can be added to rows of table by adding border to <td> and <th> elements [This is basically a CSS trick to achieve (hack!) that as borders cannot be added to <tr> and <tbody> elements of table]. Add following styles to your CSS to get borders around rows or headers or table cells.

table {
    border-collapse: collapse;
}
table td, table th {
    border: solid white;
}
td {
    border-color: red (just an example, can be as per your requirement);
}

Explanation:

  1. border-collapse rule is added to whole table. It can have two other possible properties separate (default) and inherit. For their respective effects refer https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
  2. Second rule i.e. adding border property to <td> (for data cells) and <th> (for header cells) is a must. If you don't add it, borders will not show up. In this rule border-color is white, it can be some other color of your choice instead of white. Basically, this rule will activate the borders around table cells and since the color is white nothing will show up.
  3. And finally, add the color of your choice. This rule can be more specific to apply border to one <td> or a class of <td>.
0

精彩评论

暂无评论...
验证码 换一张
取 消