Table within a table does not occupy full height within a table cell

I encountered an issue while nesting a table within a td element. The behavior differs between browsers: in Firefox, the nested table fills the entire cell from top to bottom, but in Edge and Chrome, it is centered within the td cell and does not occupy the full space. My intention is for this table to span multiple rows, with the black bar extending across these rows.

Desired layout in Firefox: the black band spans from top to bottom

Current appearance in Edge and Chrome: the nested table does not fill the entire cell

body { margin: 0; }

Answer №1

The issue was resolved by adding padding: 0 and height: 100px to the table cell (which is the parent of the nested table) in Chrome. Interestingly, any setting of the height property in pixels worked, even when using a smaller value. It seems that the 100% height percentage requires a reference point.

body {
margin: 0;
}
<table style="font: 8pt Verdana; width:100%;">
  <tr style="background-color:#ffcc00;color:black;">
    <th style="width:170px">
      <table style="padding: 0px; margin: 0px; font: 8pt verdana; vertical-align: 100%; 
                        height: 100%; width:100%;">
        <tr>
          <td style="width:40%; margin:0px; text-align: left;">
            <strong>Mile<br />Marker</strong></td>
          <td style="width:1%;margin: 0px auto;">&nbsp;<br /></td>
          <td style="width:59%;margin: 0px auto; text-align: center;">
            <strong>The Safety<br />Rating</strong></td>
        </tr>
      </table>
    </th>
    <th style="color: #000000; vertical-align: middle; font-family: Verdana; font-size: 8pt;">
      <strong>Directions</strong>
    </th>
    <th style="color: #000000; vertical-align: middle; font-family: Verdana; font-size: 8pt;">
      <strong>Comments</strong>
    </th>
    <th style="color: #000000; vertical-align: middle; font-family: Verdana; font-size: 8pt;">
      <strong>Number of Vehicles</strong>
    </th>
    <th style="padding: 9px; color: #000000; vertical-align: middle; 
                    font-family: Verdana; font-size: 8pt;width:70px;">
      <strong>&nbsp;Map&nbsp;&nbsp;&&nbsp;&nbsp;</strong><br />
      <strong>&nbsp;Weather&nbsp;&nbsp;</strong><br />
    </th>
    <th style="color: #000000; vertical-align: middle; font-family: Verdana; font-size: 8pt;">
      <strong>Source</strong>
    </th>
  </tr>

  <tr id="firstRow" style="background-color:#ffff99; font: 8pt verdana;height:100%">
    <!-- Multiple table rows will be added here - This code is simplified for identifying the origin of the problem -->
    <td style='height: 100px; padding:0; text-align:center;' rowspan='1'>
      <!-- Code continues here -->

      <!-- In Edge and Chrome, the nested table didn't occupy the full height of the <td> cell top to bottom, unlike Firefox -->
      <table id="This is where my problem resides" style='padding: 0px; margin: 0px; height: 100%; 
                        border:thin solid #800080; background-color:#ffff99;'>
        <tr style=' font: 8pt verdana; height:100%;'>

          <!-- The black band on the next line doesn't extend from top to bottom in Edge/Chrome, but it does in Firefox -->
          <td style='height:100%; text-align:left;vertical-align:middle;' rowspan='1'>15.5<br />The Road</td>
          <td style='margin: 0px; border-width: 0px; padding: 0px; width:1%; height:100%; background-color:black; border-top-color: 0; border-right-color: 0; border-bottom-color: 0; border-left-color: 0;' rowspan='1'>&nbsp;</td>
          <td style='width:121px;height:100%;' rowspan='1'> Poor&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Great<br/>
            <input type='radio' name='rblSafety249' class='radio_b' value='1' runat='server' disabled="disabled" />
            <input type='radio' name='rblSafety249' class='radio_b' value='2' runat='server' disabled="disabled" />
            <input type='radio' name='rblSafety249' class='radio_b' value='3' runat='server' disabled="disabled" />
            <input type='radio' name='rblSafety249' class='radio_b' value='4' runat='server' disabled="disabled" />
            <input type='radio' name='rblSafety249' class='radio_b' value='5' runat='server' disabled="disabled" />
            <br /> <br />
            <div style='text-align: center;'>
              <input onclick=window.open( 'RateSafety.aspx') type='button' style='width: 80px; padding:0' id='btnRateSafety' name='btnRateSafety' value='Rate Safety' visible='true' />
              <br/>
              <div style='width:110px'>&nbsp;
              </div>
            </div>
          </td>
        </tr>

      </table>

    </td>
    <td>
      The directions go here.
    </td>
    <td>
      Comments go here
    </td>
    <td>
      the number goes here
    </td>
    <td><br />&nbsp;
      <input type="submit" name="MyRepeater:_ctl1:btnShowMap" value="Map" id="MyRepeater__ctl1_btnShowMap" style="width:35px; " />
      <a href='#footnote'><sup>
                        <span id="MyRepeater__ctl1_lFootnoteMap" style="font-weight:bold;">1</span></sup>
                    </a><br style="display:block;margin: 2px 0;" /><br style="display:block;margin: 1px 0;" />&nbsp;

      <a href='#footnote'><sup>
                        </sup>
                    </a><br style="display:block;margin: 2px 0;" /><br style="display:block;margin: 1px 0;" />&nbsp;

      <input type="submit" name="MyRepeater:_ctl3:btnShowWeather" value="Weather" id="MyRepeater__ctl3_btnShowWeather" style="width:60px;" />

      <a href='#footnote'><sup>
                        <span id="MyRepeater__ctl3_lFootnoteWeather" style="font-weight:bold;">1</span></sup>
                    </a><br /><br />

    </td>
    <td>
      http://www.aWebAddress.com
    </td>
  </tr>


</table>

Answer №2

I believe I have found the answer you seek:

table {
  border-spacing: 0;
}

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

The onBlur event attached to a div is triggered when transitioning from one input element to another within the same div

Here's a scenario: I have a div with two input fields nested inside, like this: <div> <input placeholder="Input1"/> <input placeholder="Input2"/> </div> I have a requirement to trigger a specific ...

The section cannot be shown in a flex layout within a grid container

My goal is to showcase a grid layout containing multiple sections within a div, but I'm encountering an issue where the sections are only displaying as blocks. I am seeking assistance in making the second portion of the data appear flexed. Currently, ...

Learn the process of importing data into an HTML list using Flask

Looking to transfer data from a Python variable to an HTML list? Here's a snippet of HTML code that you can test out: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Panel</title> & ...

Impossible to create margins on both the left and right side

Check out this cool pen: http://codepen.io/helloworld/pen/BcjCJ?editors=110 I'm facing an issue where I'm unable to create both left and right margins around my datagrid. Only the left margin seems to be possible. Any suggestions on how I can f ...

Achieving equal heights for div boxes while aligning list items inside

I have 8 green boxes on my site, each containing an image and either 3 or 4 list items with text only. The issue I'm facing is that the boxes are not of equal height due to two reasons: (1) One box may have an extra list item pushing the rest down, or ...

Adjust the size of the flex item based on the background image dimensions

Within a flexbox, there are flex items displayed Each flex item should appear as a clickable folder with specific text inside It seems that the only CSS way to achieve this is by using a background image. However, I want to accomplish the following: Cons ...

Navigating a local and server environment with relative paths in a web server's multiple sites

My ASP.NET website is published to a web server with multiple sites, such as www.example.com/SiteA or www.example.com/SiteB. Before publishing, I test the site locally at localhost:12345. When referencing an image path like /Images/exampleImage.gif, it wo ...

Experience a seamless transition to the next section with just one scroll, allowing for a full

I've been attempting to create a smooth scroll effect to move to the next section using Javascript. However, I'm encountering issues with the window's top distance not being calculated correctly. I'm looking to have the full screen div ...

Attempting to save MongoDB data into a variable for integration with Handlebars.js

Having an issue with storing MongoDB data in a variable to display in HTML using hbs. The specific error message is TypeError: Cannot read property 'collection' of undefined. Here's the code snippet I have written: const express = require(& ...

Prevent tooltips from displaying outside of an HTML table by using the overflow hidden property for horizontal scrolling

TL;DR: Struggling to position and display tooltips in a table due to the constraints of overflow: hidden. An example has been created to demonstrate the issue with tooltips not displaying correctly within a table. The problem arises because the table nece ...

Ways to modify the data within a column for every row in a table without relying on props in Vue.js (specifically Element-ui)

I've been stuck on this issue for quite some time now. I've created a table with 3 columns, and for the first two columns, I can easily display the contents of each row using the prop property. However, for the third column, I need to display inf ...

Using footable js will eliminate all form elements within the table

After incorporating the Footable jQuery library to create a responsive table, I encountered an issue with input tags and select boxes being removed by the Footable JavaScript. It turns all these tags into empty <td> elements. <table id="accordi ...

CSS files not loading on live-server

My HTML file is linked to a CSS file, but the CSS doesn't seem to load when I use live-server. Interestingly, the CSS works perfectly fine when I directly open the HTML file in a browser. The CSS file is located outside the directory where my HTML fi ...

Position the personalized radio button to be in line with the first choice text

I frequently update this section with a new Jsfidle link to demonstrate the issue when the max-width is set to 300px. For responsive design, adding the "span" tag before radio buttons helps align input content with custom checkbox backgrounds. To see the ...

Manipulate the starting frame of the SWF file

Typically in regular swf files, they play from frame 1 to the end and then loop... Is it feasible to utilize javascripts or any scripting language to initiate playback from a specific frame, such as frame 10? Thank you. ...

Is it possible to remove strings within HTML elements?

{% for term in terms %} <div class="term term-count-{{loop.index}}"> <b>{{ term }}</b>: &nbsp;&nbsp; {{ terms[term] }} &nbsp;&nbsp; </div> {% endfor %} 'terms' is a dictionary w ...

Show the initially chosen option in a dropdown menu when updating a record using mysqli

I recently came across a PHP page that handles relocation requests and allows users to edit them as needed. While the add page features dropdown boxes, the edit page simply displays them as text fields. This makes it difficult for users to select a differ ...

Enabling the use of special characters when submitting a form

Currently, I am in the process of developing a contact form for a website. My main objective is to enable users to input non-Latin characters such as é or 車. However, I have encountered some challenges regarding where I should implement this feature. On ...

Alternative image loading in a figure element

I'm currently in the process of putting together an image gallery using Angular 4.3.0, where images are displayed as background images within figure elements rather than img tags. The images are initially resized to smaller dimensions before being use ...

Opting for <button> over <a>

I am currently working with ReactJS in conjunction with a Bootstrap Nav Bar. Bootstrap utilizes an <a> tag for the navigation buttons. I am aiming to have the buttons scroll down to a different component on the page without resorting to using an href ...