Question

我正在将table放在td内。通过设置width:100%，我可以使桌子水平伸展，但我不能垂直伸展桌子。无论我尝试了什么，桌子都将具有容纳其内容所需的最小高度。

下面是表格的结构

table {
    border-collapse: collapse;
    border-spacing: 2px;
    border-color: black;
}
td {
    border: 1px solid #ddd;
    background: #f2f5f7;
}

<table >
  <tbody>
    <tr>
      <td rowspan="2" style="background-color:#ff0000"/>
  
        <table>
          <tr>
            <td>A</td>
            <td>B</td>
          </tr>
          <tr>
            <td>C</td>
            <td>D</td>
          </tr>
        </table>
        
      <td><br>Extra<br></td>
    </tr>
    <tr>
      <td>Space<br><br></td>
    </tr>
    </table>

我试图摆脱ABCD表上方和下方的红色区域。我已经尝试了数十个各种问题的解决方案，但我认为这很简单，但是没有任何效果。

我已经尝试过（以各种排列方式）：

height:100%在所有组件上
嵌套表和/或父级display:flex上的display:block或td
在所有组件上明确设置padding:0px !important

这些都没有影响桌子的高度。

迄今为止最有希望的结果：将高度设置为像素值（例如height:100px 会更改表格的高度。不幸的是，这是必需的桌子的高度将根据我的知识/控制范围之外的因素而变化。我正在寻找针对此问题的编程解决方案。

（注意：：我知道如何在页面加载后使用JS来获取相邻单元格的高度并设置嵌套表中tr的高度。但是，我不能保证JS可以执行，所以这是我的不得已。）

Answer 1

这是我使用CSS Grid.创建的解决方案

.grid-table {
  display: grid;
  grid-template-columns: repeat(3, minmax(50px, 1fr));
  background-color: #fff;
  color: #444;
  max-width: 800px;
  background-color: #ccc;
}

.grid-table > .row:not(:last-of-type) {
  border-bottom: 1px solid #ddd
}

.row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(50px, 1fr));
  align-items: center;
}

.row > .box:not(:last-of-type) {
  border-right: 1px solid #ddd;
}

.box {
  height: 100%;
  display: flex;
  align-items: center;
}

.box-item {
  padding: 5px;
}

<div class="grid-table">
  <!-- Table Row -->
  <div class="row">
    <div class="box">
      <div class="box-item">Column 1</div>
    </div>
    <div class="box">
      <div class="box-item">Column 2</div>
    </div>
    <div class="box">
      <div class="box-item">Column 3</div>
    </div>
  </div>
  
  <!-- Table Row -->
  <div class="row">
    <div class="box">
      <div class="box-item">A</div>
    </div>
    <div class="box">
      <div class="box-item">B</div>
    </div>
    <div class="box">
      <div class="box-item">Extra<br>Space</div>
    </div>
  </div>
  
  <!-- Table Row -->
  <div class="row">
    <div class="box">
      <div class="box-item">C</div>
    </div>
    <div class="box">
      <div class="box-item">D</div>
    </div>
    <div class="box">
      <div class="box-item">Extra<br>Space</div>
    </div>
  </div>
</div>

使用此解决方案，各个列的高度将始终是最高列的高度。您可以通过修改align-items类中的.box属性来控制是否要使行居中。

JSFiddle

拉伸桌以垂直放置TD

1 个答案: