HTML css表未对齐列
Ric*_*ard 17 html css html-table angularjs
我试图在AngularJS中使用粘性页眉和页脚创建一个表.我设法做到了; 这是一个Plunker演示和代码:
<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>
但唯一的问题是:
- 如您所见,列宽不是动态的,在第一行中数据溢出到第二列.
- 列未对齐.
知道如何解决这个问题吗？
这个问题成功的标准是:
- 纯CSS.
- 动态大小的列.
- 粘贴的页眉和页脚与列的大小.
你想要的是不可能的.
单元格几乎正确的原因是因为表格是半表格,但文档中实际上有多个表格.通过覆盖<table>元素显示类型flex,您可以在几个不同的组中呈现页面.该<thead>和<tfoot>是自己的表,他们<tbody>是自己的表.它们不是彼此的大小,而是与它们自己组中的其他表格单元格相对.
有关此主题的其他CSS指南需要固定宽度. http://joshondesign.com/2015/05/23/csstable
在玩弄它之后(特别是试图将thead和tfoot移动到固定位置),我已经决定任何尝试给页眉/页脚赋予特定规则都会破坏表格布局并导致大小调整以不同的方式工作,这就是为什么细胞需要固定宽度的原因.即使在示例中,它们也会以这种方式被破坏,但固定宽度会使问题无效.
您最简单的修复方法是修复宽度并为它们提供overflow-x属性.
另一种方法是使用JavaScript.有了JS,所有的赌注都关闭了,你可以做任何你想象的事情.具体来说,您可以使用JS来自动调整单元格.我记得成功使用了一个完成它的jQuery插件.
https://www.datatables.net/
否则,没有.我在网上找不到任何你需要它做的例子.任何试图使这个特定布局工作的尝试都是一个黑客,你最好制作一个带有overflow-x单元格和固定宽度的无JS版本,以及一个自动化单元格的JS版本.
- “ <thead>”，“ <tbody>”和“ <tfoot>”不是表。 (2认同)
正如您从其他答案中已经知道的那样,您应该删除white-space: nowrap;,但您还可以对滚动条执行以下操作:
table thead, table tfoot {
width: calc(100% - 17px);
}
这在我的电脑上看起来很完美,因为Windows滚动条的宽度是17px.如果您想要安全并检查滚动条宽度,请使用以下命令:
window.onload = function() {
var tr = document.getElementById("__tbody").children[0];
var scrWidth = window.innerWidth - tr.clientWidth - 3;
var width = "calc(100% - " + scrWidth + "px)";
document.getElementById("__thead").style.width = width;
document.getElementById("__tfoot").style.width = width;
}
这会计算滚动条的宽度,然后调整thead和tfoot.当然,你必须设置ID <thead id="__thead">,<tbody id="__tbody">和<tfoot id="__tfoot">.
为了使表恢复到正常的、动态调整大小的状态，需要遵循几个步骤。提到的每个步骤都会给各自的表格元素带来自由，使他们的生活变得更加简单。
首先，删除所有 flex 实例。您希望桌子像桌子一样，对吧？接下来，让你的thead、tr、 也tfoot成为他们自己。为什么让它们显示为表格？最后，您的tbody设置将显示为块。从某种意义上说，这将它与其他表友（即thead和 ）区分开来tfoot。这给所有参与者造成了一种孤独的境地。
您的最终代码将如下所示：
table {
table-layout: auto;
max-height: 300px;
}
table thead, table tfoot,
table tbody tr {
table-layout: fixed;
}
tbody td,
thead th,
tfoot td{
border-right: 1px solid transparent;
vertical-align: middle;
white-space: nowrap;
}
table thead {
width: 100%;
}
table tfoot {
width: 100%;
}
table tbody {
overflow-y: auto;
}
table tbody tr {
width: 100%;
}
这将允许您的表格单元格本身 - 根据需要动态调整大小。
- 表格主体应该可以滚动，没有“<thead>”和“<tfoot>”。此代码删除了此功能。 (2认同)
小智 2
第一个答案：将以下 css 添加到 td 元素
td{
white-space: normal;
word-wrap: break-word;
}
第二个答案：您需要为页眉和页脚创建单独的表格，并为每个 td 和 th 分配 20% 的宽度。它应该有效。