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

jquery fails to alter label:before

I have encountered a peculiar issue with jQuery and labels. It's quite strange because everything seems to work fine when I change the background color of a label or its font-weight, but using the :before selector doesn't seem to work. Any thoug ...

jquerycsslabel

Is it possible to convert the text.json file into a jQuery animation?

Looking to extract information from text.json and integrate it with my jquery.animation(). My goal is similar to the one demonstrated here. Instead of using "data" attributes like in that example, I want to parse the text based on the "ID" property as a k ...

javascriptjqueryhtmlcssjson

How can I integrate custom PHP pages into Odoo Community 12?

I am looking for a way to integrate my custom PHP webpages with the login page of Odoo Community that is already set up and functioning on my server. I want specific users to be redirected to my custom pages after logging in. Any suggestions on how to ac ...

javascriptphphtmlcssodoo-12

Unveiling the search bar as it expands horizontally from the center, causing the submit button to slide to adjust

Wishes and Aspirations My goal is to design an .input-group with one input[type=text] and one button[type=button]. Initially, the text box should be hidden, leaving only the button visible at the center of the page. Upon activation, the text box should ...

jqueryhtmlcssjquery-animatebootstrap-4

Set the size of the website to remain constant

Is it possible to keep your website at a consistent size so that when viewed on a larger screen, it simply adds more background or space to the page? (I prefer not to use media queries to change the style as the screen size increases) ...

htmlcss

Matching an apostrophe in an AutoHotkey script using regex

My autohotkey script is designed to search for a word in a bilingual dictionary when I double click on any word within a webpage. However, I am facing an issue where the script also copies the characters preceding the apostrophe when clicking on words like ...

htmlregexescapingautohotkeyapostrophe

``In JavaScript, the ternary conditional operator is a useful

I am looking to implement the following logic using a JavaScript ternary operation. Do you think it's feasible? condition1 ? console.log("condition1 pass") : condition2 ? console.log("condition2 pass") : console.log("It is different"); ...

javascriptjqueryhtml

Developing an IF statement in JavaScript that relies on hexadecimal color values

I've created a JavaScript code that changes the background color of my webpage every time it loads: document.getElementById("band").style.background = '#'+(Math.random()*0xFFFFFF<<0).toString(16); To improve visibility, I am aiming t ...

javascripthtml

What is the best way to adjust the placement of images and text within bootstrap 5's HTML code?

Hey everyone, I'm new to using bootstrap 5 and I've come across a little issue. If you take a look at this image https://i.sstatic.net/777BS.jpg In my webpage, the Google icon and all the text are currently aligned to the left, just like in th ...

htmlbootstrap-4bootstrap-5

What is the process for including body text in a Bootstrap tooltip?

I am attempting to enhance a Bootstrap tooltip by adding body text, as it typically only includes a basic title. After reviewing the Bootstrap 5 documentation, it seems that the simplest approach is to utilize the template option: template Base HTML used ...

javascripthtmlcssbootstrap-5twitter-bootstrap-tooltip

The JQuery loading symbol does not prevent keyboard interactions

I successfully implemented a Jquery busy indicator in my application using the following link: However, I noticed that even though it prevents users from clicking on input elements while loading, I can still navigate to these elements by pressing the tab ...

javascriptjqueryhtmlcssangularjs

Personalized scroll bar within a Chrome application

I'm currently working on customizing the scrollbar for my Chrome App using CSS and I have encountered an issue with rule #2: section { overflow: auto } section::-webkit-scrollbar { width: 5px ; } Oddly enough, when I apply the second rule, Chrom ...

cssgoogle-chromescrollbargoogle-chrome-appblink

Choosing a specific column in an HTML table using jQuery based on the text within it

I have a table with a similar structure as shown below: <table> <c:forEach ...> <tr> <td>test</td> // this is the initial value <td>random value</td> <td>random value</td&g ...

javascriptjqueryhtml

Chrome scrolling causing Webkit mask to shift position

I have successfully created a rounded Google map after much effort. Here is the link to the JSFiddle: http://jsfiddle.net/DZTvR/13/ However, I encountered an issue in Chrome where the mask remains static while scrolling, unlike other browsers like FF, Op ...

htmlcssgoogle-chromewebkit

The text displayed on the image is experiencing fluctuations

I am experiencing an issue on my website where the post text fluctuates rapidly when the mouse hovers over the image. I have a site where I display the post text on mouseover of the image. Can someone please help me solve this problem? You can test it by ...

htmlcsswordpress

Rearranging the order of Div elements within a main container using JavaScript DOM manipulation

How can I move elements within a div from the start to the end in the same div, for example, changing the order from 1-2-3 to 2-3-1? My code: const cards = document.querySelectorAll(".card"); const firstCard = document.querySelectorAll(".card")[0].inne ...

javascripthtmldomnodelist

Utilizing pseudo elements (after) in CSS with the font family in Font Awesome 6 fails to function properly

I am attempting to create the div using CSS after pseudo-element and I have included the Unicode in the content with the font family being "Font Awesome 6 Free". However, nothing is showing up and I'm not sure why. Can someone please assist me? Here i ...

htmlcssfont-awesome

Tips for showing data from Ajax responses on an HTML page

In my code, there are two JavaScript functions: The function fetch_items is responsible for returning data in the form of stringvalue. On the other hand, the function extract_items($arr) passes values to the fetch_items function. function fetch_items ...

javascriptjqueryhtmlajaxdom

The footer fails to remain at the bottom of the page when there is limited content available

Despite searching extensively on Google, I have not been able to find a solution to this frequently asked question. My challenge is to consistently position the footer at the bottom of the page, even when there is minimal content present. Below is an exce ...

htmlcsslaravellaravel-bladetailwind-css

Distinguish the disparities between mobile and desktop devices

I need a solution for adjusting the layout of a component based on the device it is viewed on. For mobile devices, I want the content to stack vertically like in this example: https://codesandbox.io/s/material-demo-forked-ktoee?file=/demo.tsx. However, o ...

cssreactjsmaterial-uijss