如何将边框样式属性应用于 <colgroup> 标签？

Question

我在使用标签设置 CSS 中 table 列的边框样式时遇到问题。

这是我正在尝试的代码运行:

<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: </td>
    <td>You: </td>
  </tr>
  <tr>
    <td>Them: </td>
    <td>Them: </td>
  </tr>
</table>

正如您自己运行看到的那样，代码不会生成我希望 table 第一列周围的耐火砖边框。即使我将“border-spacing: 0em”和“border-collapse: collapse”应用到 < table > 标签，耐火砖边框也不会出现。

有谁知道我做错了什么吗？

Answer 1

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

<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: </td>
    <td>You: </td>
  </tr>
  <tr>
    <td>Them: </td>
    <td>Them: </td>
  </tr>
</table>

显然，您随后需要进行调整以获得所需的单元格间距。

如何将边框样式属性应用于 <colgroup> 标签？

How do I apply border style attributes to a <colgroup> tag?

html

css

html-table

border

colgroup