带有固定页眉和页脚的HTML表格以及无固定宽度的可滚动主体 [英] HTML table with fixed header and footer and scrollable body without fixed widths

查看：91
本文介绍了带有固定页眉和页脚的HTML表格以及无固定宽度的可滚动主体的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想创建一个固定的 thead 和 tfoot 和一个可滚动的 tbody ！



我尝试了几种方法，只使用CSS和CSS + Javascript，但它们都很脆弱和不可靠，我可以轻松地 通过更改演示中的标记来破解它们。



我想要的是让表格像表格一样工作，这意味着浏览器将根据内容自动调整列（这两种情况都是在页面加载时调整窗口大小）以及在这些情况下：

$ b $如果列标题（ thead> tr> th ）的内容大于b


  1. （ tbody> tr> td< / code>）并且大于列页脚的内容（ tfoot> tr> td ），该列应根据列标题的大小调整大小。

  2. 如果列的内容身体（ TBODY> tr> td ）大于列标题（ thead> tr> th ）的内容并大于列的页脚内容 tfoot> tr> td ）该列应该根据列的主体大小调整大小


  3. 如果列的页脚（ tfoot> tr> td ）的内容大于列标题的内容（ thead> tr > th ）并且大于该列的主体内容（ tbody> tr> td ），该列应根据大小调整大小列的页脚


下面的表应该阐明情景：

 < table> 
< thead> 
< tr> 
首标1 *领先于宽度*（情况1）< / th> 
< th>标题二< / th> 
< th>标题三< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr> 
< td>第一列< / td> 
< td>第二列*领先宽度*（第二种情况）< / td> 
< td>第三栏< / td> 
< / tr> 
< / tbody> 
< tfoot> 
< tr> 
< td>页脚一< / td> 
< td>页脚2< / td> 
< td>页脚三*领先宽度*（情况3）< / td> 
< / tr> 
< / tfoot> 
< / table>

我想要一个干净（尽可能）和可靠的解决方案，可以用于不同的场景，可能是CSS而且JavaScript也行（香草和干净的JavaScript，而不是jQuery插件）。
我不在乎旧的浏览器支持（它可以让它或者至少达到一个解决方案，它可以在旧浏览器上优雅地退化，但它是可选的），我真的很高兴......我甚至可以接受使用 div s，而不是表节点，如果最终的解决方案按预期工作的话......所以在2016年，使用现代浏览器和CSS可能会有所不同？！

编辑：



主体应该垂直滚动，表格可以有任意数量的列



更新：



我想出了这个解决方案： https://codepen.io/daveoncode/pen/LNomBE
，但我仍然没有100％满意。主要问题是我无法为页眉和页脚单元格设置不同的背景。



更新2：



它现在可以工作了！

解决方案

我终于实现了一个工作解决方案！

相关的CSS如下： 

  .wrapper {
宽度：90％; 
职位：亲属; 
 border：1px solid＃000; 
背景：#efefef; 
 overflow：hidden; 
 border-radius：7px; 
} 
 
 .container {
 overflow-y：auto; 
 height：200px; 
 border-top：41px纯透明; 
 border-bottom：41px透明; 
} 
 
表{
 border-spacing：0; 
 border-collapse：collapse; 
宽度：100％; 
} 
 
 td + td {
 border-left：1px solid #fff; 
} 
 
 td，th {
 border-bottom：1px solid #fff; 
背景：#efefef; 
 padding：10px; 
} 
 
 thead tr th，
 tfoot tr td {
 height：0; 
 line-height：0; 
保证金：0; 
 padding-top：0; 
 padding-bottom：0; 
颜色：透明; 
 border：none; 
 white-space：nowrap; 
} 
 
 thead tr div div，
 tfoot tr td div {
 position：absolute; 
颜色：#fff; 
 height：20px; 
 padding：10px; 
 margin-left：-10px; 
 line-height：normal; 
宽度：100％; 
 z-index：2; 
 text-align：left; 
 font-weight：bold; 
} 
 
 thead tr div div {
 border-left：1px solid＃000; 
 border-bottom：1px solid＃000; 
} 
 
 tfoot tr td div {
 border-top：1px solid＃000; 
} 
 
 tfoot tr td div.c1，
 thead tr th div.c1 {
 background：violet; 
} 
 
 tfoot tr td div.c2，
 thead tr th div.c2 {
 background：green; 
} 
 
 tfoot tr td div.c3，
 thead tr th div.c3 {
 background：yellow; 
} 
 
 thead tr th div {
 top：0; 
} 
 
 tfoot tr td div {
 bottom：0; 
} 
 
 thead tr th：first-child div，
 tfoot tr td：first-child div {
 border-left：none; 
}

这就是标记： 

 < div class =wrapper> 
< div class =container> 
< table> 
< thead> 
< tr> 
< th> 
标题1 *领先宽度*（情况1）
< div class =c1> 
标题一*领先宽度*（情况1）
< / div> 
< / th> 
< th> 
标题二
< div class =c2> 
标题二
< / div> 
< / th> 
< th> 
标题三
< div class =c3> 
标题三
< / div> 
< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr> 
< td>第一列< / td> 
< td>第二列*领先宽度*（第二种情况）< / td> 
< td>第三列[第一个]< / td> 
< / tr> 
< tr> 
< td>第一列< / td> 
< td>第二列*领先宽度*（第二种情况）< / td> 
< td>第三栏< / td> 
< / tr> 
< tr> 
< td>第一列< / td> 
< td>第二列*领先宽度*（第二种情况）< / td> 
< td>第三栏< / td> 
< / tr> 
< tr> 
< td>第一列< / td> 
< td>第二列*领先宽度*（第二种情况）< / td> 
< td>第三栏< / td> 
< / tr> 
< tr> 
< td>第一列< / td> 
< td>第二列*领先宽度*（第二种情况）< / td> 
< td>第三栏< / td> 
< / tr> 
< tr> 
< td>第一列< / td> 
< td>第二列*领先宽度*（第二种情况）< / td> 
< td>第三栏< / td> 
< / tr> 
< tr> 
< td>第一列< / td> 
< td>第二列*领先宽度*（第二种情况）< / td> 
< td>第三栏< / td> 
< / tr> 
< tr> 
< td>第一列< / td> 
< td>第二列*领先宽度*（第二种情况）< / td> 
< td>第三栏< / td> 
< / tr> 
< tr> 
< td>第一列< / td> 
< td>第二列*领先宽度*（第二种情况）< / td> 
< td>第三栏< / td> 
< / tr> 
< tr> 
< td>第一列< / td> 
< td>第二列*领先宽度*（第二种情况）< / td> 
< td>第三栏< / td> 
< / tr> 
< tr> 
< td>第一列< / td> 
< td>第二列*领先宽度*（第二种情况）< / td> 
< td>第三栏< / td> 
< / tr> 
< tr> 
< td>第一列< / td> 
< td>第二列*领先宽度*（第二种情况）< / td> 
< td>第三栏< / td> 
< / tr> 
< tr> 
< td>第一列< / td> 
< td>第二列*领先宽度*（第二种情况）< / td> 
< td>第三栏< / td> 
< / tr> 
< tr> 
< td>第一列< / td> 
< td>第二列*领先宽度*（第二种情况）< / td> 
< td>第三栏< / td> 
< / tr> 
< tr> 
< td>第一列< / td> 
< td>第二列*领先宽度*（第二种情况）< / td> 
< td>第三栏< / td> 
< / tr> 
< tr> 
< td>第一列< / td> 
< td>第二列*领先宽度*（第二种情况）< / td> 
< td>第三栏< / td> 
< / tr> 
< tr> 
< td>第一列< / td> 
< td>第二列*领先宽度*（第二种情况）< / td> 
< td>第三栏< / td> 
< / tr> 
< tr> 
< td>第一列< / td> 
< td>第二列*领先宽度*（第二种情况）< / td> 
< td>第三栏< / td> 
< / tr> 
< tr> 
< td>第一列< / td> 
< td>第二列*领先宽度*（第二种情况）< / td> 
< td>第三栏< / td> 
< / tr> 
< tr> 
< td>第一列< / td> 
< td>第二列*领先宽度*（第二种情况）< / td> 
< td>第三栏[LATEST]< / td> 
< / tr> 
< / tbody> 
< tfoot> 
< tr> 
< td> 
页脚一
< div class =c1> 
页脚一
< / div> 
< / td> 
< td> 
页脚二
< div class =c2>页脚二< / div> 
< / td> 
< td> 
页脚三*领先宽度*（情况3）
< div class =c3>页脚三*领先宽度*（情况3）< / div> 
< / td> 
< / tr> 
< / tfoot> 
< / table> 
< / div> 
< / div>

它适用于Chrome，Firefox，Safari和IE11（我不知道它在旧版浏览器）。
在codepen上查看： https://codepen.io/daveoncode/pen/LNomBE


I want to to create a table with fixed thead and tfoot and a scrollable tbody!

I've tried several approaches, both CSS only and CSS + Javascript, but they are all weak and unreliable and I can easily break them by changing the markup in the demo.

What I want is a way to have the table to behave like a table, this means that the browser will automatically adjust columns based on the content (both at page load that in case of window resize) and that in these scenarios:

  1. if the content of the column's header (thead > tr > th) is larger than the content of the column's body (tbody > tr > td) and larger than the content of the column's footer (tfoot > tr > td) the column should resize based on the size of the column's header

  2. if the content of the column's body (tbody > tr > td) is larger than the content of the column's header (thead > tr > th) and larger than the content of the column's footer (tfoot > tr > td) the column should resize based on the size of the column's body

  3. if the content of the column's footer (tfoot > tr > td) is larger than the content of the column's header (thead > tr > th) and larger than the content of the column's body (tbody > tr > td) the column should resize based on the size of the column's footer

The table below should clarify the scenarios:

<table>
  <thead>
    <tr>
      <th>Header one *leads the width* (case 1)</th>
      <th>Header two</th>
      <th>Header three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Column one</td>
      <td>Column two *leads the width* (case 2)</td>
      <td>Column three</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer one</td>
      <td>Footer two</td>
      <td>Footer three *leads the width* (case 3)</td>
    </tr>
  </tfoot>
</table>

I want a clean (as possible) and reliable solution that will work for the different scenarios, possibly CSS only but also JavaScript is OK (vanilla and clean JavaScript, not jQuery plugins). I don't care about old browser support (it would be great to have it or at least to reach a solution which can degrade gracefully on old browser but it's optional)... I can even accept to use divs instead of table nodes if the final solution works as expected... so in 2016, with modern browser and CSS is this possible somehow?!

EDIT:

The body should scroll vertically and the table may have any number of columns

UPDATE:

I came up with this solution: https://codepen.io/daveoncode/pen/LNomBE but I'm still not 100% satisfied. The main issue is that I can't set different backgrounds for header and footer cells.

UPDATE 2:

it works now!

解决方案

I finally implemented a working solution!

The relevant CSS is the following:

.wrapper {
  width: 90%;
  position: relative;
  border: 1px solid #000;
  background: #efefef;
  overflow: hidden;
  border-radius: 7px;
}

.container {
  overflow-y: auto;
  height: 200px;
  border-top: 41px solid transparent;
  border-bottom: 41px solid transparent;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
  width: 100%;
}

td + td {
  border-left: 1px solid #fff;
}

td, th {
  border-bottom: 1px solid #fff;
  background: #efefef;
  padding: 10px;
}

thead tr th,
tfoot tr td {
  height: 0;
  line-height: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
}

thead tr th div,
tfoot tr td div {
  position: absolute;
  color: #fff;
  height: 20px;
  padding: 10px;
  margin-left: -10px;
  line-height: normal;
  width: 100%;
  z-index: 2;
  text-align: left;
  font-weight: bold;
}

thead tr th div {
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
}

tfoot tr td div {
  border-top: 1px solid #000;
}

tfoot tr td div.c1,
thead tr th div.c1 {
  background: violet;
}

tfoot tr td div.c2,
thead tr th div.c2 {
  background: green;
}

tfoot tr td div.c3,
thead tr th div.c3 {
  background: yellow;
}

thead tr th div {
  top: 0;
}

tfoot tr td div {
  bottom: 0;
}

thead tr th:first-child div,
tfoot tr td:first-child div {
  border-left: none;
}

And this is the markup:

<div class="wrapper">
  <div class="container">
    <table>
      <thead>
        <tr>
          <th>
            Header one *leads the width* (case 1)
            <div class="c1">
              Header one *leads the width* (case 1)
            </div>
          </th>
          <th>
            Header two
            <div class="c2">
              Header two
            </div>
          </th>
          <th>
            Header three
            <div class="c3">
              Header three
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three [first]</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three</td>
        </tr>
        <tr>
          <td>Column one</td>
          <td>Column two *leads the width* (case 2)</td>
          <td>Column three [LATEST]</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>
            Footer one
            <div class="c1">
              Footer one
            </div>
          </td>
          <td>
            Footer two
            <div class="c2">Footer two</div>
          </td>
          <td>
            Footer three *leads the width* (case 3)
            <div class="c3">Footer three *leads the width* (case 3)</div>
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>

It works on Chrome, Firefox, Safari and IE11 (I don't know how it behaves on older browsers). See it on codepen: https://codepen.io/daveoncode/pen/LNomBE

这篇关于带有固定页眉和页脚的HTML表格以及无固定宽度的可滚动主体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