Question

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

我想构建一个包含两列的表，一个文本区域宽度的30％，另一个填充剩余空间。在细胞之间我需要大约1em的空间，所以我可以在每个细胞周围应用不同的边界。这是当前的代码：

＆＃13;

LISTEN

＆＃13;

    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;

＆＃13;

无论我做什么，细胞都缩小以适应它们的内容，我所做的任何事情似乎都不会影响细胞间距：

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

编辑20161221 1040：以像素为单位设置<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>宽度值有效，但如果可以提供帮助，我并不热衷于指定像素值。

编辑20161221 1052：在元素检查器中查看表类似乎没有正确应用。它是td，其类是table，但该类的样式都没有出现在样式字段中。（我知道有空白属性，但它们不应该造成任何麻烦，并且在其他地方都没有。）从属样式仍然正确应用，正如像素宽度的工作所证明的那样。

我现在感到很沮丧。

Answer 1

你不需要colgroup。只需删除它就可以了：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你想要这样的输出.......？ see this link

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>

depen.io/anon/pen/eBXJrJ

CSS表格列宽不起作用

2 个答案: