Я хочу знать, как расположить две таблицы друг над другом и занимать одну и ту же ширину.
Вот пример html:
<div class="wd100 gridcntnr">
<table class="wd100 bgred">
<tbody>
<tr>
<td>LOREM IPSUM</td>
<td>NAME</td>
<td>ABC</td>
</tr>
</tbody>
</table>
<table class="wd100">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
<th>Header 9</th>
<th>Header 10</th>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
<th>Header 9</th>
<th>Header 10</th>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
<th>Header 9</th>
<th>Header 10</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
Соответствующий css:
.gridcntnr{
overflow:auto;
border: 1px solid black;
}
.wd100{
width: 100%;
}
.bgred{
background-color:red;
}
Я хотел бы знать, почему существует разница в расположении обеих таблиц (дополнительное пространство появляется в верхней таблице справа), а также как расположить две таблицы друг над другом и занимать одну и ту же ширину.
Я попытался использовать table-layout: fixed; но при этом вторая таблица получает корректировку, и дополнительное пространство, которое появляется в верхней таблице с правой стороны, полностью не удаляется.
Любая помощь будет оценена по достоинству. Пожалуйста, внесите свой вклад.
Вы можете разместить один стол поверх другого несколькими способами. Например, вы можете применить отрицательную маржу ко второй таблице следующим образом:
.gridcntnr>table:last-child {
margin-top: -25px;
}
Что касается дополнительного пространства справа от первой таблицы, таблица будет потреблять столько места, сколько требует его содержимое. У вас гораздо больше ячеек в строке во второй таблице, чем строка в первой таблице. Первая таблица занимает 100% ширину, которую вы определили, но эта ширина относится к ее родительскому элементу, div
. Вторая таблица переполняет всю ширину своего родителя, требуя прокрутки. Единственный способ обойти это - использовать монитор, который мог бы сместиться со всем содержимым второй таблицы на странице без прокрутки. Тогда справа от первой таблицы не будет лишнего места.
Но почему вы используете таблицы таким образом? Вероятно, вам легче найти семантическую разметку. При отображении данных разбивайте таблицы, чтобы отображать контент более легко и менее подавляющим образом.
Вам нужно иметь родительский контейнер с положением: relative; и дети, имеющие положение: абсолютное; вот так:
.gridcntnr {
position:relative;
overflow:auto;
border: 1px solid black;
}
.gridcntnr .wd100 {
position:absolute;
width: 100%;
}
.gridcntnr .bgred {
position:absolute;
background-color:red;
}
Вы пробовали абсолютное позиционирование в соответствии со следующим документом? → http://www.htmldog.com/guides/css/intermediate/layout/
Вы можете достичь запрошенного результата, установив свойство css display
окружающего div на table
или inline-table
.gridcntnr{
display:inline-table;
overflow:auto;
border: 1px solid black;
}