Problem with nested table columns not extending to full height of parent table

I'm currently facing an issue with my HTML table.

The nested table on the right does not occupy the full height of the main table.

Even if the content in the description column is short, I want the column to resize accordingly. I have tried various adjustments to the height attribute without success.

I suspect that the fulfillmentLine class might be the root cause of this problem. Could someone kindly explain why this is happening?

My desired outcome looks like this:

https://i.sstatic.net/aPV3z.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table</title>
    <style>
        .innerTable {
            padding: 0;
            font-size: 20px;
        }

        .orderLine {
            width: 130px;
            padding: 3px;
            border-left: 1px solid black;
            border-bottom: 1px solid black;
        }

        .fulfillmentLine {
            border-bottom: 1px solid black;
            border-left: 1px solid black;
        }

        .fulfillmentLine td {
            width: 50px;
            height: 100px;
            /* this */
            border-right: 1px solid black;
        }

        .orderLineEnd {
            border-left: 1px solid black;
        }


        .borderRight {
            border-right: 1px solid black;
        }

        .orderLineHeader {
            width: 130px;
            padding: 3px;
            border-left: 1px solid black;
            border-top: 1px solid black;
            border-bottom: 1px solid black;

        }

        .fulfillmentLineHeader {
            width: 130px;
            border-top: 1px solid black;
            border-left: 1px solid black;
            border-bottom: 1px solid black;
        }

        .fulfillmentLineHeader td {
            border-top: 1px solid black;
            border-right: 1px solid black;
            text-align: center;
            min-width: 45px;
        }

        .bottomBorder {
            width: 100%;
            height: 1px;
            border-top: 1px solid black;
        }

        .itemName {
            width: 300px;
        }
    </style>
</head>

<body>
    <table class="bodySection o" cellpadding="0" cellspacing="0" border="0">
        <tr class="orderHeaders">
            <td class="orderLineHeader">Description</td>
            <td class="fulfillmentLineHeader borderRight" align="center">
                <table cellspacing="0" cellpadding="0" class="innerTable" border="0">
                    <td class="borderRightThick">ABC </td>
                    <td class="borderRightThick lightGreyRow">ABC</td>
                    <td class="borderRightThick">ABC</td>
                </table>
            </td>
        </tr>

        <tr style="page-break-inside : avoid">
            <td class="orderLine itemName">Lorem ipsum loremLorem ipsum loremLorem ipsum Lorem ipsum loremLorem ipsum
                loremLorem ipsum loremLorem ipsum loremLorem ipsum loremLorem ipsum loremLorem ipsum loremloremLorem
                ipsum loremLorem ipsum lorem</b></td>
            <td class="fulfillmentLine borderRight">
                <table cellspacing="0" class="innerTable ">
                    <td></td>
                    <td></td>
                    <td></td>
                </table>
            </td>
        </tr>

    </table>
    </div>
    </table>
    <br />

</body>

</html>
htmlcss

Answer №1

Through experimentation, I discovered that setting the container (the < td >) to have position relative and the inner table to have position absolute resolved the issue. I made various tweaks along the way but ultimately found this solution to be effective.

To visually distinguish between the inner table and the container, I colored them gray and blue respectively. This helped me identify any remaining empty space, which fortunately there was none of. However, without using absolute positioning, the original problem persisted.

