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

Question

[Alexey]

Подскажите, как реализовать возможность зависимости thead от tbody. Я имею ввиду, если ширина колонки thead увеличивается, то и увеличивается ширина соответствующей колонки в tbody. При этом ширина всей таблицы 100%, а высота фиксированная и существует возможность скроллинга tbody?
jsfiddle.net/nyCKE/6746

<table>
    <thead>
        <tr>
            <td>Problem</td>
            <td>Solution</td>
            <td>Problem</td>
            <td>Solution</td>
            <td>Problem</td>
            <td>Solution</td>
            <td>Problem</td>
            <td>Solution</td>
        </tr>
    </thead>
    <tbody>
    <tr><td>1</td><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td></tr>
    
    </tbody>
</table>

table {
    background-color: #aaa;
    width: 100%
}
tbody {
    background-color: #ddd;
    height: 100px;
    overflow: auto;
}
td {
    padding: 3px 10px;
    border: 1px solid red;
}

thead > tr, tbody{
    display:block;}

Comments

[Денис Инешин]

Не очень понятно что вы имеете виду. В таблице и так колонки зависимы друг от друга: jsfiddle.net/IonDen/coe44p12

[Alexey]

В моем примере не связаны tbody и thead. После добавиления этих тегов, ширина перестает "синхронизироваться"

Answer 1

[Андрей Федоров]

тег th
jsfiddle.net/2uby3o91

Comments

[Alexey]

Ничего не поменялось... мне нужно чтобы колонки thead и tbody были одинаковой ширины, + фиксированный хедер

[Андрей Федоров]

глюк jsfiddle что-ли... codepen.io/aliencash/pen/wamdJN
если все еще не так как нужно нарисуйте картинку как должно быть...

[Alexey]

Андрей Федоров: Андрей я вставил множество строк, но заголовок не зафиксирован. При скролле он уходит вверх.

[Сергей delphinpro]

azovl: Стандартные таблицы не имеют возможности зафиксировать заголовочные ячейки.
Воспользуйтесь каким-нибудь плагином на js.

[Alexey]

А уменя в примере выше (ы моем вопросе ) используется нестандартная таблица?

[Андрей Федоров]

azovl: проблема в том, что position: fixed у элемента означает, что его размеры перестают влиять на остальные элементы. в том числе и на остальные элементы таблицы.

можно сделать одинаковую ширину в всех элементов - это подойдет?

[Alexey]

Андрей Федоров: проблема в том что сне необходимо чтобы внутри ячейки были гмбкими по ширине, в тоже время table стоит с шириной 100%. Таблицу нужно смотреть на многих устройствах

[Андрей Федоров]

azovl: так они могут быть гибкими если зададите размеры в относительных единицах, процентах или vw.

[Alexey]

Спасибо Андрей за помощь. Посмотрю завтра. Попробую настроить.

[Андрей Федоров]

azovl: Не за что... Еще один вариант придумал. Можно использовать селектор tr:nth-child(n) и т.п.

Answer 2

[ukoHka]

jsfiddle.net/nyCKE/6754

Comments

[Alexey]

При добавлении фиксированного хедера, ширина колонок не одинаковая.

[ukoHka]

Ну тогда можно поизвращаться так: jsfiddle.net/nyCKE/6755
ширина не одинаковая из-за полоски прокрутки. Надо для нее в thead место оставить