如何制作具有相同宽度百分比的响应式表格?
Posted
技术标签:
【中文标题】如何制作具有相同宽度百分比的响应式表格?【英文标题】:How to make responsive table with same width percentages? 【发布时间】:2020-07-24 01:49:57 【问题描述】:我制作了 3 个具有相同列名的表。每个的 html 标记都是相同的。在我的笔记本电脑浏览器上,它看起来如下截图所示:
您可以看到表格宽度还可以。但现在我在较小的屏幕(移动设备)上显示表格,并且宽度不再起作用:
3 个不同的表没有相同的列宽,因为第 2 个和第 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>
【问题讨论】:
请添加您的代码 我做到了,对不起! 【参考方案1】:问题是您使用基于百分比的宽度
<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>
【讨论】:
【参考方案2】:首先,你为什么使用 html 砖块中的样式?最好创建 css 文件并将其链接到您的 html 页面或在标题部分插入所有 css,请检查以下代码,如果您觉得可以,您还需要调整它,如果您有屏幕尺寸总是可以使用媒体查询来达到它,
你需要把它放在元标记中:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
然后你在标题中创建样式:
<style type="text/css">
.table-header
min-width: 80px;
text-align: left;
.tables
width: 100%;
margin-bottom: 30px;
</style>
然后你将 css 类添加到表格和表格标题中:
<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>
这也只是为了随机屏幕尺寸到达你必须使用 css 媒体查询的每个屏幕
【讨论】:
它不叫 HTML 砖块,那些叫内联样式。如果您指的是标签本身,那么它就称为标签。顺便说一句,您的解决方案看起来是多余的。以上是关于如何制作具有相同宽度百分比的响应式表格?的主要内容,如果未能解决你的问题,请参考以下文章
如何以百分比设置 jQuery Mobile 1.4 响应式面板的宽度?