Question

我有一个外部表，其中包含所有标题名称和包含所有数据的多个内部表。现在我想对齐外表和内表的列宽。基本上我的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/

Answer 1

我为您更新了您的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

＆GT; 表格下方的一些文字

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

外表和内表中表列的宽度相同

1 个答案: