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

Я немного оглянулся и не могу найти достойного решения, которое не требует какого-то безумного JavaScript, к следующей проблеме.

В примере есть две отдельные таблицы. Первый - только для заголовков. Второй - для тела. Нам нужны две таблицы, потому что требование для этой функции состоит в том, что таблица тела должна быть локально прокручиваемой, то есть заголовки должны оставаться видимыми по мере прокрутки тела таблицы. Мы не можем использовать какие-либо новые причудливые сводные таблицы HTML 5, потому что мы должны поддерживать IE.

Есть ли способ сделать это с помощью чистого CSS? Он не должен быть совершенным, пока он выглядит прилично, что все, что мне нужно.

Ответ 1

Определенно выполнимо только в CSS. Просто установите ширину в обеих таблицах, trs и tds, примените перенос слов и установите для параметра table-layout значение fixed. Этот последний параметр позволяет использовать определенные ширины столбцов, а не определять ширину содержимого ячейки.

#tb1 {     width: 80%;     }

#tb2 {     width: 80%;     }

#tb1 tr {     width: 100%;     }

#tb2 tr {     width: 100%;     }

.col1 {     width: 35%;     }
.col2 {     width: 35%;     }
.col3 {     width: 20%;     }
.col4 {     width: 10%;     }

#tb1, #tb2 {     table-layout: fixed;     }
#tb1 td, #tb2 td {     word-wrap: break-word;     }

<table id="tb1" border="1">
  <tr>
    <td class="col1">Title 1</td>
    <td class="col2">Title 2</td>
    <td class="col3">Title 3</td>
    <td class="col4">Title 4</td>
  </tr>
</table>

<table id="tb2" border="1">
  <tr>
    <td class="col1">Content 00001</td>
    <td class="col2">Content 02</td>
    <td class="col3">Content 0000000000003</td>
    <td class="col4">Content 000000000000000000004</td>
  </tr>
</table>

Ответ 2

Это образец концепции, используя JQuery. (Вы можете сделать это ваниль, но требуется больше кода)

<table id="tb1" border="1">
        <tr>
            <td>Title 1</td>
            <td>Title 2</td>
            <td>Title 3</td>
            <td>Title 4</td>
        </tr>
    </table>

    <table id="tb2" border="1">
        <tr>
            <td>Content 00001</td>
            <td>Content 02</td>
            <td>Content 0000000000003</td>
            <td>Content 000000000000000000004</td>
        </tr>
    </table>

JS:

function SetSize() {
    var i = 0;
    $("#tb2 tr").first().find("td").each(function() {
        $($("#tb1 tr").first().find("td")[i]).width(
            $(this).width()
        );
        i++;
    });
}
$(window).resize(SetSize);
SetSize();

Нет "сумасшедшего javascript": D
Здесь работает скрипка с несколькими css, чтобы она выглядела лучше: http://jsfiddle.net/5mfVT/

Ответ 3

Таблицы изменяются как можно меньше. Таблица ваших заголовков имеет более узкое содержимое и поэтому может изменяться до меньшей ширины, прежде чем захватить для изменения размера.
Решение, не относящееся к Javascript, должно либо определять ширину для всех ваших столбцов, либо определять свойство min-width ваши таблицы, которые соответствуют большей ширине двух минимальных ширины.