gpt4 book ai didi

HTML css 表未对齐列

转载 作者:技术小花猫 更新时间:2023-10-29 12:10:10 25 4
gpt4 key购买 nike

我试图在 AngularJS 中创建一个带有粘性页眉和页脚的表格。我已经做到了;这是一个Plunker demo和代码:

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

但唯一的问题是:

  1. 如您所见,列宽不是动态的,在第一行中数据溢出到第二列。
  2. 列未对齐。

知道如何解决这个问题吗?

最佳答案

这道题成功的标准是:

  • 纯 CSS。
  • 动态大小的列。
  • 与列大小一致的粘性页眉和页脚。

你想要的是不可能的。

单元格之所以几乎是对的,是因为表格是semi-there,但实际上文档中有多个表格。通过覆盖 <table>元素显示类型为 flex ,您已将页面呈现在几个不同的组中。 <thead><tfoot>是他们自己的 table ,他们的<tbody>是它自己的表。它们不会彼此调整大小,而是调整到自己组中的其他表格单元格。

关于此主题的其他 CSS 指南要求固定宽度。 http://joshondesign.com/2015/05/23/csstable

在试用它之后(具体来说,尝试将 thead 和 tfoot 移动到固定位置),我决定任何为页眉/页脚提供特定规则的尝试都会破坏表格布局并且会导致调整大小不同,这就是单元格需要固定宽度的原因。即使在示例中,它们也以这种方式被破坏,但固定宽度使问题无效。

绝对最简单的解决方法是固定宽度并为它们提供 overflow-x 属性。

另一种方法是使用 JavaScript。使用 JS,一切皆有可能,你可以做任何你想做的事。具体来说,您可以使用 JS 来自动调整单元格大小。我记得曾成功使用一个 jQuery 插件实现了这一点。
https://www.datatables.net/

否则,没有。我在网上找不到任何可以满足您需要的示例。使此特定布局正常工作的任何尝试都是 hack,您最好制作一个具有 overflow-x 单元格和固定宽度的无 JS 版本,以及一个自动调整单元格大小的启用 JS 的版本。

关于HTML css 表未对齐列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36928369/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com