将一个表中的表头与另一个表中的主体对齐

时间：2017-09-02 21:24:03

标签： html css

我有两个html表。第一个表用于标题，第二个表用于标识。拥有两个单独的表的原因是能够有一个固定的标题和一个可滚动的主体。

如何使表头与表体对齐？

以下是我的代码。 current output

HTML

＆＃13;
＆＃13; 
.scroll {
  height: 100px;
  overflow: auto;
}

#containerdiv {
  width: 80%;
  border: 2px solid brown;
}
＆＃13; 
<div id="containerdiv">
  <div class="header">
    <table>
      <thead>
        <!-- column names are going to be generated automatially with angular -->
        <tr>
          <th style="border: red solid 2px">Id</th>
          <th style="border: red solid 2px">Customer Name</th>
          <th style="border: red solid 2px">Address</th>
          <th style="border: red solid 2px">Phone</th>
        </tr>
      </thead>
      <!-- this is to set size for the column headers-->
      <tbody>
        <tr>
          <td style="width:2%;"></td>
          <td style="width:5%;"></td>
          <td style="width:6%;"></td>
          <td style="width:4%;"></td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="scroll">
    <table id="tablebody">
      <tr>
        <td style="width:4%;border: red solid 2px;">1</td>
        <td style="width:5%;border: red solid 2px;">Customer 1</td>
        <td style="width:6%;border: red solid 2px;">Address 1</td>
        <td style="width:4%;border: red solid 2px;">phone number 1</td>
      </tr>
      <tr>
        <td style="width:4%;border: red solid 2px;">2</td>
        <td style="width:5%;border: red solid 2px;">Customer 2</td>
        <td style="width:6%;border: red solid 2px;">Address 2</td>
        <td style="width:4%;border: red solid 2px;">phone number 2</td>
      </tr>
      <tr>
        <td style="width:4%;border: red solid 2px;">3</td>
        <td style="width:5%;border: red solid 2px;">Customer 3</td>
        <td style="width:6%;border: red solid 2px;">Address 3</td>
        <td style="width:4%;border: red solid 2px;">phone number 3</td>
      </tr>
      <tr>
        <td style="width:4%;border: red solid 2px;">4</td>
        <td style="width:5%;border: red solid 2px;">Customer 4</td>
        <td style="width:6%;border: red solid 2px;">Address 4</td>
        <td style="width:4%;border: red solid 2px;">phone number 4</td>
      </tr>
      <tr>
        <td style="width:4%;border: red solid 2px;">5</td>
        <td style="width:5%;border: red solid 2px;">Customer 5</td>
        <td style="width:6%;border: red solid 2px;">Address 5</td>
        <td style="width:4%;border: red solid 2px;">phone number 5</td>
      </tr>
    </table>

  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

html, body{
  margin:0;
  padding:0;
  height:100%;
}
section {
  position: relative;
  border: 1px solid #000;
  padding-top: 37px;
  background: #500;
}
section.positioned {
  position: absolute;
  top:100px;
  left:100px;
  width:800px;
  box-shadow: 0 0 15px #333;
}
.container {
  overflow-y: auto;
  height: 200px;
}
table {
  border-spacing: 0;
  width:100%;
}
td + td {
  border-left:1px solid #eee;
}
td, th {
  border-bottom:1px solid #eee;
  background: #ddd;
  color: #000;
  padding: 10px 25px;
}
th {
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
}
th div{
  position: absolute;
  background: transparent;
  color: #fff;
  padding: 9px 25px;
  top: 0;
  margin-left: -25px;
  line-height: normal;
  border-left: 1px solid #800;
}
th:first-child div{
  border: none;
}
<section class="">
  <div class="container">
    <table>
      <thead>
        <tr class="header">
          <th style="width:25%;">
