The table contained within a row-spanning cell fails to fully occupy the cell's height across different browsers

Chrome rendering and code issue

I'm struggling to understand why the nested table (highlighted in red) is not taking up the full height of the outer table cell (highlighted in green) which spans 8 rows. This used to work fine, but newer browsers are causing issues with the nested table not expanding to full height. Interestingly, IE11 with compatibility view still displays it correctly. What adjustments should I make to the code? Adding height="100%" to the table element doesn't solve the problem.

Code:

    <tr>
      <td class="NameColumnCaption" valign="top" bgcolor="#c0c0c0" style="height: 19px;">11:00</td>
      <td class="weekdetails" bgcolor="#f0f0f0" rowspan="8" colspan="10" style="cursor:pointer" ondblclick="modifyMeeting(&quot;212&amp;dispUser=Janice%20Elland&amp;globObjID=&quot;, 9);" onclick="detailview(&quot;oneweek.asp?Q=Janice%20Elland&amp;D=-4&quot;);hN(33);" onmousemove="sN(33)" onmouseout="hN(33)">
        <table class="tdnor" width="100%" id="tbl" cellspacing="0" cellpadding="3" bgcolor="white">
          <tbody>
            <tr>
              <td width="5" bgcolor="#99ccff" style="height: 19px;"><img src="b1.gif" width="2px" height="10px" border="0"></td>
              <td class="WeekDetails" valign="top" style="height: 19px;">
                <font color="#0000cc">11:15-15:15</font><br>
                <font color="#000000">Supplier Meeting</font> (Lancashire) Janice Elland<br>
                <table width="100%" border="0" cellpadding="0" cellspacing="0"></table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
      <td valign="top" class="WeekDetails" bgcolor="#f0f0f0" colspan="10" onmousemove="sN(0)" onmouseout="hN(0)" onclick="Meeting2(&quot;&amp;D=-2&quot;,&quot;11&quot;,&quot;Janice%20Elland&quot;);" style="height: 19px;"></td>
      <td valign="top" class="WeekDetails" bgcolor="#f0f0f0" colspan="10" onmousemove="sN(0)" onmouseout="hN(0)" onclick="Meeting2(&quot;&amp;D=-1&quot;,&quot;11&quot;,&quot;Janice%20Elland&quot;);" style="height: 19px;"></td>
      <td valign="top" class="WeekDetails" bgcolor="#95cc68" colspan="10" onmousemove="sN(0)" onmouseout="hN(0)" onclick="Meeting2(&quot;&amp;D=0&quot;,&quot;11&quot;,&quot;Janice%20Elland&quot;);" style="height: 19px;"></td>
      <td class="NameColumnCaption" valign="top" bgcolor="#c0c0c0" style="height: 19px;">11:00</td>
    </tr>

Attempted fix by adding a div and setting table-layout: fixed: screenshot

    <tr>
      <td class="NameColumnCaption" valign="top" bgcolor="#c0c0c0" style="height: 19px;">11:00</td>
      <td class="weekdetails" bgcolor="#f0f0f0" rowspan="8" colspan="10" style="cursor:pointer" ondblclick="modifyMeeting(&quot;212&amp;dispUser=Janice%20Elland&amp;globObjID=&quot;, 9);" onclick="detailview(&quot;oneweek.asp?Q=Janice%20Elland&amp;D=-5&quot;);hN(33);" onmousemove="sN(33)" onmouseout="hN(33)">
        <div style="height: 100%; min-height: 70px;">
          <table width="100%" id="tbl" cellspacing="0" style="table-layout: fixed;border:1px solid #404040;" cellpadding="3" bgcolor="white">
            <tbody>
              <tr>
                <td width="5" bgcolor="#99ccff" style="height: 19px;"><img src="b1.gif" width="2px" height="10px" border="0"></td>
                <td class="WeekDetails" valign="top" style="height: 19px;">
                  <font color="#0000cc">11:15-15:15</font><br>
                  <font color="#000000">Supplier Meeting</font> (Lancashire) Janice Elland<br>
                  <table width="100%" border="0" cellpadding="0" cellspacing="0"></table>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </td>
      <td valign="top" class="WeekDetails" bgcolor="#f0f0f0" colspan="10" onmousemove="sN(0)" onmouseout="hN(0)" onclick="Meeting2(&quot;&amp;D=-3&quot;,&quot;11&quot;,&quot;Janice%20Elland&quot;);" style="height: 19px;"></td>
      <td valign="top" class="WeekDetails" bgcolor="#f0f0f0" colspan="10" onmousemove="sN(0)" onmouseout="hN(0)" onclick="Meeting2(&quot;&amp;D=-2&quot;,&quot;11&quot;,&quot;Janice%20Elland&quot;);" style="height: 19px;"></td>
      <td valign="top" class="WeekDetails" bgcolor="#f0f0f0" colspan="10" onmousemove="sN(0)" onmouseout="hN(0)" onclick="Meeting2(&quot;&amp;D=-1&quot;,&quot;11&quot;,&quot;Janice%20Elland&quot;);" style="height: 19px;"></td>
      <td class="NameColumnCaption" valign="top" bgcolor="#c0c0c0" style="height: 19px;">11:00</td>
    </tr>
htmlcss

Answer №1

Latest Update

To address the issue of nested tables not expanding to full height, I created a new table to demonstrate the problem clearly. The original fiddle provided by OP was too cluttered, but it highlighted the underlying issue. In cases where a td with rowspan="8" only contains a table that is 2 rows high instead of 8, adjustments need to be made.

Key points to remember:

(In this example, the .parent refers to the td holding the nested table.)

  • Add min-height: 100% and min-width: 100%; to the .parent element.
  • Comment out subsequent td elements under the .parent up to its total rowspan - 1.
    • For instance, with 
      <td class="parent" rowspan="5"...>
    • If .parent occupies first column / third row, comment out the next 4 td in succession:
      1. first column / forth row
      2. first column / fifth row
      3. first column / sixth row
      4. first column / seventh row
  • When constructing the nested table:
    • Create as many <tr>s as specified by .parent's rowspan
    • Allocate an equal number of columns for each <tr>
    • Omit using tbody

The demo includes comments indicating the necessary adjustments to achieve the desired outcome. It's important to fine-tune certain attributes such as padding and width accordingly.

Check out the demonstration here

Initial Update

If dealing with a nested table situation, consider the following:

<table style="table-layout: fixed; display: inline-table"....>

Opt for either:

  • Using a .css file or <style> block
    • Include table {table-layout: fixed;}

OR

  • Inline styling 
    • <table style="table-layout: fixed; ....>

In some cases, inserting a div inside a cell with increased height can help expand the table vertically.

<td>
 <div style="height: 100%; min-height: 70px;">
      "Cell Content"
 </div>
 </td>

If modifying HTML dynamically is challenging due to code generation, there are ways to programmatically adjust elements after loading. Feel free to seek assistance if needed.

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

Adding a hyperlink to each table cell (td) in HTML and CSS that is visible outside of the table

In my table, there is a link on every td. I want these links to appear outside the table. Although I have achieved this, the first cell that was created needs to be hidden. When I try to hide the td using CSS, the link also disappears. Here is the HTML: ...

htmlcss

Leveraging python's BeautifulSoup library, one can easily implement HTML selection

Recently, I've started diving into Automate the Boring Stuff and exploring how to create my own programs. Currently, I'm experimenting with beautiful soup's 'select' method in order to extract the value '33' from this cod ...

pythonhtmlcssbeautifulsoup

Creating a Dynamic List in JQuery Fancy Box for an iframe

I am new to using JQuery and I have a table with a checkbox. When the checkbox is clicked, I want a dynamic list to appear in a pop-up window. I've been having trouble implementing this. <html> <head> <label align="center">Select a ...

jqueryhtmljquery-uifancybox

The background color of the div or section is stubbornly refusing to change, no matter how much I tweak it

.forBackground { background-color: white; } .kontaktUndMapContainer { width: 100%; padding: 20px; color: gray; text-align: center; } .überschriftKontakt { margin-bottom: 20px; } .überschriftKontakt2 { margin-top: 20px; margin-bottom: 2 ...

htmlcssfrontendmobile-website

Incorporate Multiple Choice Queries into your PHP Online Form

My PHP web form consists of text fields, dropdowns, and radio buttons. When submitted, the information is sent to me via email. I am trying to implement a multiple choice question with checkboxes. Although I can create the form field, I'm struggling t ...

phphtmlforms

Adjust ChartJS yAxes "tick marks"

I'm having trouble adjusting the scales on my yAxes and all the information I find seems to be outdated. My goal is to set my yAxes range from 0 to 100 with steps of 25. Check out this link yAxes: [ { ...

javascripthtmlcsschart.js

Capybara - Navigating a page by clicking on a link related to another value

I'm currently facing a challenge in locating and selecting a particular link on a web page. All links within an HTML table contain the term 'Edit' (it's a link for editing configuration settings). However, the exact link changes depend ...

