这是一个关于HTML布局的简单问题。下面的代码说明了这一点。 在顶部表的每个单元格中有一个子表。我希望每个子表占用它所使用的单元格(顶部表格)内的整个空间。但这不是正在发生的事情。实际上,每个子表仅使用显示其自身内容所需的空间。如何修改代码以获得我想要的结果?
<script src="https://use.fontawesome.com/1c5ea170a0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<span class="fa fa fa-times closer">Link1</span>
<div class="resume">Open Block 1<br>
Lorem ipsum dolor sit amet, tortor amet dui vestibulum wisi pellentesque, ipsum fusce suspendisse sed. Donec elit dolor elit adipiscing nec ornare, convallis non non in rutrum pede, et etiam dignissim pellentesque etiam, leo phasellus metus. Id habitant ullamcorper, pede vehicula quisque maecenas pede, ultricies lectus.
</div>
</div>
<div class="container">
<span class="fa fa fa-times closer">Link2</span>
<div class="resume">Open Block 2</div>
</div>
<div class="container">
<span class="fa fa fa-times closer">Link3</span>
<div class="resume">Open Block 3<br>
Penatibus tellus non, volutpat lectus ac vitae, tempus expedita vitae nec, suspendisse nonummy eget tellus pretium penatibus. Neque a. Erat tellus eu sit, praesent donec per quis rutrum, placerat neque laoreet. Quisque nascetur est hymenaeos sagittis, mauris id, odio convallis sem amet, penatibus ligula natoque pede, nunc pellentesque in turpis quis leo mus.
</div>
</div>
&#13;
答案 0 :(得分:1)
指定宽度:
<table>
<tr><td>
<table bgcolor=#334433 style="width:100%">
<tr><td>
Al
</td></tr>
</table>
</td></tr>
<tr><td>
<table bgcolor=#334433 style="width:100%">
<tr><td>
Peter Wells
</td></tr>
</table>
</td></tr>
<tr><td>
<table bgcolor=#334433 style="width:100%">
<tr><td>
World Champions in the 20th century
</td></tr>
</table>
</td></tr>
</table>
答案 1 :(得分:0)
.tbl{
width:100%;
}
&#13;
<table>
<tr><td>
<table class="tbl" bgcolor=#334433 >
<tr><td>
Al
</td></tr>
</table>
</td></tr>
<tr><td>
<table class="tbl" bgcolor=#334433>
<tr><td>
Peter Wells
</td></tr>
</table>
</td></tr>
<tr><td>
<table class="tbl" bgcolor=#334433>
<tr><td>
World Champions in the 20th century
</td></tr>
</table>
</td></tr>
</table>
&#13;
以下是代码: