我正在研究的这个网站看起来像这样:
HTML非常像这样:
<div class="title">
<table>
<tr>
<td width="35%">Table 1a Header</td>
<td width="65%">Table 2a Header</td>
</tr>
</table>
</div>
<div class="padding-all">
<div class="body" style="width: 100%">
<div><table> <!-- table 1b... --></div>
<div><table> <!-- empty table for spacing --></div>
<div><table> <!-- table 2b... --></div>
</div>
</div>
我想要实现的是:
1)让我<div class="title">
顶部的文字在<div class="body">
或
2)拥有&#34; top&#34;表格内的行跨越页面的整个宽度,因此没有黑色空格,实质上使它看起来与当前标题div的显示方式类似。
无论哪种方式,我都需要&#34; 1a&#34;与&#34; 1b&#34;和2a / 2b相同。并且它具有横跨页面宽度的灰色背景。
我是一名开发人员,而不是一名设计师。我似乎无法弄清楚如何让这项工作得以实现。我已经用标题div的表数据单元格的百分比来捏造,但这仅适用于某些分辨率,否则它无法正确显示。我还能做什么?
答案 0 :(得分:0)
根据您要完成的内容,一个选项是嵌入表格。
请参阅此jsfiddle中的示例,其中我使用了以下代码:
<table>
<thead>
<tr>
<th width="2%"></th>
<th width="33%">Table 1a Header</th>
<th width="2%"></th>
<th width="63%">Table 2a Header</th>
</tr>
<tr height="10px">
<td colspan="4"></td>
</tr>
<tr>
<td width="2%"></td>
<th width="33%">Table1b Header</th>
<td width="2%"></td>
<th width="63%">Table2b Header</th>
</tr>
</thead>
<tbody>
<tr>
<td width="2%"></td>
<td width="33%">
<table><!-- Content --></table>
</td>
<td width="2%"></td>
<td width="63%">
<table><!-- Content --></table>
</td>
</tr>
</tbody>
</table>