Question

我有一个超出其父容器的表。我怎样才能让它适合其父母？我尝试跟踪http://www.imaputz.com/cssStuff/bigFourVersion.html，但遇到问题，我的列没有排队。有人建议将块更改为行组，但现在即使我对高度进行硬编码，也无法显示滚动条。

这是一个小提琴：http://jsfiddle.net/bwdc78tr/1/

和HTML

<body>

<header id='header'>

    <br>
    <form id='reload' name="Actions" action="Viewer.php" method="post">
        <div id='LookupSection'>
            Whole Number

            <input type="text" id='WholeNumber' name="WholeNumber" title="Enter the whole number here">
            <img id='dropDownButton' src="Images/ComboDropdown.png" title="Click to drop down a partial whole number list based on the current entry" onclick="toggleDropdown()"/>

            <div id='WholeNumberDiv'>
                <table id='wholeNumberDropdown'>
                </table>
            </div>

        </div>
    </form>

</header>

<div id="sidebar">
    <a href="" onclick="window.location.reload();">Clear</a><br>
    <a href="" onclick="gatherImages();">Gather Images</a><br>
</div>

<div id="content">

<Table id="ImageDataTable">
    <thead>
        <tr style="position:relative;display:block">
                    <th class='ImageDataCell' style="width:200px;">Whole Nbr</div>
                    <th class='ImageDataCell' style="width:50px;">Type</th>
                    <th class='ImageDataCell' style="width:50px;">Size</th>
                    <th class='ImageDataCell' style="width:100px;">Revision</th>
                    <th class='ImageDataCell' style="width:100px;">Other Nbr</th>
                    <th class='ImageDataCell' style="width:50px;">Sheet Nbr</th>
                    <th class='ImageDataCell' style="width:50px;">Of Sheets</th>
                    <th class='ImageDataCell' style="width:50px;">Frame Nbr</th>
                    <th class='ImageDataCell' style="width:50px;">Of Frames</th>
                    <th class='ImageDataCell' style="width:250px;">Doc Title</th>
                    <th class='ImageDataCell' style="width:100px;">Volume</th>
                    <th class='ImageDataCell' style="width:50px;">Note</th>
                    <th class='ImageDataCell' style="width:50px;">Prnt</th>
                    <th class='ImageDataCell' style="width:50px;">Obs</th>
                    <th class='ImageDataCell' style="width:100px;">Acquire Date</th>
                    <th class='ImageDataCell' style="width:150px;">Source</th>
                    <th class='ImageDataCell' style="width:100px;">Base Doc</th>
                    <th class='ImageDataCell' style="width:100px;">Acc Doc Nbr</th>
                    <th class='ImageDataCell' style="width:100px;">CommonSubDirectory</th>
        </tr>
    </thead>
    <tbody style="display:block;overflow:auto">

<tr>

<td class="ImageDataCell" width="200px">

    SS1026

</td>
<td class="ImageDataCell" width="50px">

    DD

</td>
<td class="ImageDataCell" width="50px">

    A

</td>
<td class="ImageDataCell" width="100px">

    2

</td>
<td class="ImageDataCell" width="100px"></td>
<td class="ImageDataCell" width="50px">

    10

</td>
<td class="ImageDataCell" width="50px">

    10

</td>
<td class="ImageDataCell" width="50px">

    1

</td>
<td class="ImageDataCell" width="50px">

    1

</td>
<td class="ImageDataCell" width="250px">

    JOGGLING OF ALUMINUM ALLOY EXTRUDED

</td>
<td class="ImageDataCell" width="100px">

    89576

</td>
<td class="ImageDataCell" width="50px"></td>
<td class="ImageDataCell" width="50px">

    No

</td>
<td class="ImageDataCell" width="50px">

    No

</td>
<td class="ImageDataCell" width="100px">

    2004-07-15

</td>
<td class="ImageDataCell" width="150px">

    DSCR

</td>
<td class="ImageDataCell" width="100px">

    Yes

</td>
<td class="ImageDataCell" width="100px"></td>
<td class="ImageDataCell" width="100px">

    \CDVolumes

</td>

</tr>            
<tr>

<td class="ImageDataCell" width="200px">

    SS1026

</td>
<td class="ImageDataCell" width="50px">

    DD

</td>
<td class="ImageDataCell" width="50px">

    A

</td>
<td class="ImageDataCell" width="100px">

    2

</td>
<td class="ImageDataCell" width="100px"></td>
<td class="ImageDataCell" width="50px">

    10

</td>
<td class="ImageDataCell" width="50px">

    10

</td>
<td class="ImageDataCell" width="50px">

    1

</td>
<td class="ImageDataCell" width="50px">

    1

</td>
<td class="ImageDataCell" width="250px">

    JOGGLING OF ALUMINUM ALLOY EXTRUDED

</td>
<td class="ImageDataCell" width="100px">

    89576

</td>
<td class="ImageDataCell" width="50px"></td>
<td class="ImageDataCell" width="50px">

    No

</td>
<td class="ImageDataCell" width="50px">

    No

</td>
<td class="ImageDataCell" width="100px">

    2004-07-15

</td>
<td class="ImageDataCell" width="150px">

    DSCR

</td>
<td class="ImageDataCell" width="100px">

    Yes

</td>
<td class="ImageDataCell" width="100px"></td>
<td class="ImageDataCell" width="100px">

    \CDVolumes

</td>

</tr><tr>

<td class="ImageDataCell" width="200px">

    SS1026

</td>
<td class="ImageDataCell" width="50px">

    DD

</td>
<td class="ImageDataCell" width="50px">

    A

</td>
<td class="ImageDataCell" width="100px">

    2

</td>
<td class="ImageDataCell" width="100px"></td>
<td class="ImageDataCell" width="50px">

    10

</td>
<td class="ImageDataCell" width="50px">

    10

</td>
<td class="ImageDataCell" width="50px">

    1

</td>
<td class="ImageDataCell" width="50px">

    1

</td>
<td class="ImageDataCell" width="250px">

    JOGGLING OF ALUMINUM ALLOY EXTRUDED

</td>
<td class="ImageDataCell" width="100px">

    89576

</td>
<td class="ImageDataCell" width="50px"></td>
<td class="ImageDataCell" width="50px">

    No

</td>
<td class="ImageDataCell" width="50px">

    No

</td>
<td class="ImageDataCell" width="100px">

    2004-07-15

</td>
<td class="ImageDataCell" width="150px">

    DSCR

</td>
<td class="ImageDataCell" width="100px">

    Yes

</td>
<td class="ImageDataCell" width="100px"></td>
<td class="ImageDataCell" width="100px">

    \CDVolumes

</td>

</tr><tr>

<td class="ImageDataCell" width="200px">

    SS1026

</td>
<td class="ImageDataCell" width="50px">

    DD

</td>
<td class="ImageDataCell" width="50px">

    A

</td>
<td class="ImageDataCell" width="100px">

    2

</td>
<td class="ImageDataCell" width="100px"></td>
<td class="ImageDataCell" width="50px">

    10

</td>
<td class="ImageDataCell" width="50px">

    10

</td>
<td class="ImageDataCell" width="50px">

    1

</td>
<td class="ImageDataCell" width="50px">

    1

</td>
<td class="ImageDataCell" width="250px">

    JOGGLING OF ALUMINUM ALLOY EXTRUDED

</td>
<td class="ImageDataCell" width="100px">

    89576

</td>
<td class="ImageDataCell" width="50px"></td>
<td class="ImageDataCell" width="50px">

    No

</td>
<td class="ImageDataCell" width="50px">

    No

</td>
<td class="ImageDataCell" width="100px">

    2004-07-15

</td>
<td class="ImageDataCell" width="150px">

    DSCR

</td>
<td class="ImageDataCell" width="100px">

    Yes

</td>
<td class="ImageDataCell" width="100px"></td>
<td class="ImageDataCell" width="100px">

    \CDVolumes

</td>

</tr><tr>

<td class="ImageDataCell" width="200px">

    SS1026

</td>
<td class="ImageDataCell" width="50px">

    DD

</td>
<td class="ImageDataCell" width="50px">

    A

</td>
<td class="ImageDataCell" width="100px">

    2

</td>
<td class="ImageDataCell" width="100px"></td>
<td class="ImageDataCell" width="50px">

    10

</td>
<td class="ImageDataCell" width="50px">

    10

</td>
<td class="ImageDataCell" width="50px">

    1

</td>
<td class="ImageDataCell" width="50px">

    1

</td>
<td class="ImageDataCell" width="250px">

    JOGGLING OF ALUMINUM ALLOY EXTRUDED

</td>
<td class="ImageDataCell" width="100px">

    89576

</td>
<td class="ImageDataCell" width="50px"></td>
<td class="ImageDataCell" width="50px">

    No

</td>
<td class="ImageDataCell" width="50px">

    No

</td>
<td class="ImageDataCell" width="100px">

    2004-07-15

</td>
<td class="ImageDataCell" width="150px">

    DSCR

</td>
<td class="ImageDataCell" width="100px">

    Yes

</td>
<td class="ImageDataCell" width="100px"></td>
<td class="ImageDataCell" width="100px">

    \CDVolumes

</td>

</tr><tr>

<td class="ImageDataCell" width="200px">

    SS1026

</td>
<td class="ImageDataCell" width="50px">

    DD

</td>
<td class="ImageDataCell" width="50px">

    A

</td>
<td class="ImageDataCell" width="100px">

    2

</td>
<td class="ImageDataCell" width="100px"></td>
<td class="ImageDataCell" width="50px">

    10

</td>
<td class="ImageDataCell" width="50px">

    10

</td>
<td class="ImageDataCell" width="50px">

    1

</td>
<td class="ImageDataCell" width="50px">

    1

</td>
<td class="ImageDataCell" width="250px">

    JOGGLING OF ALUMINUM ALLOY EXTRUDED

</td>
<td class="ImageDataCell" width="100px">

    89576

</td>
<td class="ImageDataCell" width="50px"></td>
<td class="ImageDataCell" width="50px">

    No

</td>
<td class="ImageDataCell" width="50px">

    No

</td>
<td class="ImageDataCell" width="100px">

    2004-07-15

</td>
<td class="ImageDataCell" width="150px">

    DSCR

</td>
<td class="ImageDataCell" width="100px">

    Yes

</td>
<td class="ImageDataCell" width="100px"></td>
<td class="ImageDataCell" width="100px">

    \CDVolumes

</td>

</tr>            
    </tbody>

    </Table>

</div>

<footer>

    <br>
</footer>

</body>
</html>

我似乎无法找到任何网页来解释为什么有时会扩展以及何时决定不这样做。我所看到的一切都是简单的解释，在现实世界中并不适用。如果有人能提出可能有帮助的好搜索条件，我会很感激。

Answer 1

表单元格扩展超出了您根据内容指定的大小。如果单个单词比100px宽，则单元格将扩展为宽单词的宽度，除非您采取措施截断它。我建议您不要尝试为表格单元格强加像素宽度，而是让HTML表格像通常那样渲染。宽度以这种方式照顾自己。只要您不将表格的任何部分更改为display:block，标题将始终与正文细胞对齐。

创建滚动表体并不是一件容易的事，但绝对可以。我过去通过创建一个普通表（在表标记中的任何地方都没有display:block来解决这个问题，实际上没有内联CSS会更容易做到这一点）。将原始表放在带overflow-y:scroll的div中。

然后，使用一些脚本，我创建了表的标题部分的克隆，并将其分层在滚动DIV的顶部。（您需要为克隆表添加一些右边距，以便考虑垂直滚动条的宽度）。最后，我将整个组合放在一个带有overflow-x:scroll的DIV中，这样如果表格太宽而不能显示，它可以水平滚动。

这可以通过更改表格的组件自然显示模式而愚弄。如果您离开表来管理它自己的列大小，它还可以更容易地适应浏览器调整大小等，特别是如果您将表及其克隆的标题与colgroup组合以设置百分比列宽。尽量不要将内联CSS应用于您的单个表格单元格，因为它将成为管理的噩梦。

所以在概念上，HTML看起来像这样：

<div class="tableouter">
  <div class="tableinner">
    <table>
      <colgroup>
        <col style="10%"></col> <--- repeat for each column and adjust width to taste
      </colgroup>
      <thead>
        ...
      </thead>
      <tbody>
        ...
      </tbody>
    </table>
  </div>
  <table class="headerclone" /> (clone of header portion, including colgroup)
</div>

和基本的CSS：

.tableouter {
  position: relative;
  overflow-x:scroll;
}

.headerclone {
  position: absolute;
  top: 0;
  left: 0;
  margin-right: 16px;  <-- This accounts for the vertical scroll bar.  I needed to use some script to determine the exact size of the scrollbar for each browser.  Apply this value as inline CSS in your cloning script.
}

.tableinner {
  height: 400px;  <-- this determines the height of the scrolling container.
  overlfow-y: scroll
}

现在这掩盖了相当多的细节...为了使您的克隆脚本更可靠，您可能需要测量实际列的宽度，而是在克隆的colgroup中应用显式像素宽度。然后，如果浏览器调整大小等，您可能希望放置一个观察者来调整克隆列的大小等。

如何使表适合其父容器？

1 个答案: