HTML таблица горизонтальная прокрутка

Question

Я пытаюсь зафиксировать столик в своем лезвии, потому что он такой большой, простирающийся горизонтально вправо.

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

В настоящее время я использую комплект пользовательского интерфейса в Laravel.

В принципе, у меня есть 6 основных заголовков. Первый из них имеет 5 дочерних заголовков, а остальные 5 основных заголовков имеют по 6 дочерних заголовков. Конечно, данные следуют тому же (5 столбцов, 6,6,6,6,6)

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

Таблица:

<div class="md-card-content">
    <table class="uk-table" style="table-layout: fixed">
        <thead>
            <tr>
                <th colspan="5" style="text-align: center; font-size: 18px;">HeaderOne</th>
                <th colspan="6" style="text-align: center; font-size: 18px;">HeaderTwo</th>
                <th colspan="6" style="text-align: center; font-size: 18px;">HeaderThree</th>
                <th colspan="6" style="text-align: center; font-size: 18px;">HeaderFour</th>
                <th colspan="6" style="text-align: center; font-size: 18px;">HeaderFive</th>
                <th colspan="6" style="text-align: center; font-size: 18px;">HeaderSix</th>
            </tr>
        <tr>
            <th>child-header-1</th>
            <th>child-header-1</th>
            <th>child-header-1</th>
            <th>child-header-1</th>
            <th>child-header-1</th>
            <th>child-header-2</th>
            <th>child-header-2</th>
            <th>child-header-2</th>
            <th>child-header-2</th>
            <th>child-header-2</th>
            <th>child-header-2</th>
            <th>child-header-3</th>
            <th>child-header-3</th>
            <th>child-header-3</th>
            <th>child-header-3</th>
            <th>child-header-3</th>
            <th>child-header-3</th>
            <th>child-header-4</th>
            <th>child-header-4</th>
            <th>child-header-4</th>
            <th>child-header-4</th>
            <th>child-header-4</th>
            <th>child-header-4</th>
            <th>child-header-5</th>
            <th>child-header-5</th>
            <th>child-header-5</th>
            <th>child-header-5</th>
            <th>child-header-5</th>
            <th>child-header-5</th>
            <th>child-header-6</th>
            <th>child-header-6</th>
            <th>child-header-6</th>
            <th>child-header-6</th>
            <th>child-header-6</th>
            <th>child-header-6</th>
        </tr>
        </thead>
        <tbody>
            <tr>
                <td>1-data</td>
                <td>1-data</td>
                <td>1-data</td>
                <td>1-data</td>
                <td>1-data</td>
                <td>2-data</td>
                <td>2-data</td>
                <td>2-data</td>
                <td>2-data</td>
                <td>2-data</td>
                <td>2-data</td>
                <td>3-data</td>
                <td>3-data</td>
                <td>3-data</td>
                <td>3-data</td>
                <td>3-data</td>
                <td>3-data</td>
                <td>4-data</td>
                <td>4-data</td>
                <td>4-data</td>
                <td>4-data</td>
                <td>4-data</td>
                <td>4-data</td>
                <td>5-data</td>
                <td>5-data</td>
                <td>5-data</td>
                <td>5-data</td>
                <td>5-data</td>
                <td>5-data</td>
                <td>6-data</td>
                <td>6-data</td>
                <td>6-data</td>
                <td>6-data</td>
                <td>6-data</td>
                <td>6-data</td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

Вы можете обернуть контейнер вокруг таблицы, чтобы определить ширину отображаемой области и установить для параметра «x-overflow» значение auto, которое будет автоматически прокручиваться по оси x (в соответствии с шириной таблицы).

<div class="table-wrapper" style="width: 500px">
  <div class="md-card-content" style="overflow-x: auto;">
    <table class="uk-table">
        <thead>
            <tr>
                <th colspan="5" style="text-align: center; font-size: 18px;">HeaderOne</th>
                <th colspan="6" style="text-align: center; font-size: 18px;">HeaderTwo</th>
                <th colspan="6" style="text-align: center; font-size: 18px;">HeaderThree</th>
                <th colspan="6" style="text-align: center; font-size: 18px;">HeaderFour</th>
                <th colspan="6" style="text-align: center; font-size: 18px;">HeaderFive</th>
                <th colspan="6" style="text-align: center; font-size: 18px;">HeaderSix</th>
            </tr>
        <tr>
            <th>child-header-1</th>
            <th>child-header-1</th>
            <th>child-header-1</th>
            <th>child-header-1</th>
            <th>child-header-1</th>
            <th>child-header-2</th>
            <th>child-header-2</th>
            <th>child-header-2</th>
            <th>child-header-2</th>
            <th>child-header-2</th>
            <th>child-header-2</th>
            <th>child-header-3</th>
            <th>child-header-3</th>
            <th>child-header-3</th>
            <th>child-header-3</th>
            <th>child-header-3</th>
            <th>child-header-3</th>
            <th>child-header-4</th>
            <th>child-header-4</th>
            <th>child-header-4</th>
            <th>child-header-4</th>
            <th>child-header-4</th>
            <th>child-header-4</th>
            <th>child-header-5</th>
            <th>child-header-5</th>
            <th>child-header-5</th>
            <th>child-header-5</th>
            <th>child-header-5</th>
            <th>child-header-5</th>
            <th>child-header-6</th>
            <th>child-header-6</th>
            <th>child-header-6</th>
            <th>child-header-6</th>
            <th>child-header-6</th>
            <th>child-header-6</th>
        </tr>
        </thead>
        <tbody>
            <tr>
                <td>1-data</td>
                <td>1-data</td>
                <td>1-data</td>
                <td>1-data</td>
                <td>1-data</td>
                <td>2-data</td>
                <td>2-data</td>
                <td>2-data</td>
                <td>2-data</td>
                <td>2-data</td>
                <td>2-data</td>
                <td>3-data</td>
                <td>3-data</td>
                <td>3-data</td>
                <td>3-data</td>
                <td>3-data</td>
                <td>3-data</td>
                <td>4-data</td>
                <td>4-data</td>
                <td>4-data</td>
                <td>4-data</td>
                <td>4-data</td>
                <td>4-data</td>
                <td>5-data</td>
                <td>5-data</td>
                <td>5-data</td>
                <td>5-data</td>
                <td>5-data</td>
                <td>5-data</td>
                <td>6-data</td>
                <td>6-data</td>
                <td>6-data</td>
                <td>6-data</td>
                <td>6-data</td>
                <td>6-data</td>
            </tr>
        </tbody>
    </table>
  </div>
</div>