строка таблицы, не соответствующая ширине заголовков таблиц

I have a table here: Table

Как видно, строка таблицы длиннее заголовков таблиц. У меня есть фиксированные заголовки таблиц, использующие одну таблицу, и только теги th , а затем я создаю вторую таблицу для тегов td .

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

Ниже html:

<table id="qandatbl" cellspacing="0" cellpadding="0" border="0" align="center" style="width: 1205px;">
<thead>
<tr>
<th width="2%"></th>
<th class="qid" width="5%">Num</th>
<th class="question" width="13%">Question</th>
<th class="optandans" width="16%">Option and Answer</th>
<th class="noofreplies" width="7%">Number of Replies</th>
<th class="weight" width="6%">Number of Marks</th>
<th class="image" width="17%">Image</th>
<th class="video" width="17%">Video</th>
<th class="audio" width="17%">Audio</th>
</tr>
</thead>
</table>
<div id="qandatbl_onthefly_container" style="width: 1221px;">
<table id="qandatbl_onthefly" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr class="optionAndAnswer" align="center">
<td class="plusrow" width="2%">1</td>
<td class="qid" width="5%">2</td>
<td class="question" width="13%">3</td>
<td class="extratd" width="16%">4</td>
<td class="noofreplies" width="7%">5</td>
<td class="weight" width="6%">6</td>
<td class="image" width="17%">7</td>
<td class="video" width="17%">8</td>
<td class="audio" width="17%">9</td>
</tr>
</tbody>
</table>
</div>

Ниже приведен CSS:

#qandatbl_onthefly_container
{
    width:100%;
    overflow-y: scroll;
    overflow-x: hidden;
    max-height:500px;
}

#qandatbl_onthefly
{
    width:100%;
    clear:both;
    overflow:auto;
}

#qandatbl, #qandatbl_onthefly{
    border:1px black solid;
    border-collapse:collapse;
    table-layout:fixed;
}       

#qandatbl{
    width:100%;
    margin-left:0;
    clear:both;
}

#qandatbl td { 
    vertical-align: middle;
}

#qandatbl th{
    border:1px black solid;
    border-collapse:collapse;
    text-align:center;
}

<�Сильный> UPDATE:

#qandatbl_onthefly_container
{
    overflow-y: scroll;
    overflow-x: hidden;
    max-height:500px;
}

#qandatbl_onthefly
{
    clear:both;
    overflow:auto;
}

#qandatbl, #qandatbl_onthefly{
    border:1px black solid;
    border-collapse:collapse;
    table-layout:fixed;
    width:100%;
    margin-left:0;
    clear:both;
}       



#qandatbl td { 
    vertical-align: middle;
}

#qandatbl th{
    border:1px black solid;
    border-collapse:collapse;
    text-align:center;
}


#qandatbl_onthefly td{
    border:1px black solid;
    border-collapse:collapse;
}

ВЫХОД НА МОМЕНТ:

enter image description here

0
nl ja de
Почему бы вам не использовать th для разработки заголовка?
добавлено автор Sowmya, источник
Почему бы вам не использовать th для разработки заголовка?
добавлено автор Sowmya, источник

2 ответы

Вы находитесь в двух разных таблицах.

Заголовки находятся в:

table id="qandatbl" cellspacing="0" cellpadding="0" border="0" align="center" style="width: 1205px;"

Тело находится в:

table id="qandatbl_onthefly" cellspacing="0" cellpadding="0" border="0" align="center"

Если вы действительно хотите иметь две разные таблицы, вы должны сделать th и td одинаковой шириной в CSS. Я бы предложил сделать thead и tbody тем, что ваши две таблицы в настоящее время.

thead id="qandatbl"
tbody id="qandatbl_onthefly"

(OT: И может кто-нибудь, пожалуйста, скажите мне, как форматировать HTML-теги в SO?)

0
добавлено
Я обновил демо, которое вы видите, но проблема в том, что строка таблицы все еще шире заголовков таблиц, обновляется css
добавлено автор user1830984, источник
Позвольте мне показать вам скриншот о том, как он выглядит на моем экране
добавлено автор user1830984, источник
Sory я забыл изменить стиль в html, чтобы изменить ширину, чтобы сделать ее такой же. Это работает, спасибо :)
добавлено автор user1830984, источник
здесь таблица отлично отображает. Фактически строки таблицы на 1px меньше заголовков.
добавлено автор th3falc0n, источник

Вы находитесь в двух разных таблицах.

Заголовки находятся в:

table id="qandatbl" cellspacing="0" cellpadding="0" border="0" align="center" style="width: 1205px;"

Тело находится в:

table id="qandatbl_onthefly" cellspacing="0" cellpadding="0" border="0" align="center"

Если вы действительно хотите иметь две разные таблицы, вы должны сделать th и td одинаковой шириной в CSS. Я бы предложил сделать thead и tbody тем, что ваши две таблицы в настоящее время.

thead id="qandatbl"
tbody id="qandatbl_onthefly"

(OT: И может кто-нибудь, пожалуйста, скажите мне, как форматировать HTML-теги в SO?)

0
добавлено
Я обновил демо, которое вы видите, но проблема в том, что строка таблицы все еще шире заголовков таблиц, обновляется css
добавлено автор user1830984, источник
Позвольте мне показать вам скриншот о том, как он выглядит на моем экране
добавлено автор user1830984, источник
Sory я забыл изменить стиль в html, чтобы изменить ширину, чтобы сделать ее такой же. Это работает, спасибо :)
добавлено автор user1830984, источник
здесь таблица отлично отображает. Фактически строки таблицы на 1px меньше заголовков.
добавлено автор th3falc0n, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)