我制作了 3 个具有相同列名的表。每个的 html 标记是相同的。在我的笔记本电脑浏览器上,它看起来如下图所示:
你可以看到表格宽度没问题。但是现在我在较小的屏幕(移动设备)上显示表格并且宽度不再起作用:
3 个不同的表没有相同的列宽,因为第二个和第三个表的名称比第一个表更长。在手机上查看表格时如何使它们具有相同的宽度?我需要哪个 css 代码?提前谢谢了?
代码是:
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th,
td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
<div style="overflow-x:auto;">
<table>
<tr>
<th style="width: 15%">First Name</th>
<th style="width: 15%">Last Name</th>
<th style="width: 7%">Points</th>
<th style="width: 7%">Points</th>
<th style="width: 7%">Points</th>
<th style="width: 7%">Points</th>
<th style="width: 7%">Points</th>
<th style="width: 7%">Points</th>
<th style="width: 7%">Points</th>
<th style="width: 7%">Points</th>
<th style="width: 7%">Points</th>
<th style="width: 7%">Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
</tr>
</table>
<table style="margin-top:30px">
<tr>
<th style="width: 15%">First Name</th>
<th style="width: 15%">Last Name</th>
<th style="width: 7%">Points</th>
<th style="width: 7%">Points</th>
<th style="width: 7%">Points</th>
<th style="width: 7%">Points</th>
<th style="width: 7%">Points</th>
<th style="width: 7%">Points</th>
<th style="width: 7%">Points</th>
<th style="width: 7%">Points</th>
<th style="width: 7%">Points</th>
<th style="width: 7%">Points</th>
</tr>
<tr>
<td>Gert-Jan</td>
<td>van de Smit</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Engelbert</td>
<td>Jacksonville</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>Adama</td>
<td>de Johnsons</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
</tr>
</table>
<table style="margin-top:30px">
<tr>
<th style="width: 15%">First Name</th>
<th style="width: 15%">Last Name</th>
<th style="width: 7%">Points</th>
<th style="width: 7%">Points</th>
<th style="width: 7%">Points</th>
<th style="width: 7%">Points</th>
<th style="width: 7%">Points</th>
<th style="width: 7%">Points</th>
<th style="width: 7%">Points</th>
<th style="width: 7%">Points</th>
<th style="width: 7%">Points</th>
<th style="width: 7%">Points</th>
</tr>
<tr>
<td>Frankalberto</td>
<td>Vennegoor of Hesseling</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Sandy</td>
<td>JacksondeMeerwater</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>Ravon</td>
<td>Johnson</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
</tr>
</table>
</div>
最佳答案
问题是您使用基于百分比的宽度
<th style="width: 15%">Points</th>
由于您的屏幕尺寸不同,7% 的折扣将是不同的绝对值。
因此,您必须将其更改为某个固定值,以便在所有屏幕尺寸上保持一致。
<th style="width: 10rem">Points</th>
请注意,我在这里随机选择了 10rem,您必须进行实验。
这是因为基于百分比的宽度是向下级联的。表格宽度本身基于屏幕宽度,因此单元格宽度基于屏幕宽度。
你也可以给它一个最小宽度的东西,这样它就被锁定在比方说 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>
关于html - 如何制作具有相同宽度百分比的响应式表格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61155096/