具有相同宽度和 <td> 的两个表格的文本未在同一行对齐

Question

我在一行中有两个具有相同宽度和数量<td> 的表格，两个表格的 css 相同，但正如您在 sn-p 中看到的，两个表格的第一列正确对齐，但其他列从标题左移 在这里，我想要一个顶部有固定标题的表格，如果内容高度超过 100 像素，则内容部分会滚动。

.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

我使用 jQuery 来实现这一点，请检查这是否是你的 正在找。您可以尝试删除一些它不会显示的数据行 滚动条

---

CODEPEN 链接

[https://codepen.io/feizel/pen/QQZqpR?editors=1111][1]

var contentHeight =  jQuery(".faizal--block").outerHeight();
var absoluteHeight = 100;
if(contentHeight > absoluteHeight){
  jQuery('.faizal--block').addClass('scrolling');
  jQuery('.headings').css('width', 'calc(100% - 15px)');
}else {
   jQuery('.headings').css('width', 'calc100%');
}

table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }
    .headings{
        list-style-type: none;
        padding: 0;
        width: 100%;
        margin: 0;
    }

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

    .headings td,
    .contents td {
        width: 20%;
        padding: 10px;
    }
    .content-subblock {
        overflow: auto;
      background-color:white;
     
    }
    .scrolling{
      max-height:100px;
    }
    .scrolling_none{
      height:auto;
      overflow:hidden;
    }
    .headings td, .contents td{
      padding:0;
      background:red;
      border:none;
      color:#fff;
      text-indent:15px;
    }
    .headings td{
        background:#bc2d2d;
    }
    .contents td{
        background:grey;
    }
    .headings{
      background:red;
      font-weight:bold;
      background:#bc2d2d;
    }
    td{ 
      height:50px;
      border:3px solid #333 !important;
      font-size:16px;
      padding:0 !important;
      width:300px !important;
      line-height:50px;
        -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
        -moz-column-gap: 40px; /* Firefox */
        column-gap: 40px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="content-block">
        <div class="container">
            <div class="content-subblock">
                <table class="headings" cellspacing="0" cellpadding="0">
                    <tr>
                        <td>heading1</td>
                        <td>heading2</td>
                        <td>heading3</td>
                        <td>heading4</td>
                        <td>heading5</td>
                    </tr>
                </table>
            </div>
  <div class="content-subblock faizal--block">
                <table cellspacing="0" cellpadding="0" class="contents">
                    <tr>
                        <td>link1</td>
                        <td>link2</td>
                        <td>link3</td>
                        <td>link4</td>
                        <td>link5</td>
                    </tr>
                   <tr>
                        <td>link1</td>
                        <td>link2</td>
                        <td>link3</td>
                        <td>link4</td>
                        <td>link5</td>
                    </tr>
                   <tr>
                        <td>link1</td>
                        <td>link2</td>
                        <td>link3</td>
                        <td>link4</td>
                        <td>link5</td>
                    </tr>
                   <tr>
                        <td>link1</td>
                        <td>link2</td>
                        <td>link3</td>
                        <td>link4</td>
                        <td>link5</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

Answer 2

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

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

但是，将表格组合起来会更好。

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

Answer 3

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

使用下面的一个。

 <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>