固定和可滚动

时间：2017-12-09 00:21:01

标签： html css html-table scrollbar fixed-header-tables

我通过互联网查看了这里的问题和文章，但还没有找到满足我要求的解决方案。所以现在在2017年，有一种优雅的方式来获得<table>：

  1. 用html + css（no js）编写
  2. 有固定标题（不可滚动;不粘）
  3. 具有可滚动的<tbody>（滚动条可能始终可见）
  4. 标题和正文会正确处理调整大小而不会导致<thead>列和<tbody>列
    5. 的混乱对齐
  5. 不会使用嵌套表格或单独的表格作为标题

5 个答案:

答案 0 :(得分：13)

此解决方案满足所有5项要求：

table {
  width: 100%;
}

table, td {
  border-collapse: collapse;
  border: 1px solid #000;
}

thead {
  display: table; /* to take the same width as tr */
  width: calc(100% - 17px); /* - 17px because of the scrollbar width */
}

tbody {
  display: block; /* to enable vertical scrolling */
  max-height: 200px; /* e.g. */
  overflow-y: scroll; /* keeps the scrollbar even if it doesn't need it; display purpose */
}

th, td {
  width: 33.33%; /* to enable "word-break: break-all" */
  padding: 5px;
  word-break: break-all; /* 4. */
}

tr {
  display: table; /* display purpose; th's border */
  width: 100%;
  box-sizing: border-box; /* because of the border (Chrome needs this line, but not FF) */
}

td {
  text-align: center;
  border-bottom: none;
  border-left: none;
}
<table> 
  <thead> 
    <tr>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>Data1111111111111111111111111</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data2222222222222222222222222</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data3333333333333333333333333</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tbody>
</table>

答案 1 :(得分：7)

Chrome，FF，Edge
最简单的解决方案是使用th { position: sticky; top: 0; } 

/* JUST COMMON TABLE STYLES... */
table { border-collapse: collapse; width: 100%; }
th, td { background: #fff; padding: 8px 16px; }


.tableFixHead {
  overflow: auto;
  height: 100px;
}

.tableFixHead thead th {
  position: sticky;
  top: 0;
}
<div class="tableFixHead">
  <table>
    <thead>
      <tr><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
      <tr><td>D1</td><td>D2</td></tr>
      <tr><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>

IE11

要草率地支持IE11（截至2018年10月，2.5% market share），虽然有点杂乱无章，但至少有TH个位于顶部-您可以添加以下JavaScript：

function isIE() {
  return navigator.userAgent.indexOf('MSIE') > -1 || navigator.appVersion.indexOf('Trident/') > -1
}


if (isIE()) {

  // Fix table head
  function tableFixHead(ths) {
    var sT = this.scrollTop;
    [].forEach.call(ths, function(th) {
      th.style.transform = "translateY(" + sT + "px)";
    });
  }

  [].forEach.call(document.querySelectorAll(".tableFixHead"), function(el) {
    var ths = el.querySelectorAll("thead th");
    el.addEventListener("scroll", tableFixHead.bind(el, ths));
  });

}

（由于IE忽略sticky位置）将使用transform translateY定位TH元素。

PS： 上面的JS（无包装if语句）对于所有其他常绿浏览器也相当不错-以防position: sticky;不符合您的需求...

答案 2 :(得分：1)

np.random.choice
.table-sticky>thead>tr>th,
.table-sticky>thead>tr>td {
	background: #009688;
	color: #fff;
	top: 0px;
	position: sticky;
}
.table-height {
	height: 320px;
	display: block;
	overflow: scroll;
	width: 100%;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

.table-bordered>thead>tr>th,
.table-bordered>tbody>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>tbody>tr>td {
	border: 1px solid #ddd;
}

答案 3 :(得分：0)

这个怎么样？

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
table {
    max-width:980px;
    table-layout:fixed;
    margin:auto;
}
th, td {
    padding:5px 10px;
    border:1px solid #000;
}
thead, tfoot {
    background:#f9f9f9;
    display:table;
    width:100%;
    width:calc(100% - 18px);
}
tbody {
    height:300px;
    overflow:auto;
    overflow-x:hidden;
    display:block;
    width:100%;
}
tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}
</style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th scope="col">Header 1                    </th>
                <th scope="col">Header 2                    </th>
                <th scope="col">Header 3                    </th>
                <th scope="col">Header 4                    </th>
            </tr>
        </thead>
    <tbody>
    <tr>
        <td>Cell content with content to wrap as required Cell content with content to wrap as required Cell content with content to wrap as required Cell content with content to wrap as required Cell content with content to wrap as required Cell content with content to wrap as required            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
    </tr>
    <tr>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
    </tr>
    <tr>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
    </tr>
    <tr>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
    </tr>
    <tr>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
    </tr>
    <tr>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
    </tr>
    <tr>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
    </tr>
    <tr>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
    </tr>
    <tr>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
    </tr>
    <tr>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
        <td>Cell content            </td>
    </tr>
    <tr>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
    </tr>
    <tr>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
    </tr>
    <tr>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
    </tr>
    <tr>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
    </tr>
    <tr>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
    </tr>
    <tr>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
    </tr>
    <tr>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
    </tr>
    <tr>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
        <td>Cell content        </td>
    </tr>
    </tbody>
    <tfoot>
        <tr>
        <td>Footer 1        </td>
        <td>Footer 2        </td>
        <td>Footer 3        </td>
        <td>Footer 4        </td>
        </tr>
    </tfoot>
    </table>
</body>
</html>

我在下面创造了一个小提琴

https://jsfiddle.net/jchaplin2/dt829611/1/

答案 4 :(得分：-1)

简答：不，不可能。

VXp的答案很有意思，但并不像你期望的那样有效。它有两个问题：

  1. 表格宽度必须设置为特定的固定宽度，此解决方案不能具有动态宽度。这就是他将宽度设置为表格的600px的原因。
  2. 如果任何单元格具有长文本，则整个布局将中断（不正确对齐的列）。

    3. Jon的答案也是如此。

    我不鼓励使用固定的表头，但是如果您 真的 想要使用您枚举的一组规则（您提到的5条规则）执行此操作，那么唯一的解决方案正在使用js / jQuery。

相关问题
最新问题