具有相同CSS属性的两个表呈现不同的列宽

Question

我试图通过使用固定的表格布局并在th元素上使用内联样式来设置表格列的宽度。

.data-view__table {
        table-layout: fixed;
        width: 100%;
    }

    <div class="right-panel">
        <div class="data-view" id="family-display">
            <h2>Selected Family Overview</h2>
            <div class="data-view__section hidden">
                <h3>Primary Account</h3>
                <table class="data-view__table">
                    <thead>
                        <tr>
                            <th style="width:15%;">Name</th>
                            <th style="width:25%;">Address</th>
                            <th style="width:13%;">City</th>
                            <th style="width:5%;">State</th>
                            <th style="width:15%;">Phone</th>
                            <th>Email</th>
                        </tr>
                    </thead>
                    <tbody id="primary-contact"></tbody>
                </table>
            </div>
            <div class="data-view__section hidden">
                <h3>Other Contacts</h3>
                <table class="data-view__table">
                    <thead>
                        <tr>
                            <th style="width:15%;">Name</th>
                            <th style="width:25%;">Address</th>
                            <th style="width:13%;">City</th>
                            <th style="width:5%;">State</th>
                        </tr>
                    </thead>
                    <tbody id="other-contacts"></tbody>
                </table>
            </div>
        </div>
    </div>

请注意，“名称”，“地址”和“城市”列的宽度百分比均相同，因此应在底部的图片中对齐。

通过查看相关文章，我尝试使用最小宽度和宽度以及th元素的基于百分比和像素的宽度。

这是彼此重叠的两个表的图片：

更新

列数正在发挥作用。当我调整第二张表中的列数以使其与第一张表匹配时，此问题已解决。

肯定有比向第二个表添加不可见列更好的解决方案。如何防止表格“自动展开”列？

Answer 1

因此，您需要指定电子邮件的宽度，以便总金额为100％； 其次，一种解决方案是将第二张桌子的剩余宽度留空。

<div class="right-panel">
            <div class="data-view" id="family-display">
                <h2>Selected Family Overview</h2>
                <div class="data-view__section hidden">
                    <h3>Primary Account</h3>
                    <table class="data-view__table">
                        <thead>
                            <tr>
                                <th style="width:15%;">Name</th>
                                <th style="width:25%;">Address</th>
                                <th style="width:13%;">City</th>
                                <th style="width:5%;">State</th>
                                <th style="width:15%;">Phone</th>
                                <th style="width:27%;">Email</th>
                            </tr>
                        </thead>
                        <tbody id="primary-contact"></tbody>
                    </table>
                </div>
                <div class="data-view__section hidden">
                    <h3>Other Contacts</h3>
                    <table class="data-view__table">
                        <thead>
                            <tr>
                                <th style="width:15%;">Name</th>
                                <th style="width:25%;">Address</th>
                                <th style="width:13%;">City</th>
                                <th style="width:5%;">State</th>
                                <th style="width:42%;"></th>
                            </tr>
                        </thead>
                        <tbody id="other-contacts"></tbody>
                    </table>
                </div>
            </div>
        </div>

Answer 2

对此可能有更好的解决方案，但是我能想到的一件事是为第二个表添加2个隐藏的标题列，以模仿第一个表，下面的html应该可以工作。另外，我将为每个<th>添加一个类（或id，但是类可能更好），并使css不内联。这也将帮助您在第一张和第二张表中重用th元素的类

<div class="right-panel">
  <div class="data-view" id="family-display">
    <h2>Selected Family Overview</h2>
    <div class="data-view__section hidden">
      <h3>Primary Account</h3>
      <table class="data-view__table">
        <thead>
          <tr>
            <th style="width:15%;">Name</th>
            <th style="width:25%;">Address</th>
            <th style="width:13%;">City</th>
            <th style="width:5%;">State</th>
            <th style="width:15%;">Phone</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody id="primary-contact"></tbody>
      </table>
    </div>
    <div class="data-view__section hidden">
      <h3>Other Contacts</h3>
      <table class="data-view__table">
        <thead>
          <tr>
            <th style="width:15%;">Name</th>
            <th style="width:25%;">Address</th>
            <th style="width:13%;">City</th>
            <th style="width:5%;">State</th>
            <th style="width:15%;"></th>
            <th></th>
          </tr>
        </thead>
        <tbody id="other-contacts"></tbody>
      </table>
    </div>
  </div>
</div>

Answer 3

表格中的单元格将填满整个宽度。如果您不喜欢空单元格，请使用<div>的{​​{1}}，它将保持所需的宽度。