让第 th 元素内的 div 与父元素的高度相同

我有这个代码

<html>
<head>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th style="height:100px;background-color:red">
                  <div>numbers</div>
                </th>
                <th style="background-color:orange">
                  <div style="display:inline-block;background-color:green;">animals</div>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>5.0</td>
                <td>cat</td>
            </tr>
            <tr>
                <td>7.0</td>
                <td>dog</td>
            </tr>
        </tbody>
    </table>
</html>

另请参阅此 plunkr：https://plnkr.co/edit/0TKcvlauVMAxp69qFovy?p=preview

我想让第二个单元格中的div 与第 th 元素的高度相同（所以全绿色）。我做了一些研究，似乎height:100%只有在父元素具有明确定义的高度时才有效。有没有办法通过只更改第二个单元格中div 的 css 来获得我想要的东西？（我无法更改父th元素的样式，也不想使用 javascript/jquery）

不幸的是，在您的情况下没有 css 解决方案。只有绝对定位的子元素才能从父元素继承高度，而无需在父元素上设置高度。

您应该使用脚本或更改模板来解决它。

更新：这个解决方案适合你吗？（您可以在div：before）上设置 100% 高度）

<table border="1">
        <thead>
            <tr>
                <th>
                  <div>numbers<br> test <br>test</div>
              </th>
                <th>
                  <div id="test">animals</div>
            </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>5.0</td>
                <td>cat</td>
            </tr>
            <tr>
                <td>7.0</td>
                <td>dog</td>
            </tr>
        </tbody>
    </table>
    <style>
      #test:before{
        position: absolute;
        height: 100%;
        width:100%;
        top:0;
        left:0;
        background: #f00;
        content: '';
        z-index: -1;
      }
      th{
          position: relative;
      }
    </style>

如果它只是关于纯 BG 颜色，那么伪元素可以完成这项工作

th {/* prepare th to hold a hudge pseudo element*/
  overflow: hidden;
}
.fullbg {/* make pseudo's continer the positioning reference */
  position: relative;
  z-index: 1;/* set over the th , useful for the pseudo coming */
}
.fullbg:before {
  content: '';
  position: absolute;
  height: 200px;/* make it big enough  1000px won't hurt here */
  width: 200px;
  background: inherit;/* inherit bg color you want */
  z-index: -1;/* set under content */
  top: -100px;/* slide aside top and left to fully cover th */
  left: -50px;
}

 <table border="1">
        <thead>
            <tr>
                <th style="height:100px;background-color:red">
                  <div>numbers</div>
                </th>
                <th style="background-color:orange">
                  <div style="display:inline-block;background-color:green;" class="fullbg">animals</div>
                </th>
                <th style="background-color:orange">
                  <div style="display:inline-block;background-color:turquoise;" class="fullbg">family</div>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>5.0</td>
                <td>cat</td>
                <td>cat</td>
            </tr>
            <tr>
                <td>7.0</td>
                <td>dog</td>
                <td>dog</td>
            </tr>
        </tbody>
    </table>

相关内容

最新更新

热门标签：