html - 如何将这两个表/div 与共同的父标题 div 对齐？

Question

我正在处理的这个 webapge 看起来像这样:

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) 让表格内的“顶部”行横跨页面的整个宽度，这样就没有黑色空白，本质上使其看起来与当前标题 div 的显示方式相似。

无论哪种方式，我都需要“1a”的文本与“1b”对齐，2a/2b 的文本也是如此。以及具有横跨页面宽度的灰色背景。

与设计师相比，我更像是一名开发人员，我似乎无法弄清楚如何才能让它发挥作用。我对标题 div 的表格数据单元格的百分比进行了修改，但这只适用于某些分辨率，否则无法正确显示。我还能做什么？

Answer 1

根据您要整体完成的目标，一种选择是嵌入您的表格。

参见我在这个 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>