两个表并排显示的相同TD高度

时间：2018-02-05 20:51:28

标签： html css html-table

我创建了两个并排显示的表格。在每个表中都有标题部分，每个部分下面都有数据。我遇到的问题是并排对齐每个部分的标题，因为有些部分的数据比另一部分少。下面是我到目前为止尝试使用CSS和HTML但它无法正常工作。希望有人可以提供帮助。

＆＃13;
＆＃13; 
#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: uncollapse;
}

#customers th {
  broder: none;
}

#customers td {
  broder: none;
  min-height: 33%;
}

#customers tr:nth-child(even) {
  background-color: #f2f2f2;
}

#customers th {
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: Center;
  background-color: Gray;
  color: white;
}
＆＃13; 
<table id="customers" style="display: inline-block; border: 15px solid;   float: left; ">
  <tr>
    <th>Heading 1</th>
    <th></th>
  </tr>
  <tr>
    <td>Question 1?</td>
    <td align="center" font='red'>Yes</td>
  </tr>
  <tr>
    <td>Question2?</td>
    <td align="center">N/A</td>

  </tr>
  <tr>
    <td>Question3</td>
  </tr>


  <tr>
    <th>Heading 2</th>
    <th></th>

  </tr>

  <tr>
    <td>Question 1?</td>
    <td align="center">USD</td>

  </tr>
  <tr>

    <td>Question 2?</td>
    <td align="center">USD</td>
  </tr>

  <tr>
    <td>Question 3?</td>
    <td align="center">USD</td>

  </tr>
  <tr>
    <td>Question 3?</td>
    <td align="center">N/A</td>


  </tr>

  <tr>
    <th>Heading 3</th>
    <th></th>

  </tr>

  <tr>
    <td>Question 1</td>
    <td align="center">Yes</td>

  </tr>
  <tr>

    <td>Question 2
    </td>
    <td>See Link
    </td>

  </tr>
  <tr>
    <td></td>
    <td></td>

  </tr>
  <tr>
    <td>Direct Debit</td>
    <td></td>

  </tr>

  <tr>
    <th>Heading 4</th>
    <th></th>

  </tr>
  <tr>
    <td>Question1</td>
    <td>&nbsp;</td>

  </tr>
  <tr>
    <td>Question1</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Question1</td>
    <td></td>

  </tr>
  <tr>
    <td>Question1</td>
    <td></td>

  </tr>
  <tr>
    <td>Question1></td>
    <td></td>

  </tr>
  <tr>
    <td>Question1</td>
    <td></td>

  </tr>
  <tr>
    <td>Question1</td>
    <td></td>

  </tr>
  <tr>
    <td>Question1</td>
    <td></td>

  </tr>
  <tr>
    <td>Question1</td>
    <td></td>
  </tr>
  <tr>
    <td>Question1</td>
    <td></td>

  </tr>
  <tr>
    <td>Question1</td>

    <td></td>
  </tr>
  <tr>
    <td>Question1</td>

    <td></td>
  </tr>
  <tr>
    <td>Question1</td>
    <td></td>

  </tr>

  <tr>
    <td>Question1</td>


    <td></td>

  </tr>
  <tr>
    <th>Header 5</th>
    <th></th>
  </tr>
  <tr>
    <td>Question1</td>
    <td> </td>

  </tr>
  <tr>
    <td>Question</td>
    <td> </td>

  </tr>
  <tr>
    <td>Question</td>
    <td> </td>
  </tr>
  <tr>
    <td>Question</td>
    <td> </td>
  </tr>
  <tr>
    <th>header 6</th>
    <th></th>
  </tr>
  <tr>
    <td>Question</td>
    <td></td>
  </tr>
  <tr>
    <td>Question</td>
    <td align="center">Yes</td>
  </tr>
  <tr>
    <td>Question?</td>
    <td align="center">N/A</td>

  </tr>

  <tr>
    <th>HEader 7</th>
    <th></th>
  </tr>
  <tr>
    <td>Question</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Question
    </td>
    <td align="center">See Link
    </td>
  </tr>
  <tr>
    <td>Question
    </td>
    <td>&nbsp;</td>
  </tr>
  <tr></tr>

</table>
</div>


<table id="customers" style="display: inline-block; border: 15px solid; float: left; ">
  <tr>
    <th>Header 1</th>
    <th></th>
  </tr>
  <tr>
    <td>Question1</td>
    <td> </td>

  </tr>
  <tr>
    <td>Question</td>
    <td> </td>

  </tr>
  <tr>
    <td>Question</td>
    <td> </td>
  </tr>
  <tr>
    <td>Question</td>
    <td> </td>
  </tr>
  <tr>
    <th>header 2</th>
    <th></th>
  </tr>
  <tr>
    <td>Question</td>
    <td></td>
  </tr>
  <tr>
    <td>Question</td>
    <td align="center">Yes</td>
  </tr>
  <tr>
    <td>Question?</td>
    <td align="center">N/A</td>

  </tr>

  <tr>
    <th>HEader 3</th>
    <th></th>
  </tr>
  <tr>
    <td>Question</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Question
    </td>
    <td align="center">See Link
    </td>
  </tr>
  <tr>
    <td>Question
    </td>
    <td>&nbsp;</td>
  </tr>
  <tr></tr>


  <tr>
    <th>Header 4</th>
    <th></th>

  </tr>
  <tr>
    <td>Question</td>
    <td align="center">Yes</td>
  </tr>
  <tr>
    <td>Question</td>
    <td align="center">No</td>
  </tr>
  <tr>
    <td>Question</td>
    <td align="center">Yes</td>
  </tr>
  <tr>
    <td>Question</td>
    <td align="center">Yes*</td>
  </tr>
  <tr>
    <td>Question</td>
    <td align="center">N/A</td>
  </tr>
  <tr>

    <td>Question</td>
    <td align="center">Yes</td>
  </tr>
  <tr>
    <td>Question</td>
    <td align="center">*</td>
  </tr>
  <tr>
    <td>Question</td>
    <td></td>
  </tr>
  <tr>
    <td>Question</td>
    <td>
      <td>
  </tr>

  <tr>

    <td>Question</td>

    <td></td>
  </tr>


  <tr>
    <th>HEader 5</th>
    <th></th>
  </tr>
  <tr>
    <td>Question?</td>
    <td align="center">IAS</td>
  </tr>


  <tr>
    <th>Header 6</th>
    <th></th>
  </tr>
  <tr>
    <td>Question</td>
    <td align="center">Yes</td>
  </tr>
  <tr>
    <td>Question</td>
    <td align="center">Yes</td>
  </tr>
  <tr>
    <td>Question</td>
    <td align="center">Yes</td>
  </tr>
  <tr>
    <td>Question</td>
    <td align="center">Yes</td>
  </tr>
  <tr>

    <th>header 7</th>
    <th></th>
  </tr>
  <tr>
    <td>Question</td>
  </tr>





</table>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

这是代码的前三个部分的一个版本，其中一个表围绕内部表格进行结构化。在容器表的td上设置vertical-align: top会使内部表保持在相同的垂直位置，即使其中一个比下一个更高。

.even-heights {
  font-size: 0;
  background: black;
  border: 7.5px solid;
  border-collapse: collapse;
}

.even-heights td {
  vertical-align: top;
}

.customers {
  margin: 7.5px;
  font-size: 16px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: uncollapse;
  display: inline-block;
}

.customers th {
  border: none;
}

.customers td {
  border: none;
  /* tr must have a height then... min-height: 33%; */
  min-height: 18px;
  min-width: 62px;
}

.customers tr:nth-child(even) {
  background-color: #f2f2f2;
}

.customers tr:nth-child(odd) {
  background-color: #fff;
}

.customers th {
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: Center;
  background-color: Gray;
  color: white;
}
<table class="even-heights">
  <tr>
    <td>
      <table class="customers">
        <tr>
          <th>Heading 1</th>
          <th></th>
        </tr>
        <tr>
          <td>Question 1?</td>
          <td align="center" font='red'>Yes</td>
        </tr>
        <tr>
          <td>Question2?</td>
          <td align="center">N/A</td>
        </tr>
        <tr>
          <td>Question3</td>
          <td> </td>
        </tr>
      </table>
    </td>
    <td>
      <table class="customers">
        <tr>
          <th>Header 1</th>
          <th></th>
        </tr>
        <tr>
          <td>Question1</td>
          <td> </td>

        </tr>
        <tr>
          <td>Question</td>
          <td> </td>

        </tr>
        <tr>
          <td>Question</td>
          <td> </td>
        </tr>
        <tr>
          <td>Question</td>
          <td> </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>

      <table class="customers">
        <tr>
          <th>Heading 2</th>
          <th></th>

        </tr>

        <tr>
          <td>Question 1?</td>
          <td align="center">USD</td>

        </tr>
        <tr>

          <td>Question 2?</td>
          <td align="center">USD</td>
        </tr>

        <tr>
          <td>Question 3?</td>
          <td align="center">USD</td>

        </tr>
        <tr>
          <td>Question 3?</td>
          <td align="center">N/A</td>


        </tr>
      </table>
    </td>
    <td>
      <table class="customers">
        <tr>
          <th>header 2</th>
          <th></th>
        </tr>
        <tr>
          <td>Question</td>
          <td></td>
        </tr>
        <tr>
          <td>Question</td>
          <td align="center">Yes</td>
        </tr>
        <tr>
          <td>Question?</td>
          <td align="center">N/A</td>

        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>

      <table class="customers">
        <tr>
          <th>Heading 3</th>
          <th></th>
        </tr>
        <tr>
          <td>Question 1</td>
          <td align="center">Yes</td>
        </tr>
        <tr>
          <td>Question 2
          </td>
          <td>See Link
          </td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td> </td>
        </tr>
        <tr>
          <td>Direct Debit</td>
          <td></td>
        </tr>
      </table>
    </td>
    <td>
      <table class="customers">
        <tr>
          <th>HEader 3</th>
          <th></th>
        </tr>
        <tr>
          <td>Question</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>Question
          </td>
          <td align="center">See Link
          </td>
        </tr>
        <tr>
          <td>Question
          </td>
          <td>&nbsp;</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

相关问题
最新问题