htmlcssxpathhyperlinkcapybara

When I apply a percentage to the height of a div element, it shrinks down to a height

I have several lists with a flex layout. Each column contains 3 list items, and the flex-basis is set to one-third. Within each li element, there is a div for a background image and another div to display text, which should be positioned below the image. ...

htmlcssflexbox

Retrieve hyperlinks from webpage

Currently, I am attempting to extract all Netflix movie/show links from this source , along with their respective country names. For example, I aim to retrieve information such as , USA, etc. Despite my efforts so far, the current code retrieves all links ...

pythonhtml

Is there a way to add text to HTML code using CKEditor?

I incorporate CKEditor into my website. When I click on a specific link, it adds some text to the editor successfully. However, when I switch to the source tab, I am unable to append this text to the existing source code. Can anyone offer guidance on h ...

javascripthtmlckeditorfckeditor

When using ContentEditable in Firefox, it generates double line breaks instead of a single one

Noticed an interesting issue with div contenteditable where Firefox is interpreting 1 newline as 2 newlines. Is this a bug or am I overlooking something? Test it out in the example below by typing: Hello World within the contenteditable. When accessi ...

htmlfirefoxcontenteditable

The command 'source-highlight' is not a recognized internal or external command

Recently, I delved into the world of asciidoc and decided to create an example in Python. However, every time I attempt to display a code blog in HTML, I encounter an exception that says 'source-highlight' is not recognized as an internal or exte ...

pythonhtmlasciidoc

Html elements overlapping due to incorrect positioning

I'm having an issue with my div elements on a web page. Despite them being set up separately, they all end up positioned underneath the first div created (SiteFullControl). Is there any solution to prevent this from happening? <div id="SiteFullCo ...

csshtml

Flexbox mystery: How come the entire div isn't displayed when the element below it is hidden?

I am in need of a versatile column layout where multiple widgets are stacked vertically, adjusting their size dynamically. Each widget consists of a title and scrollable content. The last widget should have the ability to collapse when its title is clicked ...

cssflexbox

Retrieve the value of a dynamically generated input element within a form object

I'm trying to figure out how to reference a dynamic 'name' of an input element in a form. Can anyone help? Here's an example using HTML: <form> <input type="text" name="qty1" value="input1" /> <input type="text ...

javascripthtmlforms

Choose an image to be displayed at either full width or full height, depending on which dimension is reached first

I have a query regarding resizing an image within a div to either 100% width or 100% height of the containing div. Despite setting max-height and max-width to 100% as recommended here, I still encounter overflow issues without wanting to crop the image usi ...

javascriptcssimage

Firefox experiencing trouble handling flexbox overflow

Having some trouble with a test project that involves using flexbox. The task at hand is to create a dashboard with multiple lists of cards arranged side-by-side with infinite overflow. I was able to achieve this layout, however, the issue arises when eac ...

htmlcssangularjsfirefoxflexbox

Pressing the reset button will initiate once the loader has finished

Hello everyone, I'm currently working on creating a button that transforms into a loader when submitted and then reverts back to a button after the form is successfully submitted. I suspect the issue lies within my JavaScript. I'm not sure how ...

javascripthtmlcss

Generate a new object from the contents of a div

Having the HTML structure below: <div id="main"> <div id="myDiv1"> <ul> <li>Abc</li> <li>Def</li> </ul> </div> <div id="myDiv2"> <ul> <li>Ghi</l ...

javascriptjqueryhtml

Creating a div element with a fixed size that remains the same regardless of its content

Check out the code snippet below for displaying an image and title: <div id="eventsCollapsed" class="panel-collapse collapse" ng-controller="videoController"> <div class="panel-body"> <div ...

cssangularjstwitter-bootstraptwitter-bootstrap-3