html - 外表和内表的表列宽度相同

我有一个包含所有标头名称的外部表，以及包含所有数据的多个内部表。现在，我想对齐外部表和内部表的列宽。基本上我的html看起来像这样：

<table>
   <thead>
    <tr>
      <td>Header 1</td>
      <td>Header 2</td>
      <td>Header 3</td>
      <td class="hide"></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="hide">Text for js library</td>
      <td class="hide">Text for js library</td>
      <td class="hide">Text for js library</td>
      <td colspan="4">
        <table>
          <tr>
            <td>Actual text</td>
            <td>Actual text</td>
            <td>Actual text</td>
          </tr>
      </td>
    </tr>
  </tbody>
</table>

您可以在此fiddle中看到一个演示。

我知道这是一个怪异的表结构，但是由于我使用的JavaScript库需要这种结构，因此我必须保持这种方式。您可以看到外部表和内部表的每一列具有相同的宽度属性，但是它们看起来完全不同。第一行不占用100％的宽度，而其他所有行都可以。我需要做什么才能获得“正常”表外观？

更新资料

我想我只需要使用百分比宽度语句。
更新的小提琴：https://jsfiddle.net/o546s8g3/3/

最佳答案

我为您更新了jsfiddle，您可以检查https://jsfiddle.net/o546s8g3/5/

<table >
  <thead>
    <tr>
      <td style="width:16.8%" >A</td>
      <td style="width:16.7%">B</td>
      <td style="width:16.7%">Lorem ipsum</td>
      <td style="width:16.7%">Lorem ipsum</td>
      <td style="width:16.7%">Lorem ipsum</td>
      <td style="width:16.7%">Lorem ipsum</td>
      <td class="hide ">se ipsum</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="hide">Lorem</td>
      <td class="hide">Lorem ipsum</td>
      <td class="hide">Lorem ipsum dolor sit amet</td>
      <td class="hide">Lorem</td>
      <td class="hide">Lorem</td>
      <td class="hide">Lorem ipsum</td>
      <td colspan="7">
        <table class="table">
          <tr>
            <td>add ipsum dolor</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum dolor sit amet</td>
            <td>Lorem</td>
            <td>Lorem</td>
            <td>Lorem ipsum</td>
          </tr>
          <tr>
            <td>Lorem</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum dolor sit amet</td>
            <td>Lorem</td>
            <td>Lorem</td>
            <td>Lorem ipsum</td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td class="hide">dee</td>
      <td class="hide">dee ipsum</td>
      <td class="hide">Lorem ipsum dolor sit amet</td>
      <td class="hide">Lorem</td>
      <td class="hide">Lorem</td>
      <td class="hide">Lorem ipsum</td>
      <td colspan="7">
        <table>
          <tr>
            <td>Lorem</td>
            <td>Lorem ipsum</td>
            <td>Lorem ipsum dolor sit amet</td>
            <td>Lorem</td>
            <td>Lorem</td>
            <td>Lorem ipsum</td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table

>
表格下方的一些文字

基本上，您只需要进行一些计算即可使所有内容对齐