Html 在Safari中使用css样式表示宽度时隐藏的表列，该宽度包含表中col元素的百分比'；科尔斯群

下面是一个JSFIDLE的示例，它可以在我测试的现代浏览器（Chrome、Firefox和IE11）中工作，Safari除外。Safari似乎不支持向表的colgroup中的col元素添加包含百分比的calc样式。下面是JSFIDLE的代码摘录，id为“col1”的col元素的宽度样式为“calc（100%-70px）”。在Safari上，月栏是隐藏的，而在Chrome、Firefox和IE11等其他现代浏览器上，月栏是可见的。如果我们删除了这种样式，那么在Safari上事情就会像预期的那样进行，其中月份列占据所有可用的宽度，而储蓄列保持静态的70px宽度。请注意，所有元素的框大小都是css中指定的边框框

<table>
  <colgroup>
    <col id="col1" style="width: calc(100% - 70px)" />
    <col id="col2" style="width: 70px" />
  </colgroup>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100.58</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80.67</td>
    </tr>
  </tbody>
</table>

---

您的问题是

width:calc（100%-70px）

，因为CSS无法做到这一点，因为它一般不支持计算，特定情况下也不支持百分比减去像素。 只需忽略此项（不要设置任何宽度），并将另一列设置为70px

这将使第二列为70px，第一列的屏幕宽度为70px

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

table {
  border-color: #dbdcde;
  table-layout: fixed;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  border-collapse: collapse;
  border-spacing: 0;
}

th,
td {
  text-align: left;
  padding: 0 0 0 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

th {
  font-weight: bold;
  font-size: larger;
  background-color: #dbdcde;
  border: 0.1rem solid #aaa;
}

tr {
  border: 0.1rem solid #dbdcde;
  color: #000000;
}

td {
  padding-left: 1rem;
}

tbody tr:nth-child(even) {
  background-color: #f8f8f8;
}