我正在嘗試為我制作的數(shù)據(jù)表創(chuàng)建一個鍵。我希望按鍵的大小能夠動態(tài)調整以占據(jù)屏幕最右邊的 20%。我還希望所有表格單元格的長度相同并延伸到整個按鍵（屏幕的 20% /2 = 10%）。如果文本長度超過屏幕的 10%（或表格的 50%），我希望將其剪裁在第一行的末尾，這樣就不會扭曲鍵。我將在 css 中設置空 td 的樣式并為它們提供背景顏色，其他 td 將描述該顏色在我的數(shù)據(jù)表中代表什么（就像地圖上的鍵）。我的問題是，當我嘗試運行此代碼時，空的 td 會縮小，以顯示該行中其他 td 的文本。如何防止這種情況并強制兩個 td 的長度始終相同？.key { float: right; border-style: double; width: 20vw; white-space: nowrap; overflow: hidden;}.key td { width: 10vw; border: 1px solid #003C63;}<div class="key"> <table> <tr> <td></td> <td> = all times</td> </tr> <tr> <td></td> <td> = some times</td> </tr> <tr> <td></td> <td> = no times</td> </tr> </table></div>
1 回答
qq_笑_17
TA貢獻1818條經(jīng)驗 獲得超7個贊
您必須設置表格的寬度（而不是包裹它的 div）和樣式table-layout: fixed。
我通過刪除 div 并將key類直接添加到表元素來簡化您的代碼。
.key {
float: right;
border-style: double;
width: 20vw;
table-layout: fixed; /* <------- added */
white-space: nowrap;
overflow: hidden;
}
.key td {
width: 10vw;
border: 1px solid #003C63;
}
<table class="key">
<tr>
<td></td>
<td> = all times</td>
</tr>
<tr>
<td></td>
<td> = some times</td>
</tr>
<tr>
<td></td>
<td> = no times</td>
</tr>
</table>
- 1 回答
- 0 關注
- 146 瀏覽
添加回答
舉報
0/150
提交
取消