как расположить два стола друг на друге, занимая одинаковую ширину

0

Я хочу знать, как расположить две таблицы друг над другом и занимать одну и ту же ширину.

Вот пример 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; но при этом вторая таблица получает корректировку, и дополнительное пространство, которое появляется в верхней таблице с правой стороны, полностью не удаляется.

Любая помощь будет оценена по достоинству. Пожалуйста, внесите свой вклад.

  • 0
    Вопрос не ясен, можете ли вы нарисовать диаграмму MSPaint или объяснить в общих чертах?
Теги:

4 ответа

0

Вы можете разместить один стол поверх другого несколькими способами. Например, вы можете применить отрицательную маржу ко второй таблице следующим образом:

.gridcntnr>table:last-child {
    margin-top: -25px;
}

Что касается дополнительного пространства справа от первой таблицы, таблица будет потреблять столько места, сколько требует его содержимое. У вас гораздо больше ячеек в строке во второй таблице, чем строка в первой таблице. Первая таблица занимает 100% ширину, которую вы определили, но эта ширина относится к ее родительскому элементу, div. Вторая таблица переполняет всю ширину своего родителя, требуя прокрутки. Единственный способ обойти это - использовать монитор, который мог бы сместиться со всем содержимым второй таблицы на странице без прокрутки. Тогда справа от первой таблицы не будет лишнего места.

Но почему вы используете таблицы таким образом? Вероятно, вам легче найти семантическую разметку. При отображении данных разбивайте таблицы, чтобы отображать контент более легко и менее подавляющим образом.

0

Вам нужно иметь родительский контейнер с положением: relative; и дети, имеющие положение: абсолютное; вот так:

.gridcntnr {
     position:relative;
     overflow:auto;
     border: 1px solid black;
}
.gridcntnr .wd100 {
     position:absolute;
     width: 100%;
}
.gridcntnr .bgred {
     position:absolute;
     background-color:red;
}
0

Вы пробовали абсолютное позиционирование в соответствии со следующим документом? → http://www.htmldog.com/guides/css/intermediate/layout/

0

Вы можете достичь запрошенного результата, установив свойство css display окружающего div на table или inline-table

.gridcntnr{
    display:inline-table;
    overflow:auto;
    border: 1px solid black;
}
  • 0
    Мне нужно, чтобы полоса прокрутки появилась в нижней части таблицы.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню