如何使用溢出滚动设置 tbody 高度

【问题标题】：How to set tbody height with overflow scroll如何使用溢出滚动设置 tbody 高度
【发布时间】：2014-07-22 06:31:09
【问题描述】：

我在设置 tbody 高度宽度溢出滚动时遇到问题。 

<style> 
     tbody{
       height:50px;display:block;overflow:scroll
     }
   </style>

       <h3>Table B</h3>
    <table style="border: 1px solid red;width:300px;display:block">
        <thead>
            <tr>
                <td>Name</td>
                <td>phone</td>
            </tr>
        </thead>
        <tbody style='height:50px;display:block;overflow:scroll'>
            <tr>
                <td>AAAA</td>
                <td>323232</td>
            </tr>
            <tr>
                <td>BBBBB</td>
                <td>323232</td>
            </tr>
            <tr>
                <td>CCCCC</td>
                <td>3435656</td>
            </tr>
        </tbody>
    </table>

Visit my fiddle here

我希望表 B 像表 A 一样带有溢出滚动。

任何帮助将不胜感激。

非常感谢， M.

【问题讨论】：

  • 无法理解。您希望表 B 像表 A 一样具有溢出滚动，但表 A 没有溢出，表 B 有。
  • Alek : 当我用溢出滚动和显示块设置 tbody 的高度时，设计就会变得混乱。
  • 对齐方式应该像表 A。明白了吗？

标签： html css


【解决方案1】：

如下更改您的第二个表格代码。

<table style="border: 1px solid red;width:300px;display:block;">
<thead>
    <tr>
        <td width=150>Name</td>
        <td width=150>phone</td>
    </tr>
</thead>
<tbody style='height:50px;overflow:auto;display:block;width:317px;'>
    <tr>
        <td width=150>AAAA</td>
        <td width=150>323232</td>
    </tr>
    <tr>
        <td>BBBBB</td>
        <td>323232</td>
    </tr>
    <tr>
        <td>CCCCC</td>
        <td>3435656</td>
    </tr>
</tbody>
</table>

JSFIDDLE DEMO

【讨论】：

  • 有没有办法在不设置body高度的情况下做到这一点？
【解决方案2】：

如果您希望tbody 显示滚动条，请设置其display: block;。

为tr 设置display: table;，使其保持表的行为。

要均匀分布单元格，请使用table-layout: fixed;。

DEMO

CSS：

table, tr td {
    border: 1px solid red
}
tbody {
    display: block;
    height: 50px;
    overflow: auto;
}
thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;/* even columns width , fix width of table too*/
}
thead {
    width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
    width: 400px;
}

如果tbody 不显示滚动，因为内容小于height 或max-height，请随时使用：overflow-y: scroll; 设置滚动。 DEMO 2

&lt;editS/updateS&gt; 2019 - 04/2021

  • 重要提示：这种使表格可滚动的方法在某些情况下存在缺陷。 （请参阅下面的 cmets。）顺便说一下，此线程中的一些重复答案值得同样的警告

警告：此解决方案断开了 thead 和 tbody 单元格网格；这意味着在大多数实际情况下，您不会有您期望的表格中的单元格对齐方式。请注意，此解决方案使用 hack 使它们保持对齐：thead { width: calc( 100% - 1em ) }

  • 无论如何，要设置滚动条，需要重置显示以摆脱表格布局（永远不会显示滚动条）。

  • 通过display:grid/contents 将&lt;table&gt; 转换为网格也会在标题和可滚动部分之间留下空隙，请注意。 （如果从 div 构建，则同上）

  • overflow:overlay; 尚未出现在 Firefox 中（继续关注）

  • position:sticky 需要一个父容器，它可以是滚动容器。如果你有几行和rowspan/colspan 标题，请确保你的thead 可以是粘性的（它不使用chrome）。

到目前为止，还没有仅通过 CSS 实现的完美解决方案。有几种平均方法可供选择，因此它适合您自己的表格（表格布局：固定；是..固定表格和列的宽度，但 javascript 可能用于重置这些值 => 退出纯 CSS）

【讨论】：

  • GCyrillus ：你是最接近的。但是有一个问题。表格宽度太高。我们可以固定表格宽度吗？
  • 对不起，我没有例子。如果我们谈论您提供的代码，它不采用上面代码中定义的宽度意味着：table { width:400px; }
  • 非常感谢@GCyrillus，它工作得很好！我可以建议一个提示吗？将overflow:auto 替换为overflow-y: scroll 以避免在正文不需要滚动条的情况下标题保持在左侧1em。
  • 终于！我现在可以有一个固定的高度、滚动的表格主体、固定的标题、可调整的列宽……所有这些都不需要 javascript！谢谢！！
  • 警告：此解决方案断开了 thead 和 tbody 单元格网格；这意味着在大多数实际情况下，您不会有您期望的表格中的单元格对齐方式。请注意，此解决方案使用 hack 使它们保持对齐：thead { width: calc( 100% - 1em ) }
