CODEWITHSUNDEEP
htmlcss
Vincent Vancalbergh
Vincent Vancalbergh

Reputation: 3337

style a <thead>

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;">
    ...

Upvotes: 8

Views: 62358

Answers (5)

Dave
Dave

Reputation: 8461

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 }

JSFiddle

Upvotes: 2

detaylor
detaylor

Reputation: 7280

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.

Upvotes: 0

Czechnology
Czechnology

Reputation: 14992

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;">
      <!-- ... -->

Upvotes: 14

balexandre
balexandre

Reputation: 75103

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;

Upvotes: 6

Ant
Ant

Reputation: 3887

Try putting the style on your <tr> rather than <thead>.

Also, you can shorten the css like this: style="border: 2px solid black"

Upvotes: 0

Related Questions