<style>
        
        .innerTable {
            padding: 0;
            font-size: 20px;
            
        }

        .orderLine {
            width: 130px;
            padding: 3px;
            border-left: 1px solid black;
            border-bottom: 1px solid black;
        }

        .fulfillmentLine {
            border-bottom: 1px solid black;
            border-left: 1px solid black;
        }

        .fulfillmentLine td {
            width: 50px;
            height: 100px;
            /* this */
            border-right: 1px solid black;
        }

        .orderLineEnd {
            border-left: 1px solid black;
        }


        .borderRight {
            border-right: 1px solid black;
        }

        .orderLineHeader {
            width: 130px;
            padding: 3px;
            border-left: 1px solid black;
            border-top: 1px solid black;
            border-bottom: 1px solid black;

        }

        .fulfillmentLineHeader {
            width: 130px;
            border-top: 1px solid black;
            border-left: 1px solid black;
            border-bottom: 1px solid black;
        }

        .fulfillmentLineHeader td {
            border-top: 1px solid black;
            border-right: 1px solid black;
            text-align: center;
            min-width: 45px;
        }

        .bottomBorder {
            width: 100%;
            height: 1px;
            border-top: 1px solid black;
        }

        .itemName {
            width: 300px;
        }
        
        * {
            padding:0px !important;
            margin:0px  !important;
        }
<body>
    <table class="bodySection o" cellpadding=0 cellspacing=0 border=0>
        <tr class="orderHeaders">
            <td class="orderLineHeader">Description</td>
            <td class="fulfillmentLineHeader borderRight" align="center">
                <table cellspacing=0 cellpadding=0 class="innerTable" border=0>
                    <td class="borderRightThick">ABC </td>
                    <td class="borderRightThick lightGreyRow">ABC</td>
                    <td class="borderRightThick">ABC</td>
                </table>
            </td>
        </tr>

        <tr style="page-break-inside : avoid">
            <td class="orderLine itemName">Lorem ipsum loremLorem ipsum loremLorem ipsum Lorem ipsum loremLorem ipsum
                loremLorem ipsum loremLorem ipsum loremLorem ipsum loremLorem ipsum loremLorem ipsum loremloremLorem
                ipsum loremLorem ipsum lorem</b></td>
            <td class="fulfillmentLine borderRight" style="background:blue; height:100%; position:relative;">
                <table cellspacing=0 cellpadding=0 class="innerTable" style="background:gainsboro; padding:0px; height:100%; position:absolute; left:0px; top:0px;">
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </table>
            </td>
        </tr>

    </table>
    </div>
    </table>
    <br />

</body>

</html>

If you prefer, you can apply the inline styles mentioned above directly to your classes for a similar effect.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Switch from scrolling the entire page to scrolling within a single div

Whenever I click on an element on my webpage, a modal window with a fixed position appears. The issue I am facing is that when I scroll using the mouse or touch gestures on my phone or tablet, the entire page scrolls instead of just the content within the ...

jqueryhtmlcssscroll

You cannot select the initial letter of an element

