html - CSS 表格列宽不起作用

Question

(我想我可能会在 Set the table column width constant regardless of the amount of text in its cells? 中找到答案，但那里的解决方案似乎都不适合我。)

我想构建一个包含两列的表格，一列占文本区域宽度的 30%，另一列填充剩余空间。在单元格之间我需要大约 1em 的空间，这样我就可以在每个单元格周围应用不同的边框。这是当前代码:

    table.condform {
      margin-left: 50px;
      margin-top: 1em;
      table-layout: fixed;
      width: 80%;
      font-family: Courier, monospace;
      font-size: xx-small:
      padding: 0;
      border-collapse: separate;
      border-spacing: 2em;
      border: none;
    }
    
    table.condform td {
      padding: 0.1em 0.2em 0.3em 0.2em;
      min-height: 1em;
      vertical-align: top;
    }
    
    table.condform td:first-of-type {
      width: 40%;
    }
    
    table.condform td:nth-of-type(2) {
      width: auto;

 <table class="condform">
    <colgroup>
      <col style="width: 40%;">
      <col style="width: auto;">
    </colgroup>
    <tr>
     <td style="border: red 1px solid; background-color: #ff0">a</td>
     <td>b</td>
    </tr>
    <tr>
     <td style="border: blue 1px solid; background-color: #0ff">a</td>
     <td>b</td>
    </tr>
    </table>

无论我做什么，单元格都会缩小以适应它们的内容，而且我所做的任何事情似乎都不会影响单元格间距:

我现在已经尝试了六七种不同的修复方法，包括上面链接中的所有修复方法，但都无济于事。设置列宽和单元格间距肯定不能超出 CSS 的能力吗？

编辑 20161221 1040:以像素为单位设置 td 宽度值可行，但如果可以的话，我不热衷于指定像素值。

编辑 20161221 1052:在元素检查器中查看表类似乎没有正确应用。它是一个表，它的类是condform，但是该类的所有样式都没有出现在样式字段中。 (我知道有空白属性，但它们不应该造成任何问题，而且在其他地方也没有。)从属样式仍然适用，像素宽度有效的事实证明了这一点。

我现在很困惑。

Answer 1

你不需要colgroup。只需删除它们就可以正常工作:

table.condform {
  margin-left: 50px;
  margin-top: 1em;
  width: 80%;
  font-family: Courier, monospace;
  font-size: xx-small:
  padding: 0;
  border-collapse: separate;
  border-spacing: 2em;
  border: none;
}

table.condform td {
  padding: 0.1em 0.2em 0.3em 0.2em;
  min-height: 1em;
  vertical-align: top;
}

table.condform td:first-of-type {
  width: 40%;
}

table.condform td:nth-of-type(2) {
  width: 0.5em;
 }

<table class="condform">
<tr>
 <td style="border: red 1px solid; background-color: #ff0">a</td>
 <td style="border: green 1px solid; background-color: #fda">b</td>
</tr>
<tr>
 <td style="border: blue 1px solid; background-color: #0ff">a</td>
 <td style="border: green 1px solid; background-color: #caa">b</td>
</tr>
</table>