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

Question

我制作了 3 个具有相同列名的表。每个的 html 标记都是相同的。在我的笔记本电脑浏览器上，它看起来如以下屏幕截图所示：您可以看到表格宽度没问题。但现在我在较小的屏幕（移动设备）上显示表格，并且宽度不再起作用：这 3 个不同的表没有相同的列宽，因为第二个和第三个表的名称比第一个表更长。在手机上查看表格时如何使它们的宽度相同？我需要哪些 CSS 代码？提前谢谢了？

Answer 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>

Answer 2

首先，为什么要使用 html bricks 中的样式？最好创建 css 文件并将其链接到您的 html 页面或在标题部分插入所有 css，请检查下面的代码，如果您同意，您还需要调整它，如果您有您想要的屏幕尺寸总是可以使用媒体查询来达到它，

您需要将其放入元标记中：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

然后您在 header 中创建样式：

<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 媒体查询的每个屏幕