Html 风格a<；thead>；

我有以下资料：

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

文件日期

从供应商处购买编号

2011年3月18日

C01753

2011年3月18日

C00522

我想在整个表格周围添加边框，在整个页眉周围添加边框。表格边框显示得很好（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;">
    ...

...

我不认为这是一种表现，更适合组织。改为设置行的样式。更新：tr也不支持边框。更新以下版本

编辑

文件日期

从供应商处购买编号

2011年3月18日

C01753

2011年3月18日

C00522

---

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

边框折叠：折叠

尝试将样式放置在

而不是

上

另外，您可以这样缩短css:style=“border:2px solid black”

您不能设置

元素的样式，您需要设置

比如说

使用

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>

文件日期

从供应商处购买编号

2011年3月18日

C01753

2011年3月18日

C00522

---

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

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

---

不能直接设置AD的样式，但可以设置子元素的样式

比如说

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

---

这是的复制品，但我不得不承认，我不愿意这样标记它，因为另一个问题没有得到真正的回答。@TJ Crowder:是的，我也发现了这个问题，但使用javascript并不是真正的答案。+1似乎有效：IE7中的渲染与Chrome或IE9中的渲染非常不同，但仍然。。。重新编辑：它在IE7和IE9中对我都有效。在IE7中，

thead

下面的下划线非常模糊，但它就在那里。@T.J.，是的，完全不同：D我个人还是更愿意使用后面的背景色解决方案。对不起，这很有效。。。在Firefox中。MSIE给了我手指（也就是说，标题周围没有边框。尽管如此，符合标准的答案已经足够好了。结合balexandre的颜色，我得到了一些我可以使用的东西。设置Dos Nothings样式设置Dos Nothings我确信我以前使用过，代码更新（并经过测试）。我真的不想为每个单元格设置样式。实际上我有20列。如果使用CSS而不是内联样式，会更简单。考虑到这需要内联样式，使用其他答案中建议的背景是更好的解决方案。感谢有关使用背景的提示，它看起来确实更好

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

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

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

thead th { mystyles }