Question

我在所有第一个tds中都有动态文本内容。所以trs和tds会自动扩展。现在对于所有第二个tds，div都有背景图像，里面没有任何文字。我需要这个带有背景图像的div与表格中的单元格一起自动展开或折叠，这样红色图像就会跨越每个单元格的高度。任何方式纯粹用css做这个，因为我不想在这里介绍脚本？ jsfiddle

       <table border="1">
         <tr>
              <td> 
                  This content makes the trs and tds to expand/contract horizontally   automatically
             </td>
              <td>
                  <div class="img"></div>
             </td>
        </tr>
             <tr>
              <td>
                     xyz
             </td>
              <td>
                                  All  divs inside second tds should get expanded automatically which is not happening
             </td>
        </tr>
</table>

CSS

 td
{
 width:200px
}
.img{
    width:30px;
    height:40px;

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAXCAIAAABmo+ONAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAApSURBVDhPY3gro0IG+v///6hOvGhUJyE0qpMQGtVJCFGmE4jJAf//AwBnlUxAq2HzYQAAAABJRU5ErkJggg==) no-repeat;}

Answer 1

只需为宽度和高度为100％的td设置背景。

小提琴：http://jsfiddle.net/mttSA/

.empty{
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAXCAIAAABmo+ONAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAApSURBVDhPY3gro0IG+v///6hOvGhUJyE0qpMQGtVJCFGmE4jJAf//AwBnlUxAq2HzYQAAAABJRU5ErkJggg==) no-repeat;
background-size: 100% 100%;
}

HTML：

<td class="empty">

</td>

在td内拉伸内部div以跨越td的高度

1 个答案: