Html 样式 <thead>

style a <thead>

提问by Vincent Vancalbergh

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.

我想在整个表格周围添加一个边框，并在整个标题周围添加一个边框。表格边框显示得很好（Internet Explorer），但标题边框不是。

PS: I use inline styles because it's meant for a HTML body in a mail message.

PS：我使用内联样式是因为它用于邮件消息中的 HTML 正文。

EDIT

编辑

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

以下给了我在 Firefox 中想要的东西，但不是在 IE 中

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

回答by Czechnology

Use rules="groups"and change your structure a bit:

使用rules="groups"并稍微改变一下你的结构：

<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:

编辑：嗯，这似乎在 IE 中不起作用。在这种情况下，我建议：

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

回答by balexandre

You can't style a <thead>element, you need to style the <tr>

您不能为<thead>元素设置样式，您需要设置样式<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 btwbordersupports 3 attributes, including the color as well like

和顺便说一句border支持3个属性，包括颜色，以及像

border: solid 1px black;

回答by Dave

You can't style thead directly, but, you can style the child elements.

您不能直接为 thead 设置样式，但是，您可以设置子元素的样式。

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

如果你只想设置头顶的样式，那么你的 css 是

thead th { mystyles }

JSFiddle

JSFiddle

回答by detaylor

I don't think that that theadrenders and is more for organisation. Style the row instead. UPDATE: tr does not support border either. Update version below.

我不认为这thead更适合组织。改为设置行样式。更新： tr 也不支持边框。更新版本如下。

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.

可以在表格或单元格（td 或 th）上指定边框。在所有单元格上指定上下边框，在第一个单元格上指定左边框，在最后一个单元格上指定右边框。为了防止单元格边框之间的间隙，表格的边框折叠样式需要设置为border-collapse:collapse。

回答by Ant

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

尝试将样式放在您的<tr>而不是<thead>.

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

此外，您可以像这样缩短 css：style="border: 2px solid black"