具有相同宽度且未在同一行中对齐的两个表的文本

Question

我有两个表格，宽度和数量都相同<td>在一行中，两个表格的css相同，但正如您在代码段中看到的那样，两个表格的第一列正确对齐，但其他列从标题<登记/> 在这里，我想要一个顶部有固定标题的表格，如果内容高度超过100px，内容部分会滚动。

.headings,
.contents {
    list-style-type: none;
    padding: 0;
    width: 100%;
    margin: 0;
}

.headings td,
.contents td {
    width: 20%;
    padding: 10px;
}
.content-subblock {
    max-height: 100px;
    overflow: auto;
}

<div class="content-block">
    <div class="container">
        <div class="content-subblock">
            <table class="headings">
                <tr>
                    <td>heading1</td>
                    <td>heading2</td>
                    <td>heading3</td>
                    <td>heading4</td>
                    <td>heading5</td>
                </tr>
            </table>
        </div>
        <div class="content-subblock">
            <table class="contents">
                <tr>
                    <td>link1</td>
                    <td>link2</td>
                    <td>link3</td>
                    <td>link4</td>
                    <td>link5</td>
                </tr>
                <tr>
                    <td>link6</td>
                    <td>link7</td>
                    <td>link8</td>
                    <td>link9</td>
                    <td>link10</td>
                </tr>
                <tr>
                    <td>link11</td>
                    <td>link12</td>
                    <td>link13</td>
                    <td>link14</td>
                    <td>link15</td>
                </tr>
                <tr>
                    <td>link16</td>
                    <td>link17</td>
                    <td>link18</td>
                    <td>link19</td>
                    <td>link20</td>
                </tr>
            </table>
        </div>
    </div>
</div>

我想可能是因为在第二张表的右侧滚动，任何人都可以建议我如何在一个垂直列中对齐标题和内容表的<td>

Answer 1

由于底部表格上的溢出滚动条，表格的宽度不同。您可以将以下声明添加到content-subblock标头div元素，以确保宽度一致。您可能只想将其添加到两者以确保如果这是动态内容，则始终存在滚动条：

.content-subblock {
  max-height: 100px;
  overflow-y: scroll;
}

但是，组合表格会好得多。

<table>
  <tr>
    <th>header</th>
  </tr>
  <tr>
    <td>data</th>
  </tr> 
</table>

Answer 2

为什么你在单独的表中使用标题，这不是一个好习惯。

在一个以下使用。

 <style>
.container{
  width:100%;
  height:100px;
  overflow:auto;
}
td{
border:1px solid;
}
.header{
  width:calc(100% - 17px);
  width:-webkit-calc(100% - 17px);
  width:-moz-calc(100% - 17px);
 height:25px; 
 background:#000;color:#fff;
}
</style>
<table class="header">
<tr height="25">
  <td width="50%">header</td>
  <td width="50%">header</td>
  </tr>
</table>
<div class="container">
<table style="width:100%; ">
<tr height="25">
  <td width="50%">body</td>
  <td width="50%">body</td>
  </tr>
  <tr height="25">
  <td width="50%">body</td>
  <td width="50%">body</td>
  </tr>
  <tr height="25">
  <td width="50%">body</td>
  <td width="50%">body</td>
  </tr>
  <tr height="25">
  <td width="50%">body</td>
  <td width="50%">body</td>
  </tr>
  <tr height="25">
  <td width="50%">body</td>
  <td width="50%">body</td>
  </tr>
   <tr height="25">
  <td width="50%">body</td>
  <td width="50%">body</td>
  </tr>
   <tr height="25">
  <td width="50%">body</td>
  <td width="50%">body</td>
  </tr>
   <tr height="25">
  <td width="50%">body</td>
  <td width="50%">body</td>
  </tr>
   <tr height="25">
  <td width="50%">body</td>
  <td width="50%">body</td>
  </tr>
   <tr height="25">
  <td width="50%">body</td>
  <td width="50%">body</td>
  </tr>
</table>
</div>