如何使响应式 table 具有相同的宽度百分比？

Question

我用相同的列名制作了 3 个 table。每个的 html 标记是相同的。在我的笔记本电脑浏览器上，它看起来如下图所示：

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

3 个不同的 table 没有相同的列宽，因为第二个和第三个 table 的名称比第一个 table 长。在移动 phone 上查看 table 时，如何使它们的宽度相同？我需要哪个 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>

Answer 1

问题是您使用了基于百分比的宽度

 <th style="width: 15%">Points</th>

由于您的屏幕尺寸不同，7折绝对值不同。因此，您必须将其更改为某个固定值，以便在所有屏幕尺寸上保持一致。

 <th style="width: 10rem">Points</th>

注意我这里随机选了10rem，你要实验一下

这是因为基于百分比的宽度向下层叠。 table 宽度本身基于屏幕宽度，因此单元格宽度基于屏幕宽度。

你也可以给它一个最小宽度，这样它就可以锁定在 10rem，但可以增长到 tables 宽度的 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 积木中的样式？最好创建 css 文件并将其 link 到您的 html 页面或将所有 css 插入 header 部分，请检查以下代码，如果你没问题，你也需要调整它，如果你有屏幕尺寸，你总是可以使用媒体查询来达到它，

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

<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 媒体查询

如何使响应式 table 具有相同的宽度百分比？

How to make responsive table with same width percentages?

html

css

html-table

responsive