HTML表格水平滚动

Question

我试图在我的laravel刀片中修理一张桌子，因为它大到水平向右延伸。

数据显示在每个标题的右列中，但它延伸到远处，我试图找到最佳方式来对齐所有内容并包含在水平可滚动的表容器中。

我目前在laravel中使用UI工具包。

基本上，我有6个主标题。第一个有5个子标题，另外5个主标题各有6个子标题。当然，数据遵循相同的（5列，6,6,6,6,6）

无论如何，我不熟悉使用UI工具包保持此格式并使用水平滚动包含它的最佳方法。可能有更明确定义的方式使用它，或者我可能只需要原始CSS，但我希望有一种方法在UI工具包中运行良好。

表格：

<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>