Как сделать адаптивную таблицу с одинаковыми процентами ширины?

Question

Я сделал 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>

Answer 1

Прежде всего, почему вы используете стиль в кирпичах 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

Answer 2

Проблема заключается в том, что вы используете ширину в процентах

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