修改

Question

我有以下内容：

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

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

Answer 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个属性，包括颜色以及

border: solid 1px black;

Answer 3

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

例如

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

如果你只想改造thead的那个，那么你的CSS就是

thead th { mystyles }

JSFiddle

Answer 4

我不认为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。

Answer 5

尝试将样式放在<tr>上，而不是<thead>。

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

风格

5 个答案:

修改