Хотите, чтобы одна HTML-таблица была такой же ширины, как другая - PullRequest
Новая
       12

Хотите, чтобы одна HTML-таблица была такой же ширины, как другая

0 голосов
/ 12 декабря 2018

Рассмотрим этот HTML-файл: 

<!DOCTYPE html>
<html>
<head>
  <title>Two tables before</title>
  <meta charset="utf-8">
  <style>

    table
    {
      font-family: monospace;
      font-size: 15pt;
      border: 1px solid #000;
      border-collapse: collapse;
      margin-top: none;
      margin-bottom: none;
    }

    td, th { border-left: 1px solid #000; }
    #bottom-table { caption-side: bottom; }

  </style>
</head>

<body>

<table>
  <caption>Before: top table caption</caption>
  <tbody>
    <tr>
      <td>This is a row in the top table which should be about this long</td>
    </tr>
  </tbody>
</table>

<table id="bottom-table">
  <caption>Before: bottom table caption</caption>
  <tbody>
    <tr>
      <td>This is a row in the bottom table</td>
      <td>widen this</td>
    </tr>
  </tbody>
</table>

</body>
</html>

Этот файл отображается в Chrome следующим образом:

two tables not same width

Обратите внимание, что дватаблицы смежны без пробелов, разделяющих их.Это то, что нужно.Обратите внимание, что таблицы имеют разную ширину.Это не хотел.Скорее, желательно, чтобы ширина второго td в строке нижней таблицы была увеличена так, чтобы ширина нижней таблицы стала такой же, как ширина верхней таблицы.Примерно так:

two tables of same width

Изображение выше немного не так.Требуется, чтобы таблицы были одинаковой ширины.Конечно, в идеале, HTML / CSS для достижения этого не требует абсолютной ширины, так что изменение ширины первой таблицы автоматически приведет к изменению ширины второй таблицы.Кроме того, я бы предпочел решение только на HTML и CSS, без JavaScript.

1 Ответ

0 голосов
/ 12 декабря 2018

Если вам нужна ширина жидкости для обеих таблиц, где они также должны быть равными по ширине, установите для них обе значения width="100%", а затем убедитесь, что они заполняют один и тот же родительский элемент div.Затем они всегда должны быть такими же широкими, как родительский элемент, который можно сделать относительным и плавным для страницы.

...