如何将这两个表/ div与公共父标题div对齐?

时间:2016-03-01 15:21:53

标签: html css

我正在研究的这个网站看起来像这样:

enter image description here

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的表数据单元格的百分比来捏造,但这仅适用于某些分辨率,否则它无法正确显示。我还能做什么?

1 个答案:

答案 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>