1

我在使用 < colgroup > 标记在 CSS 中设置表格列的边框时遇到问题。

这是我试图运行的代码：

<table style='font-size:18px; margin:auto; text-align:center; font-family:sans-serif; border-spacing:1.875em;'>
  <caption style='text-align:left;'>Wait...</caption>
  <colgroup>
    <col span='1' style='border:solid firebrick;'>
  </colgroup>
  <tr>
    <td style='color:blue;'>They chose:</td>
    <td style='color:blue;'>They chose:</td>
  </tr>
  <tr>
    <th>Option 1</th>
    <th>Option 2</th>
  </tr>
  <tr>
    <td>You: $4</td>
    <td>You: $5</td>
  </tr>
  <tr>
    <td>Them: $5</td>
    <td>Them: $4</td>
  </tr>
</table>

如果您自己运行它，您将看到，该代码不会产生我希望在表格的第一列周围具有的耐火砖边框。即使我将“border-spacing: 0em”和“border-collapse:collapse”应用于 <table> 标签，也不会出现耐火砖边框。

有谁知道我做错了什么？

4

1 回答 1

1

您需要将border-collapse 设置为折叠在桌子上。

<table style='border-collapse: collapse; font-size:18px; margin:auto; text-align:center; font-family:sans-serif; border-spacing:1.875em;'>
  <caption style='text-align:left;'>Wait...</caption>
  <colgroup>
    <col span='1' style='border:solid firebrick;'>
  </colgroup>
  <tr>
    <td style='color:blue;'>They chose:</td>
    <td style='color:blue;'>They chose:</td>
  </tr>
  <tr>
    <th>Option 1</th>
    <th>Option 2</th>
  </tr>
  <tr>
    <td>You: $4</td>
    <td>You: $5</td>
  </tr>
  <tr>
    <td>Them: $5</td>
    <td>Them: $4</td>
  </tr>
</table>

显然，您将需要进行调整以获得所需的单元格之间的任何间距。

于 2022-02-02T10:02:35.190 回答