如何制作具有相同宽度百分比的响应式表格？

Question

我制作了 3 个具有相同列名的表。每个的 html 标记都是相同的。在我的笔记本电脑浏览器上，它看起来如以下屏幕截图所示：

您可以看到表格宽度没问题。但现在我在较小的屏幕（移动设备）上显示表格，并且宽度不再起作用：

这 3 个不同的表没有相同的列宽，因为第二个和第三个表的名称比第一个表更长。在手机上查看表格时如何使它们的宽度相同？我需要哪些 CSS 代码？提前谢谢了？

Answer 1

问题是您使用基于百分比的宽度&nbsp;<th style="width: 15%">Points</th>由于您的屏幕尺寸不同，7% 折扣的绝对值也不同。因此，您必须将其更改为某个固定值，以便在所有屏幕尺寸上保持一致。&nbsp;<th style="width: 10rem">Points</th>请注意，我在这里随机选择了 10rem，你必须进行实验。这是因为基于百分比的宽度是向下级联的。表格宽度本身基于屏幕宽度，因此单元格宽度也基于屏幕宽度。您还可以给它一个最小宽度，这样它就被锁定在 10rem，但可以增长到超过该值的表格宽度的 15%。table {&nbsp; width: 100%;}th {&nbsp; min-width: 10rem;&nbsp; width: 15%;}td, th {&nbsp; border: 1px solid;}<table>&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th>first</th>&nbsp; &nbsp; &nbsp; <td>a</td>&nbsp; &nbsp; &nbsp; <td>b</td>&nbsp; &nbsp; &nbsp; <td>c</td>&nbsp; &nbsp; &nbsp; <td>b</td>&nbsp; &nbsp; &nbsp; <td>d</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th>second</th>&nbsp; &nbsp; &nbsp; <td>a</td>&nbsp; &nbsp; &nbsp; <td>b</td>&nbsp; &nbsp; &nbsp; <td>c</td>&nbsp; &nbsp; &nbsp; <td>b</td>&nbsp; &nbsp; &nbsp; <td>d</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th>third</th>&nbsp; &nbsp; &nbsp; <td>a</td>&nbsp; &nbsp; &nbsp; <td>b</td>&nbsp; &nbsp; &nbsp; <td>c</td>&nbsp; &nbsp; &nbsp; <td>b</td>&nbsp; &nbsp; &nbsp; <td>d</td>&nbsp; &nbsp; </tr>&nbsp; </tbody></table>

Answer 2

首先，为什么要使用 html bricks 中的样式？最好创建 css 文件并将其链接到您的 html 页面或在标题部分插入所有 css，请检查下面的代码，如果您同意，您还需要调整它，如果您有您想要的屏幕尺寸总是可以使用媒体查询来达到它，您需要将其放入元标记中：<meta name="viewport" content="width=device-width, initial-scale=1.0">然后您在 header 中创建样式：<style type="text/css">&nbsp; &nbsp; .table-header{&nbsp; &nbsp; &nbsp; &nbsp; min-width: 80px;&nbsp; &nbsp; &nbsp; &nbsp; text-align: left;&nbsp; &nbsp; }&nbsp; &nbsp; .tables {&nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; margin-bottom: 30px;&nbsp; &nbsp; }</style>然后将 CSS 类添加到表和表标题中：<table class="tables">&nbsp; &nbsp; <tr>&nbsp; <th class="table-header">First Name</th>&nbsp; <th class="table-header">Last Name</th>&nbsp; <th class="table-header">Points</th>&nbsp; <th class="table-header">Points</th>&nbsp; <th class="table-header">Points</th>&nbsp; <th class="table-header">Points</th>&nbsp; <th class="table-header">Points</th>&nbsp; <th class="table-header">Points</th>&nbsp; <th class="table-header">Points</th>&nbsp; <th class="table-header">Points</th>&nbsp; <th class="table-header">Points</th>&nbsp; <th class="table-header">Points</th></tr>这也只是为了随机屏幕大小才能到达您必须使用 css 媒体查询的每个屏幕