HTML表格 - 在一列中的一个单元格显示另一列中另一个单元格的div内容

Question

我想在另一个单元格中的div单元格中显示表格单元格中的div。

的HTML看起来像：

<table> 
<tr> 
    <td> 
     <div class="b"></div> 
    </td> 
    <td> 
    </td> 
</tr> 
    <tr> 
     <td><div class="c"></div> 
    </td> 
    <td> 
    </td> 
</tr> 

和风格：

td { 
    border: 1px solid #000; 
    width: 50px; 
    height: 30px; 
} 
.b { 
    width: 100px; 
    height: 80px; 
    background: #f90; 
    border: 1px solid #f60; 
    margin-bottom: -50px; 
    z-index:3; 
} 
.c { 
    width: 100%; 
    height: 100%; 
    background: #390; 
    border: 1px solid #f60; 
    z-index:-3; 
} 

我尝试了几种方法，但徒劳无功。你有什么建议吗？

Answer 1

.b { 
width: 100%; 
height: 240%; 
background: #f90; 
border: 1px solid #f60; 
z-index: 99; 
position: relative; 
margin-top: 25px; 
    } 

.c { 
width: 100%; 
height: 100%; 
background: #390; 
border: 1px solid #f60; 
position: relative; 
} 

调整第一个div的宽度&高度按您的需求

Answer 2

我不知道如果我得到正确的，但我在此解决方案结束：

td { 
    border: 1px solid #000; 
    width: 50px; 
    height: 30px; 
} 
.b { 
    width: 100px; 
    height: 30px; 
    background: #f90; 
    border: 1px solid #f60; 
    top:47px; 
    z-index:3; 
    position:absolute; 
} 
.c { 
    width: 100%; 
    height: 100%; 
    background: #390; 
    border: 1px solid #f60; 
    z-index:-3; 
} 

fiddle