当使用 css 样式表示宽度时，表格列隐藏在 Safari 中，该宽度包含表格 col 元素的百分比

Question

这里有一个jsfiddle的链接，它适用于我测试过的除Safari之外的现代浏览器（Chrome、Firefox和IE11）。Safari似乎不支持向表的colgroup中的col元素添加包含百分比的calc样式。以下是jsfiddle的代码摘录，id为"col1"的col元素的宽度样式为"calc（100%-70px）"。在Safari上，"月份"列是隐藏的，而在Chrome、Firefox和IE11等其他现代浏览器上，它是可见的。如果我们删除了这种样式，那么Safari上的情况就如预期的那样，Month列占据了所有可用的宽度，Savings列保持了70像素的静态宽度。请注意，所有元素的框大小都是在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>

以下是相关的CSS：

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

Answer 1

您的问题是width: calc(100% - 70px)，因为CSS无法做到这一点，因为它不支持一般计算，也不支持特定的百分比减去像素。忽略这一点（不要设置任何宽度），继续将另一列设置为70px。

这将使第二列为70px，第一列为屏幕宽度-70px，正如您想要的