表格高度不会在Flexbox中拉伸

时间:2017-10-14 08:03:08

标签: css css3 flexbox

.flex {
  display: flex;
  width: 90%;
  margin: 0 auto;
  justify-content: space-between;
}

table {
  width: 48%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid gray;
  padding: 5px;
}
<div class="flex">
  <table>
    <tbody>
    <tr>
      <th>1st Table</th>
    </tr>
    <tr>
      <td>
      <p>
        I want to be <br>
        the same height<br>
        as the next table
      </p>
      </td>
    </tr>
    </tbody>
  </table>

  <table>
    <tbody>
    <tr>
      <th>2nd Table</th>
    </tr>
    <tr>
      <td>
      <p>
        This text has 4 lines<br>
        This text has 4 lines<br>
        This text has 4 lines<br>
        This text has 4 lines
      </p>
      </td>
    </tr>
    </tbody>
  </table>
</div>

我想匹配表中未知高度的最高表,但我该怎么办呢?

在div的情况下,“align-items:stretch;”

没有问题

我尝试了“align-items:stretch;”,但高度并没有改变。 如果可能的话,我想在不改变高度的情况下将“th”的高度扩展为“td”,但我是否必须使用JavaScript?

3 个答案:

答案 0 :(得分:0)

td {height: 500px;}您可以为所有表使用固定高度。

答案 1 :(得分:0)

dict
.flex {
  display: flex;
  width: 90%;
  margin: 0 auto;
  justify-content: space-between;
}

table {
  width: 48%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid gray;
  padding: 5px;
}
td {
  height: 150px;
}

答案 2 :(得分:0)

由于Flexbox是CSS的最新版本之一,而Table是最古老的版本之一,因此它们不能很好地协同工作,主要不是因为年龄差异,而是表格元素规格。 (以及跨浏览器的不一致行为)为解释提供了充足的空间。

在这种情况下,添加一个包装器并为table提供一个高度。

&#13;
&#13;
.flex {
  display: flex;
  width: 90%;
  margin: 0 auto;
  justify-content: space-between;
}

.flex > div {
  width: 48%;                          /* added  */
}

table {
  height: 100%;                        /*  added  */
  width: 100%;
  border-collapse: collapse;
}

td {
  height: 100%;                        /*  added  */
}

th, td {
  border: 1px solid gray;
  padding: 5px;
}
&#13;
<div class="flex">
  <div>
    <table>
      <tbody>
        <tr>
          <th>1st Table</th>
        </tr>
        <tr>
          <td>
            <p>
              I want to be <br> the same height<br> as the next table
            </p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div>
    <table>
      <tbody>
        <tr>
          <th>2nd Table</th>
        </tr>
        <tr>
          <td>
            <p>
              This text has 4 lines<br> This text has 4 lines<br> This text has 4 lines<br> This text has 4 lines
            </p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
&#13;
&#13;
&#13;