我制作了 3 個具有相同列名的表。每個的 html 標(biāo)記都是相同的。在我的筆記本電腦瀏覽器上，它看起來如以下屏幕截圖所示：您可以看到表格寬度沒問題。但現(xiàn)在我在較小的屏幕（移動設(shè)備）上顯示表格，并且寬度不再起作用：這 3 個不同的表沒有相同的列寬，因為第二個和第三個表的名稱比第一個表更長。在手機(jī)上查看表格時如何使它們的寬度相同？我需要哪些 CSS 代碼？提前謝謝了？
2 回答
SMILET
TA貢獻(xiàn)1796條經(jīng)驗 獲得超4個贊
問題是您使用基于百分比的寬度
<th style="width: 15%">Points</th>
由于您的屏幕尺寸不同，7% 折扣的絕對值也不同。因此，您必須將其更改為某個固定值，以便在所有屏幕尺寸上保持一致。
<th style="width: 10rem">Points</th>
請注意，我在這里隨機(jī)選擇了 10rem，你必須進(jìn)行實驗。
這是因為基于百分比的寬度是向下級聯(lián)的。表格寬度本身基于屏幕寬度，因此單元格寬度也基于屏幕寬度。
您還可以給它一個最小寬度，這樣它就被鎖定在 10rem，但可以增長到超過該值的表格寬度的 15%。
table {
width: 100%;
}
th {
min-width: 10rem;
width: 15%;
}
td, th {
border: 1px solid;
}
<table>
<tbody>
<tr>
<th>first</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td>d</td>
</tr>
<tr>
<th>second</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td>d</td>
</tr>
<tr>
<th>third</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>b</td>
<td>d</td>
</tr>
</tbody>
</table>
catspeake
TA貢獻(xiàn)1111條經(jīng)驗 獲得超0個贊
首先，為什么要使用 html bricks 中的樣式？最好創(chuàng)建 css 文件并將其鏈接到您的 html 頁面或在標(biāo)題部分插入所有 css，請檢查下面的代碼，如果您同意，您還需要調(diào)整它，如果您有您想要的屏幕尺寸總是可以使用媒體查詢來達(dá)到它，
您需要將其放入元標(biāo)記中：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
然后您在 header 中創(chuàng)建樣式：
<style type="text/css">
.table-header{
min-width: 80px;
text-align: left;
}
.tables {
width: 100%;
margin-bottom: 30px;
}
</style>
然后將 CSS 類添加到表和表標(biāo)題中：
<table class="tables">
<tr>
<th class="table-header">First Name</th>
<th class="table-header">Last Name</th>
<th class="table-header">Points</th>
<th class="table-header">Points</th>
<th class="table-header">Points</th>
<th class="table-header">Points</th>
<th class="table-header">Points</th>
<th class="table-header">Points</th>
<th class="table-header">Points</th>
<th class="table-header">Points</th>
<th class="table-header">Points</th>
<th class="table-header">Points</th>
</tr>
這也只是為了隨機(jī)屏幕大小才能到達(dá)您必須使用 css 媒體查詢的每個屏幕
- 2 回答
- 0 關(guān)注
- 172 瀏覽
添加回答
舉報
0/150
提交
取消