【发布时间】：2018-05-02 15:06:46
【问题描述】：
我正在尝试在我的 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>
【问题讨论】：
-
有使用
table-layout: fixed的理由吗？ this 之类的东西？ -
不是真的，我在大约一个小时前添加了它，看看它是否会正确约束它，但它只是将所有东西都挤在一起，这是相反的问题。当我删除它时，它只是向右延伸太远
-
好的只是想知道它是否需要。我之前评论的链接有你想要的吗？
-
哇，太完美了！我一直在固定桌子，而不是卡片内容。非常感谢！如果你给它一个答案，我会尽快接受它
-
您可以接受@jdickel 提供的答案...几乎一样