Style a <thead>

Question

I have the following:

<table style="border:solid 1px; border-color:black"> <thead style="border:solid 2px; border-color:black"> <tr> <th> <p>Document Date</p> </th> <th> <p>Buy-from Vendor No.</p> </th> </tr> </thead> <tbody> <tr> <td> <p>18/03/11</p> </td> <td> <p>C01753</p> </td> </tr> </tbody> <tbody> <tr> <td> <p>18/03/11</p> </td> <td> <p>C00522</p> </td> </tr> </tbody> </table> 

I would like to add a border around the whole table and one around the whole title. The border of the table is well displayed (Internet Explorer), but the border of the header is not.

PS: I use inline styles because it was intended for the body of the HTML in the mail message.

EDIT

The following gave me what I wanted in Firefox, not IE, though

 <table style="border: 1px solid black; border-collapse: collapse;"> <thead> <tr style="border: 1px solid black"> ... 

EDIT

Coloring added

 <table style="border: 2px solid black; border-collapse: collapse;"> <thead> <tr style="border: 1px solid black; background-color: #EEE;"> ... 

Answer 1

Use rules="groups" and change the structure a little:

 <table style="border: 1px solid black; border-collapse: collapse;" rules="groups"> <thead style="border: 2px solid black;"> <tr> <th> <p>Document Date</p> </th> <th> <p>Buy-from Vendor No.</p> </th> </tr> </thead> <tbody> <tr> <td> <p>18/03/11</p> </td> <td> <p>C01753</p> </td> </tr> <tr> <td> <p>18/03/11</p> </td> <td> <p>C00522</p> </td> </tr> </tbody> </table> 

---

EDIT : Well, it looks like this works in IE. In this case, I would suggest:

 <table style="border: 1px solid black; border-collapse: collapse;"> <thead> <tr style="background-color: black; color: white;"> <!-- ... --> 

Answer 2

You cannot style the <thead> element, you need to style the <tr>

for example this

 <table style="border:solid 1px black" cellpadding="0" cellspacing="0"> <thead> <tr style="background-color: #EEE;"> <th> <p>Document Date</p> </th> <th> <p>Buy-from Vendor No.</p> </th> </tr> </thead> ... 

design style does not apply, the usual thing is the background color.

and btw border supports 3 attributes including color as well

 border: solid 1px black; 

Answer 3

You cannot customize the style directly, but you can style child elements.

for example

 <table> <thead> <tr> <th> <p>Document Date</p> </th> </tr> </thead> <tbody> <tr> <th> <p>18/03/11</p> </th> </tr> </tbody> 

If you want to style only th the thead, then your css

 thead th { mystyles } 

Jsfiddle

Answer 4

I do not think this thead displays and is more suitable for the organization. Create a string instead. UPDATE: tr also does not support border. Update version below.

EDIT

 <table style="border:solid 1px; border-color:black;border-collapse:collapse;"> <thead> <tr> <th style="border:solid 2px black;border-right:none"> <p>Document Date</p> </th> <th style="border:solid 2px black;border-left:none"> <p>Buy-from Vendor No.</p> </th> </tr> </thead> <tbody> <tr> <td> <p>18/03/11</p> </td> <td> <p>C01753</p> </td> </tr> </tbody> <tbody> <tr> <td> <p>18/03/11</p> </td> <td> <p>C00522</p> </td> </tr> </tbody> </table> 

The border can be indicated in a table or cell (td or th). Specify the upper and lower borders of all cells, the left border in the first cell and the right border of the last cell. To avoid gaps between cell borders, the table border traversal style should be set to border-collapse:collapse .

Answer 5

Try putting the style on <tr> , not on <thead> .

Alternatively, you can shorten css as follows: style = "border: 2px solid black"