Question

我有这段代码

<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）

Answer 1

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

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

<强> UPD：这个解决方案怎么样？（你可以在div上设置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>

Answer 2

如果只是普通的bg颜色，那么伪元素可以完成这项工作

＆＃13;

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;
}

＆＃13;

 <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>

＆＃13;

第th个元素中的div与父元素

2 个答案: