-1
私がテストした最新のブラウザ（Chrome、Firefox、IE11）で動作するjsfiddleにはlinkがありますサファリ。 Safariでは、テーブルのcolgroup内のcol要素にパーセンテージを含むcalcスタイルを追加することはできません。以下はjsfiddleから抜粋したコードです。idが "col1"のcol要素の幅は "calc（100％〜70px）"です。 Safariでは月の列が非表示になりますが、Chrome、Firefox、IE11などの最新のブラウザでは表示されます。このスタイルを削除した場合、Safariでは月の列が使用可能な幅をすべて使用し、保存の列は静的な70ピクセルの幅になります。すべての要素のボックスサイズは、cssで指定されているborder-boxであることに注意してください。ここでテーブルのcolgroup内のcol要素のパーセンテージを含む幅にcssスタイルを使用するとSafariで表の列が非表示になる
<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;
}