HTML CSS表格未对齐的列 [英] HTML css Table misaligned Columns
问题描述
我试图在AngularJS中创建带有粘性页眉和页脚的表格.我已经做到了；这是一个 柱塞演示 和代码:
I tried to create a table in AngularJS with sticky header and footer. I've managed to do that; here's a Plunker demo and code:
<body ng-controller="MainCtrl as ctrl">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>
Column1
</th>
<th>
Column2
</th>
<th>
Column3
</th>
<th>
Column4
</th>
<th>
Column5
</th>
</tr>
</thead>
<tbody>
<tr class="info" ng-repeat="item in items">
<td>
{{item.name}}
</td>
<td>
{{item.type}}
</td>
<td>
{{item.value}}
</td>
<td>
{{item.code}}
</td>
<td>
{{item.id}}
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>
Column1
</th>
<th>
Column2
</th>
<th>
Column3
</th>
<th>
Column4
</th>
<th>
Column5
</th>
</tr>
</tfoot>
</table>
</body>
但是唯一的问题是:
- 列宽不是动态的，正如您所看到的，第一行中的数据溢出到第二列中.
- 列未对齐.
有什么办法解决这个问题吗?
Any idea how to fix this?
推荐答案
此问题成功的标准是:
- 纯CSS.
- 动态大小的列.
- 与列大小相同的粘性页眉和页脚.
想要什么是不可能的.
单元格几乎是 的原因是因为表是半存在的，但是文档中实际上有多个表.通过将<table>元素的显示类型重写为flex，您已将页面分为几个不同的组. <thead>和<tfoot>是它们自己的表，而它们的<tbody>是其自己的表.它们彼此之间的大小并不相同，而是与其所属组中的其他表单元格大小相同.
The reason why the cells are almost right is because the table is semi-there, but there are actually multiple tables in the document. By overriding the <table> elements display type to flex, you've rendered the page in several different groups. The <thead> and <tfoot> are their own table, and their <tbody> is its own table. They do not size to one another, rather to other table cells in their own group.
有关此主题的其他CSS指南要求固定宽度. http://joshondesign.com/2015/05/23/csstable
Other CSS guides about this topic require a fixed width. http://joshondesign.com/2015/05/23/csstable
玩了一下之后(特别是尝试将thead和tfoot移到固定位置)，我决定对页眉/页脚赋予特定规则的任何尝试都会破坏表格布局并导致尺寸调整工作不同，这就是为什么单元格上需要固定宽度的原因.即使在示例中，它们都是以这种方式破坏的，但是固定宽度消除了问题.
After playing around with it (specifically, trying to move the thead and tfoot to fixed positions), I've decided that any attempt to give specific rules to the header/footer breaks the table layout and will cause the sizing to work differently, which is why fixed width is required on the cells. Even in the examples, they are broken in this way, but the fixed width nullifies the problem.
您绝对的最简单修复方法是修复宽度并为它们提供溢出x属性.
Your absolute easiest fix is to fix the widths and give them overflow-x properties.
替代方法是使用JavaScript.使用JS，所有的赌注都消失了，您可以做任何您想像的事情.具体来说，您可以使用JS自动调整单元格的大小.我记得成功完成此任务的jQuery插件.
https://www.datatables.net/
The alternative is to use JavaScript. With JS, all bets are off, and you can do anything you imagine. Specifically, you could use JS to autosize cells. I remember having success with a jQuery plugin that accomplished that.
https://www.datatables.net/
否则，不可以.我找不到任何可以满足您需求的在线示例.要使这种特定的布局正常工作，任何尝试都是骇客，最好是制作一个具有溢出x单元格和固定宽度的无JS版本，以及一个使单元格自动调整大小的启用JS的版本.
Otherwise, no. I cannot find any example online that does what you need it to do. Any attempts to get this specific layout working is a hack and you're better off making a no-JS version with overflow-x cells and fixed widths, and a JS-enabled version that autosizes cells.
这篇关于HTML CSS表格未对齐的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
