Html 如何使表适合其父容器？_Html_Css

Html 如何使表适合其父容器？

html css

Html 如何使表适合其父容器？,html,css,Html,Css,我有一个扩展到其父容器之外的表。我怎样才能让它适应它的父母？我试着跟随，但遇到了问题，我的专栏没有排好。有人建议将块更改为行组，但现在我无法显示滚动条，即使我硬编码高度这是一把小提琴：还有HTML <body> <header id='header'> <br> <form id='reload' name="Actions" action="Viewer.php" method="post"> <di

我有一个扩展到其父容器之外的表。我怎样才能让它适应它的父母？我试着跟随，但遇到了问题，我的专栏没有排好。有人建议将块更改为行组，但现在我无法显示滚动条，即使我硬编码高度

这是一把小提琴：

还有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>




整数




全丁腈橡胶
类型
大小
修订
其他丁腈橡胶
片状丁腈橡胶
床单
框架丁腈橡胶
框架
文件标题
体积
笔记
Prnt
Obs
获取日期
来源
基本文件
Acc文件编号
公共子目录
SS1026
DD
A.
2.
10
10
1.
1.
挤压铝合金的啮合
89576
不
不
2004-07-15
DSCR
对
\CD卷
SS1026
DD
A.
2.
10
10
1.
1.
挤压铝合金的啮合
89576
不
不
2004-07-15
DSCR
对
\CD卷
SS1026
DD
A.
2.
10
10
1.
1.
挤压铝合金的啮合
89576
不
不
2004-07-15
DSCR
对
\CD卷
SS1026
DD
A.
2.
10
10
1.
1.
挤压铝合金的啮合
89576
不
不
2004-07-15
DSCR
对
\CD卷
SS1026
DD
A.
2.
10
10
1.
1.
挤压铝合金的啮合
89576
不
不
2004-07-15
DSCR
对
\CD卷
SS1026
DD
A.
2.
10
10
1.
1.
挤压铝合金的啮合
89576
不
不
2004-07-15
DSCR
对
\CD卷

我似乎找不到任何网页来解释为什么有时事情会扩大，以及它们决定不扩大的原因。我所看到的一切都是简单的解释，在现实世界中是行不通的。如果有人能推荐一些有用的搜索词，我将不胜感激。

表格单元格超出了您根据内容指定的大小。如果一个单词的宽度大于，比如说100px，除非您采取措施截断它，否则单元格将扩展到更宽单词的宽度。我建议您不要尝试为表格单元格设置像素宽度，而是让HTML表格像通常一样呈现。宽度以这种方式照顾自己。只要不将表格的任何部分更改为

display:block

，标题将始终与主体单元格对齐

创建滚动表主体不是一件容易的任务，但绝对是可能的。我在过去通过创建一个普通的表来解决这个问题（在表标记中的任何位置都没有

display:block

，事实上，如果没有内联CSS，这样做会更容易）。使用

overflow-y:scroll

将原始表格放入div中

然后，使用一些脚本，我创建了一个表头部分的克隆，并将其分层到scrolling 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>


谢谢你的帖子，杰夫。告诉我细胞自动膨胀是非常有用的。但这会引起一个问题。我们这里有一些用户并不特别精通计算机。如果列四处移动，它们可能（也将）很容易解释错误的数据，这将是一场支持噩梦。这就是硬编码尺寸的原因。我想创建一个HTLM页面，有几个原因；易于部署且与平台无关。如果无法将数据保留在同一位置（某些部分的数据如果未设置，会移动列），我将被迫将用户限制在windows计算机上，并放弃HTML应用程序。有什么评论吗？
.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
}