Style A
I Have the Following: Document Date Buy-from Vendor No. 18/03/11 C01753 18/03/11 C00522 I'd Like to Add a Border Around the Whole Table and One Around the...
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'd like to add a border around the whole table and one around the whole header. The table border is showing nicely (Internet Explorer), but the header border is not.
PS: I use inline styles because it's meant for a HTML body in a mail message.
EDIT
The following gave me what I wanted in Firefox, not in IE though
<table style="border: 1px solid black; border-collapse: collapse;">
<thead>
<tr style="border: 1px solid black">
...
EDIT
Added coloring
<table style="border: 2px solid black; border-collapse: collapse;">
<thead>
<tr style="border: 1px solid black; background-color: #EEE;">
...
5 Answers
Use rules="groups" and change your structure a bit:
<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, that doesn's seem to work in IE. In that case, I'd suggest:
<table style="border: 1px solid black; border-collapse: collapse;">
<thead>
<tr style="background-color: black; color: white;">
<!-- ... -->
You can't style a <thead> element, you need to style the <tr>
for example, like 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>
...
border styling does not apply, the normal thing is use the background color.
and btw border supports 3 attributes, including the color as well like
border: solid 1px black;
You can't style thead directly, but, you can style the 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 just the th of the thead, then your css is
thead th { mystyles }
Try putting the style on your <tr> rather than <thead>.
Also, you can shorten the css like this: style="border: 2px solid black"
I don't think that that thead renders and is more for organisation. Style the row instead. UPDATE: tr does not support border either. 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 specified on a table or a cell (td or th). Specify a top and bottom border on all cells, a left border on the first cell and a right border on the last cell. To prevent gaps between the borders of cells the border-collapse style of the table needs to be set to border-collapse:collapse.
James Sterling reports on renewable energy developments, climate policy, ecological conservation, and green tech innovations around the globe.
