如何在HTML5 / css3中水平放置水平行的“表格”中？
罗兰多
我有使用html表，tr，td标签的下表。 
一切都很好，但是我使用的是角形，问题是如果我有更多的行，则没有垂直的空间。相反，我想在其右侧“溢出”，使其看起来像：
使用HTML5 / CSS的最佳方法是什么，这样我可以使内容超出表的范围而溢出？请注意，在某些情况下，我可能会有2或3个条目，所以我希望不必在一开始就使宽度变成正常尺寸的两倍，而是根据我拥有的条目数来调整表的大小。在桌子上。没有滚动条。
我觉得HTML中的表格标签是有限制的，可能不允许我这样做。做这个的最好方式是什么？使用div？
<table style="background:green;">
<tr><td>Name</td><td>Sport</td><td>Score</td></tr>
<tr><td>Jordan</td><td>Soccer</td><td>50</td></tr>
<tr><td>Jordan</td><td>Soccer</td><td>50</td></tr>
<tr><td>Jordan</td><td>Soccer</td><td>50</td></tr>
</table>
尝试使用flexbox方法，但似乎如果将flexbox放在div中，则一旦条目超出第一列，背景似乎无法正确填充：
Abhitalks
一切都很好，但是我使用的是角形，问题是如果我有更多的行，则没有垂直的空间。
角度与这有什么关系？
[..]如果我有更多行，则没有垂直的空间。相反，我想“溢出”到它的右边
表格尤其不会为您提供这种灵活性，您将无法将行的高度和流控制为列。
[..]以便可以使内容超出表内容时溢出？请注意，在某些情况下，我可能会有2或3个条目，所以我希望不必在一开始就使宽度变成正常尺寸的两倍，而是根据我拥有的条目数来调整表的大小。在桌子上。
一种简单快捷的方法是将行拆分为自己的表。如果您可以拥有该结构，则只需使用CSS即可columns。
通常，您将所有这些表都包装在div具有其height约束的内。column-*在包装上设置属性，div然后就可以了。你可以玩的column-gap，column-rule，column-span，和column-fill属性来美化整个啄。
还要注意，您将需要break-inside: avoid在表格上使用以避免它们在流向下一列时中途中断。
示例片段：
#rowflow {
height: 120px; max-height: 120px;
border: 1px solid #d33; overflow: hidden;
column-width: 200px; column-gap-width: 0px; column-fill: auto;
column-rule: 1px solid #bbb;
}
table {
font-family: sans-serif; margin-bottom: 2px;
table-layout: fixed; width: 190px;
}
table:first-child { column-span: all; }
table, th, td { border-collapse: collapse; border: 0px solid gray; padding: 6px; }
table, tr { break-inside: avoid; }
th, td { text-align: left; }
th:last-child, td:last-child { text-align: right; }<div id="rowflow">
<table><tr><th>Name</th><th>Sport</th><th>Score</th></tr></table>
<table><tr><td>Jordan</td><td>Soccer</td><td>50</td></tr></table>
<table><tr><td>Jordan</td><td>Soccer</td><td>50</td></tr></table>
<table><tr><td>Jordan</td><td>Soccer</td><td>50</td></tr></table>
<table><tr><td>Jordan</td><td>Soccer</td><td>50</td></tr></table>
<table><tr><td>Jordan</td><td>Soccer</td><td>50</td></tr></table>
</div>在上面的代码段中，包装div是受高度限制的，您可以看到列在流动。
使用此小提琴尝试更改窗口大小并查看效果。
[..]因此，我希望不必在一开始就使宽度变成普通尺寸的两倍，而是根据我在表中的条目数来调整表的大小。没有滚动条。
包装div将自行全角。但是，您可以旋转overflow以控制如何处理溢出。根据内容的宽度动态更改宽度完全是一个完全不同的局面，您需要使用JavaScript，而且会变得混乱。
注意：为了使上面的示例起作用，您将需要固定表格的宽度，以使列整齐地对齐。您可能会使用table-layout: fixed固定的布局。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
Linux的官方Adobe Flash存储库是否已过时？
- 2
用日期数据透视表和日期顺序查询
- 3
应用发明者仅从列表中选择一个随机项一次
- 4
Java Eclipse中的错误13，如何解决？
- 5
在Windows 7中无法删除文件（2）
- 6
在 Python 2.7 中。如何从文件中读取特定文本并分配给变量
- 7
套接字无法检测到断开连接
- 8
带有错误“ where”条件的查询如何返回结果？
- 9
有什么解决方案可以将android设备用作Cast Receiver？
- 10
Mac OS X更新后的GRUB 2问题
- 11
ggplot：对齐多个分面图-所有大小不同的分面
- 12
验证REST API参数
- 13
如何从视图一次更新多行（ASP.NET - Core）
- 14
尝试反复更改屏幕上按钮的位置 - kotlin android studio
- 15
计算数据帧中每行的NA
- 16
检索角度选择div的当前值
- 17
离子动态工具栏背景色
- 18
UITableView的项目向下滚动后更改颜色，然后快速备份
- 19
VB.net将2条特定行导出到DataGridView
- 20
蓝屏死机没有修复解决方案
- 21
通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException
我来说两句