Question

我正在尝试将标题列保持在顶部，我希望第一列（标题之后）也被卡住，所以应该发生的是这个

：

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

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：图片澄清

Answer 1

好的，我稍微更新了一下：

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

我做了什么？

我制作了2个tbody并将它们放在不同的表格中，然后将表格移到主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>

如何粘贴表格标题和表格

1 个答案: