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

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

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

В настоящее время я использую комплект пользовательского интерфейса в 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>