When using Chrome (Version 55.0.2883.87 m) (win 8.1), I noticed that text within an element with :first-letter cannot be entirely selected with mouse selection. Is there a way to address this issue without relying on javascript? div:first-letter{ tex ...

htmlcssgoogle-chrome

Using jQuery to hide an element when the script is invoked

I'm encountering an issue where I create a file containing HTML and JavaScript that is loaded later via AJAX. One of the files should hide an element after it is loaded, but for some reason, it is not working. I have tried various methods to hide the ...

javascriptjqueryhtml

One source of HTML content for a div element across multiple webpages

Could you please provide guidance on where to start investigating or researching for this issue? I am interested in having a single source for the content of a <div>, which can be used across multiple pages. This way, I can update one source and hav ...

jqueryhtml

Issue: The value of an object is not defined (evaluating '$scope.inputcode.password')

HTML Form: <form ng-submit="mylogin()"> <div class="list"> <label class="item item-input"> <span class="input-label">Username</span> <input type="text" ng-model="inputcode.username"> ...

javascripthtmlangularjsionic-framework

Reliably analyzing text to generate unprocessed HTML content

My input text in a textarea is structured like this: This is some sample text./r/n /r/n This is some more sample text. I want to format it for display as follows: <p>Here's some text.</p> <p>Here's some more text.</p> ...

javascripthtmlnode.js

Ensuring the alignment of a personalized list bullet with the accompanying text

Looking to make the bullet point next to an li element larger? The common approach is to eliminate the standard point, add a custom one using the :before selector, and adjust the font size of the added point. While this technique somewhat achieves the goa ...

htmlcsshtml-lists

Develop a MySQL table using AJAX and HTML within a Cordova application

I've been developing an app using Cordova and I'm looking to create a feature where users can create and join different rooms to perform various actions. Despite trying multiple tutorials and scouring the internet, I'm struggling to understa ...

phphtmlmysqlajaxcordova

Issue with image preview functionality in dialog modal when loading content via ajax request

<table id="result"> <a href='#' class='pop'><span class='fa fa-eye'><img src='image link here' style='display:none'></a> </table> The hyperlink above is designed to open ...

phphtmlajax

Prevent automatic scrolling to the top of the page after submitting a form. Remain at the current position on the

After submitting a form, I want to prevent the page from automatically scrolling back up. How can I keep the same position on the page after form submission? <script type="text/javascript"> var frm = $('#form'); frm.submit(function ...

javascriptphpjqueryhtmlajax

"Applying CSS styles to highlighted text using jQuery - how can I do it

Struggling to style selected text with CSS? Here's what I've tried so far without success in Firefox. $(document).keyup(function(){ savedRange = selection.getRangeAt(0); $(savedRange).wrap('<span style="color:red"></span>' ...

javascriptjquerycss

Is it possible to have one div layer on top of another?

On my website, I have a line of text that is revealed when a dropdown arrow is clicked. However, there are certain pages where the divs extend beyond this single line of hidden text. For example: https://i.sstatic.net/2a6YB.png I need the green div (nor ...

htmlcss

Choose from an array of over 50,000 row options

I am currently facing an issue with my database which contains approximately 50,000 records, all related to business partners. Currently, I am using the following code: <select name="selection"> -- some while loop <option></option> (thi ...

htmlmysqlhtml-select

What is the best way to categorize items in Angular lists based on their type

Lately, I've been delving into Angular and I'm facing a challenge - I want to split a list into two based on their type and display them in separate fields. My main query is: can I achieve this by using a for loop in the .ts file, or is there a s ...

htmlangulartypescript

The motion defined in the CSS keyframes is failing to animate as expected

http://plnkr.co/edit/46U9HFEJ3bWoYnvmeulY?p=preview I am trying to create a keyframes animation in the plnkr above that will make links move from left to right with an opacity change on load. However, I am facing an issue where only the opacity change is ...

htmlcsscss-animations

The video link was not found during the page scraping process

I'm trying to download a video from the page below: After inspecting with Firebug, I found the video url, <video src="https://09-lvl3-pdl.vimeocdn.com/01/1449/2/57246728/138634997.mp4?expires=1457996449&amp;token=089e435c20e7781d36fce" preloa ...

pythonhtmlseleniumvideoweb-scraping

Having trouble with Firefox not displaying the image source with an absolute path

ASP.NET Application I am experiencing some confusion with displaying images. While Internet Explorer shows the images correctly, Firefox is not showing them on the production server. The image url generated on the server is: \chartings\charts& ...

htmlpathimageabsolute

What is the process for defining a date range in HTML5?

I am currently working on a wedding website and I am trying to set up a countdown for the wedding date. However, I am having trouble figuring out how to correctly display the countdown. https://i.sstatic.net/iGikh.png Here is the code snippet that I am u ...

htmltwitter-bootstrap

Emphasize the CSS property and give it top priority

I am struggling with setting the highest priority for the background of the <h1> element. Specifically, I want the background color specified for the <h1> to show instead of what is specified for the <a> element. h1{ background-color:b ...

htmlcss

Overlaying images responsively on top of each other

I have successfully achieved the result of displaying an image over another image using the following code: <div class="row"> <div class="col-lg-6 col-md-6 col-sm-12"> <div class="image-with-overlay"> <div clas ...

htmlcsstwitter-bootstrapresponsive-design