如何粘贴表格标题和表格的第一列答案

【问题标题】：How to sticky table header and first column of table如何粘贴表格标题和表格的第一列
【发布时间】：2018-03-11 19:40:41
【问题描述】：

我正在尝试将标题列固定在顶部，并且我希望第一列（在标题之后）也被固定，所以应该发生这种情况

这是我到目前为止所拥有的，我似乎无法让其余的工作。我尝试了很多方法。我正在为移动视图设计它以将静态顶部标题与表格中的内容对齐，我对 CSS 比较陌生。

JSFiddle

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="root">
      <div>
        <table border="1">
          <thead>
            <th>head1</th>
            <th>head2</th>
            <th>head3</th>
            <th>head4</th>
            <th>head6</th>
            <th>head7</th>
            <th>head8</th>
            <th>head9</th>
            <th>head10</th>
            <th>head11</th>
            <th>head12</th>
            <th>head13</th>
          </thead>
          <tbody>
            <tr>
                <td>row 1, cell 1</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 1</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 1</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
            </tr>
            <tr>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
            </tr>
            <tr>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
            </tr>
            <tr>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
            </tr>
            <tr>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>
</html>

CSS

table tbody, table thead {
  display: block;
}
table thead {
  width: 600px;
}
table tbody {
  overflow: auto;
  height: 100px;
  width: 600px;
}

编辑：更正为列中的行。脑袋放屁！

编辑 2：图片澄清

【问题讨论】：

那么，第一行应该是静态的吗？

标签： html css html-table

【解决方案1】：

好的，我更新了一点：

它并不完美，但它是你想要的。

我做了什么？

我制作了 2 个tbodys 并将它们放在单独的表格中，然后将表格移动到主header 下方的正确位置，就是这样。

希望我能帮上忙。

片段：

table tbody, table thead {
  display: block;
}
table thead {
  width: 600px;
}
table tbody {
  overflow: auto;
  height: 100px;
  width: 600px;
}

#tb1 {
  width:50px;
  height:130px;
  margin-Left: 10px;
}
#tb2 {
  right:100px;
  width:570px;
  height:105px;
}

.one {
    float: left;

}

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="root">
      <div>
        <table border="1">
          <thead>
            <th>head1</th>
            <th>head2</th>
            <th>head3</th>
            <th>head4</th>
            <th>head6</th>
            <th>head7</th>
            <th>head8</th>
            <th>head9</th>
            <th>head10</th>
            <th>head11</th>
            <th>head12</th>
            <th>head13</th>
          </thead>
          </table>
          <table>
          
      
          <div class="one"> 
          <tbody id="tb1">
            <tr>
                <td>cell</td>
            </tr>
            <tr>
                <td>cell</td>          
            </tr>
            <tr>
                <td>cell</td>           
            </tr>
            <tr>
                <td>cell</td>
            </tr>
            <tr>
                <td>cell</td>
            </tr>
          </tbody>
          </div>
         </table>
         
         <table style="float:left; margin-Top:-135px; margin-Left:50px;">       
          <div class="two">
           <tbody id="tb2">
            <tr>
                <td>row 1, cell 1</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 1</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 1</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
            </tr>
            <tr>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
            </tr>
            <tr>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
            </tr>
            <tr>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
            </tr>
            <tr>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 2, cell 1</td>
                <td>row 2, cell 2</td>
                <td>row 1, cell 2</td>
                <td>row 1, cell 2</td>
            </tr>
          </tbody>
          </div>
          </table>
         
         
         
         
         
      </div>
    </div>
  </body>
</html>

【讨论】：

很抱歉，我说的是第一排！我现在会编辑它
这就是我所做的，第一行现在是静态的......你应该稍微玩一下css，让它看起来更好，如果你满意就接受答案。 :)
.. 原来我是对的，哇，我很抱歉。我在上面的帖子中添加了一张图片，以明确我的意思，我看到了行，我自己一定很困惑。我需要第 1 列与标题一起是静态的，它应该在移动视图上工作
我只需要第一列，我有标题工作:)
K，给我一点时间