<td> 中的 <div> 与下一个 <td> 中的另一个 <div> 可见溢出

Question

我需要创建一个 table 和 table-layout: fixed，其中包含第一个 <td> 一个 <div> 和 overflow: visibile 以及下一个 <td> 另一个 <div> 在下面的 <tr> insted 中进入头部。
我想要的结果：

https://i.imgur.com/iRbTsQ9.png

<tr> 应该加倍高度，红色框向下。这是我的代码：

table{
    table-layout: fixed;
    width: 350px;
}

th, td, thead, tbody{
    border: 1px black solid;
}

th, td{
    width: 40px;
}

.div1{
    height: 40px;
    width: 300px;
    overflow: visible;
    background-color: brown;
    position: relative;
    z-index: 10;
}

.div2{
    height: 40px;
    width: 80px;
    overflow: visible;
    background-color: blue;
    position: relative;
    z-index: 20;
}

<table>
    <thead>
        <tr>
            <th>One</th>
            <th>Two</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><div class="content"><div class="div1"></div></div></td>
            <td><div class="content"><div class="div2"></div></div></td>
        </tr>
        <tr>
            <td>lorem</td>
            <td>loremlorem</td>
        </tr>
    </tbody>
</table>

谢谢大家！

Answer 1

可以通过多种方式完成。其中一种方法是 position: absolute 并调整 css 中的 top 值，并根据需要调整 <tr> 中的 height 属性。

table{
    table-layout: fixed;
    width: 350px;
}

th, td, thead, tbody{
    border: 1px black solid;
}

th, td{
    width: 40px;
}

.div1{
    height: 40px;
    width: 300px;
    overflow: visible;
    background-color: brown;
    position: relative;
    z-index: 10;
}

.div2{
    height: 40px;
    width: 80px;
    background-color: blue;
    position: absolute;
    top: 70%
}

<table>
    <thead>
        <tr>
            <th>One</th>
            <th>Two</th>
        </tr>
    </thead>
    <tbody>
        <tr height=150>
            <td><div class="content"><div class="div1"></div></div></td>
            <td><div class="content"><div class="div2"></div></div></td>
        </tr>
        <tr>
            <td>lorem</td>
            <td>loremlorem</td>
        </tr>
    </tbody>
</table>

<td> 中的 <div> 与下一个 <td> 中的另一个 <div> 可见溢出

Overflow visible of <div> in <td> with another <div> in next <td>

html

javascript

css

overflow