【问题标题】：style a <thead>为 <thead> 设置样式
【发布时间】：2011-07-19 13:43:12
【问题描述】：

我有以下：

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

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

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

编辑

以下内容在 Firefox 中给了我想要的东西，但在 IE 中却没有

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

编辑

添加颜色

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

【问题讨论】：

这是stackoverflow.com/questions/1396317/… 的副本，但我不得不承认我不愿将其标记为这样，因为其他问题并未真正得到解答。
@TJ Crowder：是的，也找到了，但使用 javascript 并不是真正的答案。

标签： html css

【解决方案1】：

使用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>

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

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

【讨论】：

+1，似乎有效：jsbin.com/urubi5 与 Chrome 或 IE9 相比，在 IE7 中的呈现完全不同，但仍然......重新编辑：它在 IE7 和 IE9 中都对我有用。在 IE7 中，thead 下的下划线非常模糊，但确实存在。
@T.J.，是的，完全不同：D 不过，就我个人而言，我还是更愿意使用带有背景颜色的后一种解决方案。
抱歉，这在 Firefox 中有效。 MSIE 给了我手指。 :( 也就是说，标题周围没有边框。不过，符合标准的答案就足够了。结合 balexandre 的着色，我得到了可以使用的东西。

【解决方案2】：

您无法设置<thead> 元素的样式，您需要设置<tr> 的样式

比如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>
...

边框样式不适用，正常的是使用背景颜色。

和btw border 支持3个属性，包括颜色和like

border: solid 1px black;

【讨论】：

感谢关于使用背景的提示，它看起来确实更好

【解决方案3】：

您不能直接设置广告的样式，但可以设置子元素的样式。

例如

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

如果您只想设置标题的样式，那么您的 css 是

thead th { mystyles }

JSFiddle

【讨论】：

【解决方案4】：

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

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

【讨论】：

样式化没有任何作用

【解决方案5】：

我不认为thead 呈现并且更适合组织。改为设置该行的样式。更新： tr 也不支持边框。更新以下版本。

编辑

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

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

【讨论】：

样式化没有任何作用
我确信我以前用过，代码更新（和测试）。
我真的不想为每个单独的单元格设置样式。我喜欢，实际上有 20 列。
如果使用 CSS 而不是内联样式会更简单。鉴于这需要使用其他答案中建议的背景的内联样式是一个更好的解决方案。