Id
            <div>Id</div>
          </th>
          <th style="width:25%;">
            Customer Name
            <div>Customer Name</div>
          </th>
          <th style="width:25%;">
            Address
            <div>Address</div>
          </th>
           <th style="width:25%;">
            Phone
            <div>Phone</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="width:25%;">1</td>
          <td style="width:25%;">Customer 1</td>
          <td style="width:25%;">Address 1</td>
          <td style="width:25%;">phone number 1</td>
        </tr>
       <tr>
          <td style="width:25%;">1</td>
          <td style="width:25%;">Customer 1</td>
          <td style="width:25%;">Address 1</td>
          <td style="width:25%;">phone number 1</td>
        </tr>
       <tr>
          <td style="width:25%;">1</td>
          <td style="width:25%;">Customer 1</td>
          <td style="width:25%;">Address 1</td>
          <td style="width:25%;">phone number 1</td>
        </tr>
       <tr>
          <td style="width:25%;">1</td>
          <td style="width:25%;">Customer 1</td>
          <td style="width:25%;">Address 1</td>
          <td style="width:25%;">phone number 1</td>
        </tr>
       <tr>
          <td style="width:25%;">1</td>
          <td style="width:25%;">Customer 1</td>
          <td style="width:25%;">Address 1</td>
          <td style="width:25%;">phone number 1</td>
        </tr>
       <tr>
          <td style="width:25%;">1</td>
          <td style="width:25%;">Customer 1</td>
          <td style="width:25%;">Address 1</td>
          <td style="width:25%;">phone number 1</td>
        </tr>
      <tr>
          <td style="width:25%;">1</td>
          <td style="width:25%;">Customer 1</td>
          <td style="width:25%;">Address 1</td>
          <td style="width:25%;">phone number 1</td>
        </tr>
      <tr>
          <td style="width:25%;">1</td>
          <td style="width:25%;">Customer 1</td>
          <td style="width:25%;">Address 1</td>
          <td style="width:25%;">phone number 1</td>
        </tr>
       <tr>
          <td style="width:25%;">1</td>
          <td style="width:25%;">Customer 1</td>
          <td style="width:25%;">Address 1</td>
          <td style="width:25%;">phone number 1</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

答案 1 :(得分：0)

我会使用一个表并修复如下标题。

注意：在<th>标记中，文本必须放置两次：一次放在<div>（这将是固定的）和一次正常（这将保留在表格结构中并确保列宽）。后者可以隐藏一些额外的样式。

＆＃13;
＆＃13; 
thead th div {
  position: fixed;
}
＆＃13; 
<table>
  <thead>
    <tr>
      <th>
        <div>header 1 which is longer</div>
        header 1 which is longer
        <!-- yes, it's needed! -->
      </th>
      <th>
        <div>header 2</div>
        header 2
        <!-- yes, it's needed! -->
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>content 1</td>
      <td>content 2</td>
    </tr>
    <tr>
      <td>content 1</td>
      <td>content 2</td>
    </tr>
    <tr>
      <td>content 1</td>
      <td>content 2</td>
    </tr>
    <tr>
      <td>content 1</td>
      <td>content 2</td>
    </tr>
    <tr>
      <td>content 1</td>
      <td>content 2</td>
    </tr>
    <tr>
      <td>content 1</td>
      <td>content 2</td>
    </tr>
    <tr>
      <td>content 1</td>
      <td>content 2</td>
    </tr>
    <tr>
      <td>content 1</td>
      <td>content 2</td>
    </tr>
    <tr>
      <td>content 1</td>
      <td>content 2</td>
    </tr>
    <tr>
      <td>content 1</td>
      <td>content 2</td>
    </tr>
    <tr>
      <td>content 1</td>
      <td>content 2</td>
    </tr>
    <tr>
      <td>content 1</td>
      <td>content 2</td>
    </tr>
    <tr>
      <td>content 1</td>
      <td>content 2</td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

你的主要问题是你的宽度1.不匹配，更重要的是2.没有意义。

请注意，在标头中，tbody中的第一列设置为width: 2%，但下一个表中的等效列位于width: 4%。这些价值观必须匹配，否则事情就不会排成一行。

但更重要的是，假设我们将2％更改为4％，那么您的列只会增加19％。

百分比宽度取决于父级，而不是整个页面宽度。因此，由于您已将#containerdiv设置为80％宽，因此通过将列设置为4％宽，您可以使该列占页面宽度的80％的4％=页面宽度的0.32％。

您真正想要做的是将表格视为100％宽，并将列分开，使其宽度加起来为100％。

#containerdiv {
  width: 80%;
}
#containerdiv table {
  width: 100%;
}
#containerdiv table td:nth-child(1) { /* first column */
  width: 15%;
}
/* and so on for other columns */

为了简化这一操作，您可以做的另一件事是使用box-sizing在列的宽度中包含边框，因此如果您想要一个列，例如，25％宽，带有4像素边框，您不必担心像calc(25% - 4px)那样设置宽度。也就是说，如果要继续使用非折叠边框和表格单元格之间的间距。

最后，请注意您的border shorthand property无序。它应该是边框宽度，边框样式，然后是边框颜色。

在这个示例中，我将所有内联样式都移出并将它们移动到样式表中以使事物更容易可视化，但如果您最终在应用程序中使用内联样式，那很好。遵循这里的原则，它将起作用：

.scroll {
  height: 100px;
  overflow: auto;
}
#containerdiv {
  width: 80%;
  border: 2px solid brown;
}
#containerdiv table {
  width: 100%;
}
.header table {
  padding-right: 17px;
}
#containerdiv table * {
  box-sizing: border-box;
}
#containerdiv th,
#containerdiv td {
  border: 2px solid red;
}
#containerdiv .header tbody td {
  border: none;
}
#containerdiv th:nth-child(1),
#containerdiv td:nth-child(1) {
  width: 15%;
}
#containerdiv th:nth-child(2),
#containerdiv td:nth-child(2) {
  width: 30%;
}
#containerdiv th:nth-child(3),
#containerdiv td:nth-child(3) {
  width: 30%;
}
#containerdiv th:nth-child(4),
#containerdiv td:nth-child(4) {
  width: 25%;
}
<div id="containerdiv">
  <div class="header">
    <table>
      <thead>
        <!-- column names are going to be generated automatially with angular -->
        <tr>
          <th>Id</th>
          <th>Customer Name</th>
          <th>Address</th>
          <th>Phone</th>
        </tr>
      </thead>
      <!-- this is to set size for the column headers-->
      <tbody>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="scroll">
    <table id="tablebody">
      <tr>
        <td>1</td>
        <td>Customer 1</td>
        <td>Address 1</td>
        <td>phone number 1</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Customer 2</td>
        <td>Address 2</td>
        <td>phone number 2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Customer 3</td>
        <td>Address 3</td>
        <td>phone number 3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Customer 4</td>
        <td>Address 4</td>
        <td>phone number 4</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Customer 5</td>
        <td>Address 5</td>
        <td>phone number 5</td>
      </tr>
    </table>
  </div>
</div>

关于滚动条的修改：我已经通过将padding-right添加到唯一的第一个表来修复了PC上的滚动条问题，因此滚动条出现时右侧有一个间隙在第二个表旁边。我选择17px作为值，因为这是Windows上最常见浏览器的滚动条宽度。但请注意，这不是一个完美的解决方案，因为并非所有浏览器的滚动条都具有完全相同的宽度。

该方法的真实完美执行将使用JavaScript检测滚动条宽度，然后相应地设置填充权。

但是，不需要任何JavaScript的替代方法是以视口单位设置表格宽度，例如，设置为75vw。

那是因为100vw相当于窗口的整个宽度，包括滚动条，而100%（在body上）相当于滚动条左侧的窗口宽度。所以基本上使用vw单位会让你忽略滚动条，这样两个表的宽度都相同。只需选择一个足够小的值，为底部表格上的滚动条留出空间，顶部表格将匹配，即使它没有滚动条。

最后，请注意，所有这些只是为了解决您为自己造成的问题，您使用的整体方法是使用两个单独的表来实现固定标头。实际上，在我看来，你应该只有一个表，只需冻结thead并完成它。然后你甚至不会有滚动条问题。以这种方式修改整个事情超出了这个问题的范围，但是你需要考虑它。

相关问题
最新问题