【解决方案3】：

默认情况下，overflow 不适用于表组元素，除非您将 display:block 分配给 &lt;tbody&gt;，您还必须将 position:relative 和 display: block 分配给 &lt;thead&gt;。检查DEMO。

.fixed {
  width:350px;
  table-layout: fixed;
  border-collapse: collapse;
}
.fixed th {
  text-decoration: underline;
}
.fixed th,
.fixed td {
  padding: 5px;
  text-align: left;
  min-width: 200px;
}


.fixed thead {
  background-color: red;
  color: #fdfdfd;
}
.fixed thead tr {
  display: block;
  position: relative;
}
.fixed tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 100px;
  overflow-y: scroll;
    overflow-x: hidden;
}

【讨论】：

  • 有没有办法在不设置body高度的情况下做到这一点？
  • 不能完全工作。如果列名比列内容宽，它会错位。
【解决方案4】：

我猜你想要做的是保持标题固定并滚动正文内容。 您可以将内容滚动到 2 个方向：

  • 水平：除非您使用滑块（例如 jQuery 滑块），否则您将无法水平滚动内容。在这种情况下，我建议避免使用表格。
  • 垂直：您将无法使用tbody 标记来实现，因为分配display:block 或display:inline-block 会破坏表格的布局。

这是使用divs的解决方案：JSFiddle

HTML：

<div class="wrap_header">
    <div class="column">
        Name
    </div>
    <div class="column">
        Phone
    </div>
    <div class="clearfix"></div>
</div>
<div class="wrap_body">
    <div class="sliding_wrapper">
        <div class="serie">
            <div class="cell">
                AAAAAA
            </div>
            <div class="cell">
                323232
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="serie">
            <div class="cell">
                BBBBBB
            </div>
            <div class="cell">
                323232
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="serie">
            <div class="cell">
                CCCCCC
            </div>
            <div class="cell">
                3435656
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

CSS：

.wrap_header{width:204px;}
.sliding_wrapper,
.wrap_body {width:221px;}
.sliding_wrapper {overflow-y:scroll; overflow-x:none;}
.sliding_wrapper,
.wrap_body {height:45px;}
.wrap_header,
.wrap_body {overflow:hidden;}
.column {width:100px; float:left; border:1px solid red;}
.cell {width:100px; float:left; border:1px solid red;}

/**
 * @info Clearfix: clear all the floated elements
 */
.clearfix:after {
    visibility:hidden;
    display:block;
    font-size:0;
    content:" ";
    clear:both;
    height:0;
}
.clearfix {display:inline-table;}

/**
 * @hack Display the Clearfix as a block element
 * @hackfor Every browser except IE for Macintosh
 */
    /* Hides from IE-mac \*/
    * html .clearfix {height:1%;}
    .clearfix {display:block;}
    /* End hide from IE-mac */

解释：

您有一个sliding wrapper，它将包含所有数据。

注意以下几点：

.wrap_header{width:204px;}
.sliding_wrapper,
.wrap_body {width:221px;}

有 17px 的差异，因为我们需要考虑滚动条的宽度。

【讨论】：

    【解决方案5】：

    使用滚动条到表格正文的简单方法

    /* It is simple way to use scroll bar to table body*/

table tbody {
  display: block;
  max-height: 300px;
  overflow-y: scroll;
}

table thead, table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
    <table>
  <thead>
    <th>Invoice Number</th>
    <th>Purchaser</th>
    <th>Invoice Amount</th>
    <th>Invoice Date</th>
  </thead>
  <tbody>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
    <tr>
      <td>INV-1233</td>
      <td>Dinesh Vaitage</td>
      <td>$300</td>
      <td>01/12/2017</td>
    </tr>
  </tbody>
</table>

    【讨论】：

    • 远非完美，强制所有列的宽度相同
    • 有没有办法在不设置body高度的情况下做到这一点？
    • 我会处理它...但是如果我们不使用高度，那么所有记录将一次显示，不会有垂直滚动条。谢谢@shinzou
    • @stackers 您可以通过在tbody, thead 内添加width: 100px 到td, th 来设置列宽
    • 我在使用这种方法时遇到了问题。当我把 display:block 放在桌子上时，它变得一团糟。但是如果不放置 display:block 就无法获得滚动视图。有什么解决办法吗？？
    【解决方案6】：

    Webkit 似乎在内部使用display: table-row-group 作为tbody 标签。 目前有一个设置高度的错误：https://github.com/w3c/csswg-drafts/issues/476

    希望早日解决。

    【讨论】：

      【解决方案7】：

      在我的情况下，我希望拥有响应式表格高度，而不是其他答案所显示的以像素为单位的固定高度。为此，我使用了可见高度属性的百分比并在包含表格的 div 上溢出：

      &__table-container {
  height: 70vh;
  overflow: scroll;
}

      这样表格将随着窗口大小的调整而扩展。

      【讨论】：

        【解决方案8】：

        HTML：

        <table id="uniquetable">
    <thead>
      <tr>
        <th> {{ field[0].key }} </th>
        <th> {{ field[1].key }} </th>
        <th> {{ field[2].key }} </th>
        <th> {{ field[3].key }} </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="obj in objects" v-bind:key="obj.id">
        <td> {{ obj.id }} </td>
        <td> {{ obj.name }} </td>
        <td> {{ obj.age }} </td>
        <td> {{ obj.gender }} </td>
      </tr>
    </tbody>
</table>

        CSS：

        #uniquetable thead{
    display:block;
    width: 100%;
}
#uniquetable tbody{
    display:block;
    width: 100%;
    height: 100px;
    overflow-y:overlay;
    overflow-x:hidden;
}
#uniquetable tbody tr,#uniquetable thead tr{
    width: 100%;
    display:table;
}
#uniquetable tbody tr td, #uniquetable thead tr th{
   display:table-cell;
   width:20% !important;
   overflow:hidden;
}

        这也可以：

        #uniquetable tbody {
    width:inherit !important;
    display:block;
    max-height: 400px;
    overflow-y:overlay;
  }
  #uniquetable thead {
    width:inherit !important;
    display:block;
  }
  #uniquetable tbody tr, #uniquetable thead tr {
    display:inline-flex;
    width:100%;
  }
  #uniquetable tbody tr td,  #uniquetable thead tr th {
    display:block;
    width:20%;
    border-top:none;
    text-overflow: ellipsis;
    overflow: hidden;
    max-height:400px;
  }

        【讨论】：

          【解决方案9】：

          最简单的解决方案：

          在 CSS 中添加以下代码：

          .tableClassName tbody {
  display: block;
  max-height: 200px;
  overflow-y: scroll;
}

.tableClassName thead, .tableClassName tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.tableClassName thead {
  width: calc( 100% - 1.1em );
}

          1.1 em是滚动条的平均宽度，如有需要请修改。

          【讨论】：

          • 第二条规则的语法不正确，因为它最终选择了页面上的所有 tbody tr 元素。改为：.tableClassName thead, .tableClassName tbody tr {...}
          【解决方案10】：

          另一种方法是将表格包装在可滚动元素中，并将标题单元格设置为固定在顶部。

          这种方法的优点是您不必更改 tbody 上的显示，您可以将其留给浏览器计算列宽，同时保持标题单元格的宽度与数据单元格的列宽一致。

          /* Set a fixed scrollable wrapper */
.tableWrap {
  height: 200px;
  border: 2px solid black;
  overflow: auto;
}
/* Set header to stick to the top of the container. */
thead tr th {
  position: sticky;
  top: 0;
}

/* If we use border,
we must use table-collapse to avoid
a slight movement of the header row */
table {
 border-collapse: collapse;
}

/* Because we must set sticky on th,
 we have to apply background styles here
 rather than on thead */
th {
  padding: 16px;
  padding-left: 15px;
  border-left: 1px dotted rgba(200, 209, 224, 0.6);
  border-bottom: 1px solid #e8e8e8;
  background: #ffc491;
  text-align: left;
  /* With border-collapse, we must use box-shadow or psuedo elements
  for the header borders */
  box-shadow: 0px 0px 0 2px #e8e8e8;
}

/* Basic Demo styling */
table {
  width: 100%;
  font-family: sans-serif;
}
table td {
  padding: 16px;
}
tbody tr {
  border-bottom: 2px solid #e8e8e8;
}
thead {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}
tbody tr:hover {
  background: #e6f7ff;
}
          <div class="tableWrap">
  <table>
    <thead>
      <tr>
        <th><span>Month</span></th>
        <th>
          <span>Event</span>
        </th>
        <th><span>Action</span></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>January</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>February. An extra long string.</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>March</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>April</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>May</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>June</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>July</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>August</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>September</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>October</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>November</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
      <tr>
        <td>December</td>
        <td>AAA</td>
        <td><span>Invite | Delete</span></td>
      </tr>
    </tbody>
  </table>
</div>

          【讨论】：

          • 好主意！它不会像其他选项那样弄乱表格布局。
          • 提醒其他人，您需要确保没有祖先元素正在使用溢出。可能导致位置：粘不工作stackoverflow.com/questions/43707076/…
          • 这个解决方案的另一个很酷的方面是它可以与height: 100%一起使用
          • IE 不支持位置：粘性
          • FWIW，您还可以添加一个底部位置为 0 的 tfoot，它就像一个魅力。很好的答案！
          【解决方案11】：

          基于this answer，如果您已经在使用 Bootstrap，这里有一个最小的解决方案：

          div.scrollable-table-wrapper {
  height: 500px;
  overflow: auto;

  thead tr th {
    position: sticky;
    top: 0;
  }
}

          <div class="scrollable-table-wrapper">
  <table class="table">
    <thead>...</thead>
    <tbody>...</tbody>
  </table>
</div>

          在 Bootstrap v3 上测试

          【讨论】：

          • 在 IE 中没用。在其他浏览器中，行内容在滚动时会渗入标题文本，因此您还需要在 上设置背景颜色以覆盖它们。如果您的用户都没有使用 IE，这是一个可行的解决方案。
          【解决方案12】：

          制作滚动表格始终是一项挑战。这是一个解决方案，其中表格在 tbody 上以固定高度水平和垂直滚动，使 theader 和 tbody “粘”（不显示：粘）。我添加了一个“大”表只是为了显示。 我从 G-Cyrillus 获得灵感来制作 tbody display:block; 但是当涉及到单元格的宽度（在标题和正文中）时，它取决于内部内容。因此，我在每个单元格中添加了具有特定宽度的内容，包括在 thead 和 tbody 中的最小第一行（其他行相应地适应）

          .go-wrapper {
    overflow-x: auto;
    width: 100%;
}
.go-wrapper table {
    width: auto;
}
.go-wrapper table tbody {
    display: block;
    height: 220px;
    overflow: auto;
}
.go-wrapper table thead {
    display: table;
}
.go-wrapper table tfoot {
    display: table;
}
.go-wrapper table thead tr, 
.go-wrapper table tbody tr,
.go-wrapper table tfoot tr {
    display: table-row;
}

.go-wrapper table th,
.go-wrapper table td { 
    white-space: nowrap; 
}

.go-wrapper .aw-50  { min-height: 1px; width: 50px; }
.go-wrapper .aw-100 { min-height: 1px; width: 100px; }
.go-wrapper .aw-200 { min-height: 1px; width: 200px; }
.go-wrapper .aw-400 { min-height: 1px; width: 400px; }

/***** Colors *****/
.go-wrapper table {
    border: 2px solid red
}
.go-wrapper table thead, 
.go-wrapper table tbody, 
.go-wrapper table tfoot {
    outline: 1px solid green
}
.go-wrapper td {
    outline: 1px solid blue
}
          <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Template</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <div class="container">
        <div class="row mt-5 justify-content-md-center">
            <div class="col-8">
                <div class="go-wrapper">
                    <table class="table">
                        <thead>
                            <tr>
                                <th><div class="aw-50" ><div class="checker"><span><input type="checkbox" class="styled"></span></div></div></th>
                                <th><div class="aw-200">Name</div></th>
                                <th><div class="aw-50" >Week</div></th>
                                <th><div class="aw-100">Date</div></th>
                                <th><div class="aw-100">Time</div></th>
                                <th><div class="aw-200">Project</div></th>
                                <th><div class="aw-400">Text</div></th>
                                <th><div class="aw-200">Activity</div></th>
                                <th><div class="aw-50" >Hours</th>
                                <th><div class="aw-50" >Pause</div></th>
                                <th><div class="aw-100">Status</div></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><div class="aw-50"><div class="checker"><span><input type="checkbox" class="styled"></span></div></div></td>
                                <td><div class="aw-200">AAAAA</div></td>
                                <td><div class="aw-50" >15</div></td>
                                <td><div class="aw-100">07.04.2020</div></td>
                                <td><div class="aw-100">10:00</div></td>
                                <td><div class="aw-200">Project 1</div></td>
                                <td><div class="aw-400">Blah blah blah</div></td>
                                <td><div class="aw-200">Activity</div></td>
                                <td><div class="aw-50" >2t</div></td>
                                <td><div class="aw-50" >30min</div></td>
                                <td><div class="aw-100">Waiting</div></td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>BBBBB</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>CCCCC</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah Blah blah blah</td>
                                <td>Activity Activity Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>DDDDD</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>EEEEE</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>FFFFF</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity Activity Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>GGGGG</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>HHHHH</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>IIIII</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>JJJJJ</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>KKKKK</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>LLLLL</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>MMMMM</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>NNNNN</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>OOOOO</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>PPPPP</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>QQQQQ</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>RRRRR</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>SSSSS</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>TTTTT</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>UUUUU</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>VVVVV</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>XXXXX</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>YYYYY</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>ZZZZZ</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>ÆÆÆÆÆ</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>ØØØØØ</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                            <tr>
                                <td><div class="checker"><span><input type="checkbox" class="styled"></span></div></td>
                                <td>ÅÅÅÅÅ</td>
                                <td>15</td>
                                <td>07.04.2020</td>
                                <td>10:00</td>
                                <td>Project 1</td>
                                <td>Blah blah blah</td>
                                <td>Activity</td>
                                <td>2t</td>
                                <td>30min</td>
                                <td>Waiting</td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <th><div class="aw-50" ><div class="checker"><span><input type="checkbox" class="styled"></span></div></div></th>
                                <th><div class="aw-200">Name</div></th>
                                <th><div class="aw-50" >Week</div></th>
                                <th><div class="aw-100">Date</div></th>
                                <th><div class="aw-100">Time</div></th>
                                <th><div class="aw-200">Project</div></th>
                                <th><div class="aw-400">Text</div></th>
                                <th><div class="aw-200">Activity</div></th>
                                <th><div class="aw-50" >Hours</th>
                                <th><div class="aw-50" >Pause</div></th>
                                <th><div class="aw-100">Status</div></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
   
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

</html>

          【讨论】：

            【解决方案13】：

            这是一个很好的表格滚动 x 和 y 方式的示例。 水平和垂直滚动是响应式表格的最佳选择。

            table, th, tr, td {
  border: 1px solid lightgrey;
  border-collapse: collapse;
  
}
tbody {
  max-height: 200px;
max-width: 200px;
  overflow: auto;
  display: block;
  table-layout: fixed;
}

tr {
  display: table;
}
            <table>
  <thead>
      <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </tr>
  </thead>
  <tbody>
      <tr>
    <th>
     <input type="checkbox"> 
  </th>
    <td>2</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
  </tr>
    <tr>
    <th>
     <input type="checkbox"> 
  </th>
    <td>2</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
  </tr>
    <tr>
    <th>
     <input type="checkbox"> 
  </th>
    <td>2</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
  </tr>
    <tr>
    <th>
     <input type="checkbox"> 
  </th>
    <td>2</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
  </tr>
    <tr>
    <th>
     <input type="checkbox"> 
  </th>
    <td>2</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
  </tr>
    <tr>
    <th>
     <input type="checkbox"> 
  </th>
    <td>2</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
  </tr>
    <tr>
    <th>
     <input type="checkbox"> 
  </th>
    <td>2</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
  </tr>
    <tr>
    <th>
     <input type="checkbox"> 
  </th>
    <td>2</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
  </tr>
    <tr>
    <th>
     <input type="checkbox"> 
  </th>
    <td>2</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
  </tr>
    <tr>
    <th>
     <input type="checkbox"> 
  </th>
    <td>2</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
  </tr>
    <tr>
    <th>
     <input type="checkbox"> 
  </th>
    <td>2</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
  </tr>
    <tr>
    <th>
     <input type="checkbox"> 
  </th>
    <td>2</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>

    <td>3</td>
  </tr>
    <tr>
    <th>
     <input type="checkbox"> 
  </th>
    <td>2</td>
    <td>3</td>
  </tr>
    <tr>
    <th>
     <input type="checkbox"> 
  </th>
    <td>2</td>
    <td>3</td>
  </tr>
    <tr>
    <th>
     <input type="checkbox"> 
  </th>
    <td>2</td>
    <td>3</td>
  </tr>
  </tbody>
</table>

            【讨论】：

            • 行列宽度不再匹配标题列宽度。
            猜你喜欢
            • 2019-04-17
            • 2012-12-13
            • 1970-01-01
            • 2012-10-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2019-07-18
            • 2011-06-22
            相关资源
            最近更新 更多
            热门标签
            Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode