Question

我尝试使用粘性页眉和页脚在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>

但唯一的问题是：

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

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

Answer 1

这个问题成功的标准是：

纯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版本。

Answer 2

正如您从其他答案中已经知道的那样，您应该删除white-space: nowrap;，但您还可以对 滚动条 执行以下操作：

table thead, table tfoot {
    width: calc(100% - 17px);
}

<强> Updated Plunker

这在我的电脑上看起来很完美，因为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">。

Answer 3

为了将表格恢复为正常的，动态调整大小的自我，需要遵循几个步骤。提到的每一步都会让自由回到各自的桌面元素，使他们的生活更加简单。

首先，删除所有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%;
}

这将允许您的表格单元格自己 - 根据需要动态调整大小。

Answer 4

删除

white-space: nowrap;

并添加

word-wrap: break-word;

tfoot td{
        border-right: 1px solid transparent;
        vertical-align: middle;
        word-wrap: break-word;
    }

Answer 5

第一个回答：将以下css添加到td元素

  td{
      white-space: normal;
      word-wrap: break-word;

      }

第二个回答：您需要为页眉和页脚创建单独的表格，并为每个td和th分配20％的宽度。它应该工作。

Answer 6

第一个问题的答案：

td {
    text-overflow: ellipsis !important;
    overflow: hidden !important;
}

text-overflow: ellipsis非常有用，因为用户可以复制整个值。

回答第二个问题：

看一下这个问题的答案：用HTML和CSS表滚动

您似乎需要javascript或内部表解决方案。

更新第二个回答：

在桌面和tbody上使用以下样式（使用Chrome）：

table { 
    overflow-y: visible !important;
}
tbody {
    overflow-y: overlay !important;
}

Plunker Demo

Answer 7

您的错位将因以下原因而出现

溢出文字
tbody中滚动条的宽度

<强>溶液

将 overflow-x：auto 提供给'td'以及一些 max-width / width
使您的最后与滚动条宽度相比更大。
为了更好地查看滚动条，为滚动条添加自定义css

将以下css添加到您的网页，然后享受plunkerLink

th,td {
      width: 20%!important;
      overflow-x: auto;
      padding: 10px;
    }

    th:last-of-type {
      width: calc(20% + 6px)!important;
    }

    ::-webkit-scrollbar {
      width: 3px!important;
      height: 6px!important;
    }

    ::-webkit-scrollbar-button {
      width: 0;
      height: 0;
    }

    ::-webkit-scrollbar-thumb {
      border: 2px solid #ccc;
      background: #ccc;
      border-radius: 8px;
    }

    ::-webkit-scrollbar-track-piece {
      width: 3px!important;
      border: 1px solid #fff;
    }

Answer 8

这是你的答案： https://plnkr.co/edit/cyN0qDuxIs8LjkxIhur5?p=preview

tbody td,
thead th,
tfoot td{
    word-wrap:break-word;
    table-layout:fixed;
    white-space:normal;
}

Answer 9

使用bootstrap类进行样式设置。您的自定义样式（style.css）正在创建问题。此外，<table>标记默认提供列的动态宽度。摘录自How to create a dynamic width column in Twitter Bootstrap回答：

<table class="table">
<tr><th>Id</th>     <th>Name</th>      <th>Email address</th></tr>
<tr><td>100001</td> <td>Joe</td>       <td>MamiePVillalobos@teleworm.us</td></tr>
<tr><td>100</td>    <td>Christine</td> <td>ChristineJWilliams@dayrep.com</td></tr>
<tr><td>1001</td>   <td>John</td>      <td>JohnLMiley@dayrep.com</td></tr>

这将为您提供所需的输出

Answer 10

https://plnkr.co/edit/3hYms9hRqzF2DV9yTBCG?p=preview

在你的css中添加了这个：

tr.info td {word-wrap: break-word; white-space: normal;}

Answer 11

我只是在Plunker demo中修改了你的style.css，如下所示

/* Put your css in here */

table {
    table-layout: auto;
    display: flex;
    flex-flow: column;
    max-height: 300px;
}

table thead, table tfoot,
table tbody tr {
    display: table;
    table-layout: fixed;
}

tbody td,
thead th,
tfoot td{
    border-right: 1px solid transparent;
    vertical-align: middle;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
    text-wrap: normal;
}

table thead {
    /*flex: 0 0 auto;*/
    width: 100%;
}
table tfoot {
    /*flex: 0 0 auto;*/
    width: 100%;
}
table tbody {
    flex: 1 1 auto;
    display: block;
    overflow-y: auto;
}

table tbody tr {
    width: 100%;
}

Answer 12

thead { display: table-header-group }
tfoot { display: table-row-group }
tr { page-break-inside: avoid }

这工作正常。请尝试

HTML css表未对齐列

12 个答案: