用div填充html表格單元格-有解無憂

我有一個行跨表單元格，里面有一個 div。我想讓單元格的 div 100% 高。

示例：https ://jsfiddle.net/gborgonovo/zqohw286/2/

在示例中，我希望紅色 div 垂直填充黃色單元格。

請問有什么提示嗎？

<table>
  <tbody>
    <tr>
      <td rowspan="2" style="background-color: yellow;">
        <div style="background-color: red; width: 200px; height: 100%;">
          Some text
        </div>
      </td>
      <td style="background-color: lightgreen; width: 200px;">
        Row 1.1<br /> Row 1.2<br /> Row 1.3
      </td>
    </tr>
    <tr>
      <td style="background-color: lightblue; width: 200px;">
        Row 2.1<br /> Row 2.2<br /> Row 2.3
      </td>
    </tr>
  </tbody>
</table>

uj5u.com熱心網友回復：

<table style="height: 100%;">
   <tbody>
      <tr>
         <td rowspan="2" style="background-color: yellow;">
            <div style="background-color: red;width: 200px;height: 100%;">
               Some text
            </div>
         </td>
         <td style="background-color: lightgreen; width: 200px;">
              Row 1.1<br />
              Row 1.2<br />
              Row 1.3
         </td>
      </tr>
      <tr>
      <td style="background-color:lightblue; width:200px;">
              Row 2.1    <br /> 
              Row 2.2    <br /> 
              Row 2.3
         </td>
      </tr>
   </tbody>
</table>

uj5u.com熱心網友回復：

你的 div 風格應該是：


<div style="background-color: red; width: 200px; height: 110px; display: flex; justify-content: center; align-items: center">Some text</div>

用 div 填充 html 表格單元格

uj5u.com熱心網友回復：

我為居中的內容添加了一個類。

編輯

根據您的評論，我在JSFiddle (link)上進行了互動。

td[rowspan] {
  position: relative;
  width: 200px;
}

.fill {
  position: absolute;
  top: 0;
  bottom: 0;
}

.centeredContent {
  display: flex;
  align-items: center;      /* Vertical */
  justify-content: center;  /* Horizontal */
}

<table>
  <tbody>
    <tr>
      <td rowspan="2" style="background-color: yellow;">
        <div class="fill centeredContent" style="background-color: red; width: 200px; height: 100%;">
          Some text
        </div>
      </td>
      <td style="background-color: lightgreen; width: 200px;">
        Row 1.1<br /> Row 1.2<br /> Row 1.3
      </td>
    </tr>
    <tr>
      <td style="background-color: lightblue; width: 200px;">
        Row 2.1<br /> Row 2.2<br /> Row 2.3
      </td>
    </tr>
  </tbody>
</table>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/428662.html

標籤：html css

上一篇：無論螢屏尺寸如何，如何使div固定在同一位置

下一篇：CSS：嘗試在容器內設定回應式井字游戲水平線和垂直線