How do I get a table according to its parent container?

Question

How do I get a table according to its parent container?

I have a table that is outside of the parent container. How can I get it to fit inside its parent? I tried following http://www.imaputz.com/cssStuff/bigFourVersion.html but ran into problems where my columns were not lining up. Someone suggested changing the block to a group of lines, but now I can't get the scrollbars to appear even if I hardcode the height.

Here's the script: http://jsfiddle.net/bwdc78tr/1/

And 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>

I can't find any web pages explaining why things sometimes expand and when they decide not to. All I've seen are simple explanations that don't work in real life situations. If anyone can suggest good search terms that might help, I would appreciate it.

0

html css

Joe June 26. 15 at 19:27

source to share

1 answer

Jeff Clarke · Answer 1 · 2015-06-26T19:51:19+0000

Table cells expand beyond the size you specified based on the content. If one word is wider, for example 100px, the cell will expand to the width of the wider word unless you take action to truncate it. I would suggest instead not trying to enforce pixel widths on your table cells, but instead letting HTML tables render as they normally do. Bread takes care of itself in this way. As long as you don't change any part of the table to display:block

, the headers are always aligned with the body cells.

To create a scroll body is not an easy task, but it is definitely possible. I've solved this in the past by creating a regular table (no display:block

table markup anywhere, in fact it will be easier to do without inline CSS). Place your original table in a div with overflow-y:scroll

.

Then, using some script, I created a clone of the table header part and overlaid it on top of the scrolling DIV. (you will need to add a right margin to the cloned table to account for the width of the vertical scrollbar). Finally, I put the entire composition inside the DIV with a overflow-x:scroll

so that if the table is too wide to display, it can scroll horizontally.

This cheats by changing the natural display mode of the table components. It also makes it easier to accommodate the browser size, etc., if you leave the table to control its column sizes, especially if you combine the table and its cloned header with a colgroup to set the column widths as a percentage. Try not to apply inline CSS to your individual table cells, as this becomes a management nightmare.

So, in concept, HTML looks like this:

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

and basic 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
}

Now this will mask quite a lot of little things ... to make your cloning script more robust, you can measure the widths of your actual columns and apply the explicit pixel widths in the clone instead colgroup

. Then you might want the observer to resize the clone columns if the browser is resized, etc. Etc.

How do I get a table according to its parent container?

More articles: