我想使用 div 完成如下表格的相同结果,这样我就可以让它响应并调整每个表格行的列数。 (例如,第一行有 3 个响应列,然后第二行有四个响应列)。我也想避免在单独的 tr 中写单个单词
有办法吗?
这是当前表
<table>
<thead>
<tr>
<th class="short-column">Short Column</th> <!-- th sets the width -->
<th class="short-column">Short Column</th> <!-- th sets the width -->
<th class="long-column">Long Column</th> <!-- th sets the width -->
</tr>
</thead>
<tbody>
<tr>
<td class="lite-gray">Short Column</td> <!-- td inherits th width -->
<td class="lite-gray">Short Column</td> <!-- td inherits th width -->
<td class="gray">Long Column</td> <!-- td inherits th width -->
</tr>
</tbody>
</table>
table { table-layout: fixed; border-collapse: collapse; border-spacing: 0; width: 100%; }
.short-column { background: yellow; width: 30%; }
.long-column { background: lime; width: 40%; }
.lite-gray { background: #f2f2f2; }
.gray { background: #cccccc; }
是否可以使用类似的东西
<table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr>
<td>
<!--<div>THREE COLUMNS</div>-->
</td>
</tr>
<tr>
<td>
<!--<div>FOUR COLUMNS?</div>-->
</td>
</tr>
</table>
最佳答案
如果将 float div 插入到 td 元素中,则可以创建相同的布局:
<table width="100%" border="1" cellspacing="0" cellpadding="4">
<tr>
<td>
<!--<div>THREE COLUMNS</div>-->
<div class="three"></div>
<div class="three"></div>
<div class="half"></div>
</td>
</tr>
<tr>
<td>
<!--<div>FOUR COLUMNS?</div>-->
<div class="four"></div>
<div class="four"></div>
<div class="four"></div>
<div class="four"></div>
</td>
</tr>
</table>
然后只需为宽度添加一些样式即可!
关于html - 响应列表的 div 模拟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17728893/