Question

我有以下代码来显示项目的比较

<table>
  <tr> <!-- Iterating over list of Headers -->
    <td>
      <div class="Header"><h4>Header Value</h4></div>
      <div class="HeaderList"><span>Key</span> <!-- Iterating over list of keys-->
    </td>
    <td> <!-- Iterating over multiple items --> 
     <div class="Header"></div>
     <div class="HeaderList"><span>Value</span> <!-- Displaying Value next to the key by iterating over them-->
   </td>
  </tr>
</table>

我想在多个td中将div与“Header”和“HeaderValueList”类对齐。如果需要，Header中的值可以扩展到多行。我想设置“HeaderKeyList”和“HeaderValueList”的最大高度不要越过32px但是如果它小于那个，高度应该是动态可变的并且应该在tds之间对齐。

我有以下css

.HeaderList
{
    width:100%;
    height:auto;
    max-height:32px;
    overflow: hidden;
    padding-top: 0.5px;
    padding-bottom: 0.5px;
}

.Header
{
    width:100%;
}

当任何值跨越多行时，我的对齐方式出错。请帮忙。我也愿意在javascript中进行更改。

提前致谢。

Answer 1

要将表格中的行组合在一起，请使用tbody。每个列表一个tbody。所以HTML变成了

<table>
    <thead>
        <tr>
            <th></th>
            <th>Item1</th>
            <th>Item2</th>
        </tr>
    </thead>
    <tbody>
        <!-- Iterating over list of Headers -->
        <tr class="Header">
            <th>Header Value1</th><td></td><td></td>
        </tr>
        <tr>
            <td><div class="HeaderKey">Key1</div></td>
            <td><div class="HeaderValue">Item1Value1</div></td>
            <td><div class="HeaderValue">Item2Value1</div></td>
        </tr>
        <tr>
            <td><div class="HeaderKey">Key2</div></td>
            <td><div class="HeaderValue">Item1Value2</div></td>
            <td><div class="HeaderValue">Item2Value2</div></td>
        </tr>
        <tr>
            <td><div class="HeaderKey">Key3</div></td>
            <td><div class="HeaderValue">Item1Value3</div></td>
            <td><div class="HeaderValue">Item2Value3</div></td>
        </tr>
    </tbody>
    <tbody>
        <!-- Iterating over list of Headers -->
        <tr class="Header">
            <th>Header Value2</th><td></td><td></td>

等，结果如下：

enter image description here

请参阅fiddle。

我使其中一个值更宽一些，以证明如果你使窗口变窄，div将增长到两行，左右两边的单元格将保持排列（垂直居中;但你可以改变那个）如果你使窗口变得更窄，由于最大高度，div不会增长到两行以上。

跨tds的HTML表格div对齐

1 个答案: