Синхронизация width th и td в table

@olegjan · Регистрация: 14.07.2014

Author24 — интернет-сервис помощи студентам

Здравствуйте,
возникла такая проблема..
Пытаюсь сделать закрепляемый заголовок таблицы, делаю так

HTML5

table
    thead
        tr
            th.grid Заголовок_1
            th.grid colspan="2" Заголовок_2
        tr
            th.grid Заголовок_3
            th.grid Заголовок_4
            th.grid Заголовок_5
    tbody
 
        tr
            td.grid Текст_1
            td.grid uhhhhhhhhhhhhhhhhhhhhhhhhhh
            td.grid Текст_1
        tr
            td.grid Текст_1
            td.grid uhhhhhhhhhhhhhhhhhhhhhhhhhhend
            td.grid Текст_1
        tr
            td.grid Текст_1
            td.grid uhhhhhhhhhhhhhhhhhhhhhhhhhh
            td.grid Текст_1
        tr
            td.grid Текст_1
            td.grid uhhhhhhhhhhhhhhhhhhhhhhhhhh
            td.grid Текст_1
        tr
            td.grid Текст_1
            td.grid uhhhhhhhhhhhhhhhhhhhhhhhhhh
            td.grid Текст_1

CSS

table thead
{
    display: block;
}
 
table tbody
{
    display: block;
    overflow: auto; 
    height: 200px;
}
 
table th 
{
}
 
table td 
{
    word-break: break-all;
}

В результате получается, что tbody действительно прокручивается, но вот ширина ячеек в thead и tbody не совпадают..
Задание размеров руками результатов не даёт

@Барасби · 09.01.2017, 13:18

colspan="2" в тег th Заключи

@olegjan · 09.01.2017, 13:23 **[ТС]**

Барасби, прощу прощения..написано в slim под rails..

HTML5

1	th.grid colspan="2" Заголовок_2

читается как

HTML5

1	<th class="grid" colspan="2">Заголовок_2</th>

@Барасби · 09.01.2017, 13:44

CSS

table thead
{
  
}
 
table tbody
{
    display: table;
    overflow: auto; 
    height: 200px;
}
 
table th 
{
}
 
table td 
{
    word-break: break-all;
}

И убери Теги <thead> и <tbody>

@olegjan · 09.01.2017, 15:29 **[ТС]**

Барасби,

Сообщение от Барасби

table tbody { display: table; overflow: auto; height: 200px; }

Как же я уберу например thead, если потом на него в css ссылаюсь..
Да и не работает код..

@Барасби · 09.01.2017, 15:41

HTML5

<html>
<head>
<title>PRIMER</title>
<style rel="stylesheet">
table th, td{
outline:1px solid red;
}
table
{
    display: table;
    overflow: auto; 
    height: 200px;
}
 
table td 
{
    word-break: break-all;
}
 
</style>
<table>
 
        <tr>
            <th class="grid"> Заголовок_1</th>
            <th class="grid" colspan="2"> Заголовок_2</th>
        <tr>
           <th class="grid">Заголовок_3</th>
            <th class="grid">Заголовок_4</th>
            <th class="grid">Заголовок_5</th>
         </tr>
 
        <tr>
            <td class="grid"> Текст_1</td>
            <td class="grid"> uhhhhhhhhhhhhhhhhhhhhhhhhhh</td>
            <td class="grid"> Текст_1</td>
        </tr>
</body>
</html>

@olegjan · 09.01.2017, 15:55 **[ТС]**

Барасби, к сожалению вообще не то..не работает
мне нужен скролл в tbody таблицы с зафиксированным thead..

@Fedor92 · 09.01.2017, 17:02

olegjan, приложите HTML... Думаю это упростит и ускорит процесс...

@olegjan · 10.01.2017, 13:08 **[ТС]**

Fedor92, ну html и css сверху привёл уже..
Видимо надо считывать ширину ячеек в tbody и указывать её в thead..
если вы меня не остановите я буду использовать javascript..
хотя мне кажется должно быть какое-то более тривиальное решение..

@Fedor92 · 10.01.2017, 13:16

Сообщение от olegjan

Fedor92, ну html и css сверху привёл уже..

Не люблю я повторять, то что Вы привели сверху это не html, а полуфабрикат... Думаю у большинства помощников и у меня лично нет никакого желания сидеть и за Вас теги расставлять...

Сообщение от olegjan

если вы меня не остановите я буду использовать javascript..

Никто не будет останавливать, если Вы не прислушиваетесь к советам...

Сообщение от olegjan

хотя мне кажется должно быть какое-то более тривиальное решение..

Угу... К примеру задать ширину ячеек....

@mrtoxas · 10.01.2017, 13:24

Не по теме:

Сообщение от olegjan

если вы меня не остановите я буду использовать javascript

Прошу в моем переходе на js винить Fedor92. Прощайте друзья... :rofl:

olegjan, Масса решений

@olegjan · 11.01.2017, 10:22 **[ТС]**

mrtoxas,

@olegjan 11 / 11 / 1 Регистрация: 14.07.2014 Сообщений: 186
	11.01.2017, 10:22 [ТС]	12
	mrtoxas, 0

@Барасби 2 / 2 / 2 Регистрация: 04.10.2014 Сообщений: 66
	09.01.2017, 13:18	2
	colspan="2" в тег th Заключи 0

@olegjan 11 / 11 / 1 Регистрация: 14.07.2014 Сообщений: 186
	09.01.2017, 15:29 [ТС]	5
	Барасби, Сообщение от Барасби table tbody { display: table; overflow: auto; height: 200px; } Как же я уберу например thead, если потом на него в css ссылаюсь.. Да и не работает код.. 0

@olegjan 11 / 11 / 1 Регистрация: 14.07.2014 Сообщений: 186
	09.01.2017, 15:55 [ТС]	7
	Барасби, к сожалению вообще не то..не работает мне нужен скролл в tbody таблицы с зафиксированным thead.. 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	09.01.2017, 17:02	8
	olegjan, приложите HTML... Думаю это упростит и ускорит процесс... 0

@olegjan 11 / 11 / 1 Регистрация: 14.07.2014 Сообщений: 186
	10.01.2017, 13:08 [ТС]	9
	Fedor92, ну html и css сверху привёл уже.. Видимо надо считывать ширину ячеек в tbody и указывать её в thead.. если вы меня не остановите я буду использовать javascript.. хотя мне кажется должно быть какое-то более тривиальное решение.. 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	10.01.2017, 13:16	10
	Сообщение от olegjan Fedor92, ну html и css сверху привёл уже.. Не люблю я повторять, то что Вы привели сверху это не html, а полуфабрикат... Думаю у большинства помощников и у меня лично нет никакого желания сидеть и за Вас теги расставлять... Сообщение от olegjan если вы меня не остановите я буду использовать javascript.. Никто не будет останавливать, если Вы не прислушиваетесь к советам... Сообщение от olegjan хотя мне кажется должно быть какое-то более тривиальное решение.. Угу... К примеру задать ширину ячеек.... 1

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	10.01.2017, 13:24	11
	Не по теме: Сообщение от olegjan если вы меня не остановите я буду использовать javascript Прошу в моем переходе на js винить Fedor92. Прощайте друзья... :rofl: olegjan, Масса решений 1