Как сохранить ширину столбца в таблице HTML одинаковой для всех столбцов на основе самого широкого столбца

Question

Я вижу много вопросов относительно ширины столбца, но мне не удалось найти ответ для сценария, точно такого же, как у меня.

Вот мой стол:

<table>
    <tr>
        <td colspan="3">Title goes here</td>
        <td>A</td>
        <td class="right">B</td>
    </tr>

    <tr>
        <td rowspan="3">C</td>
        <td>D</td>
        <td>E</td>
        <td>F</td>
        <td class="right">G</td>
    </tr>

    <tr>
        <td>H</td>
        <td colspan="2" class="center">I</td>
        <td rowspan="2" class="right">J</td>
    </tr>

    <tr>
        <td>K</td>
        <td>L</td>
        <td>M</td>
    </tr>

    <tr>
        <td class="right">N</td>
        <td colspan="4" class="center">O</td>
    </tr>
</table>

и вот мой CSS:

<style>
    table 
    {
        table-layout: fixed;

    }

    table, td 
    {
        border: 1px solid;
    }

    .right 
    {
        text-align:right;
        vertical-align:bottom;
    }
    .center 
    {
        text-align: center;
    }
</style>

Я хочу, чтобы все пять столбцов имели одинаковую ширину в зависимости от ширины. Идея в том, что я не знаю, насколько большим будет название. Я знаю, что могу установить фиксированную ширину таблицы (например, 200px или 100%), но я не хочу этого делать. Я хочу, чтобы ширина столбцов и ширина таблицы увеличивались по мере увеличения заголовка. И, как вы можете видеть, заголовок охватывает три столбца.

Answer 1

Я боюсь, что это не может быть сделано в HTML, даже с помощью CSS. Вам также понадобятся некоторые сценарии: сценарий, который обрабатывает таблицу после того, как браузер отформатировал ее, находит самый широкий столбец и устанавливает для всех столбцов эту ширину. Предполагая ваш table элемент имеет id=t, следующий чистый код JavaScript делает эту работу:

<script>
window.onload = function () {
var tbl = document.getElementById("t");
var row = tbl.rows[0];
var maxWidth = 1;
for ( var i = 0; i < row.childNodes.length; i++ ) {
  var width = row.childNodes[i].offsetWidth;
  if(width > maxWidth) { maxWidth = width; } 
  }
for ( var i = 0; i < row.childNodes.length; i++ ) {
  row.childNodes[i].style.width = maxWidth + "px"; 
  }
}
</script>