Two miniature tables placed next to each other within a single cell, both sharing equal height

Is there a way to make two tables within a parent table cell have the same height using HTML and CSS?

If one cell has more content than the other, is it possible to adjust the height of both tables accordingly?

<table cellpadding="0" border="1" cellspacing="0" style="border:none; border:thin solid black; width:600px;" align="center">
  <tr>
    <td>
      <!--left table-->
      <table cellpadding="0" border="0" cellspacing="0" style="width:86px; height:100%; background-color:#808080; margin-left:0px;" align="left">
        <tr>
          <td cellpadding="0" cellspacing="0" border="0" style="background-color:#808080; color:white;" align="center">
            Adjusting the height of the right side?
          </td>
        </tr>
      </table>
      <!--right table-->
      <table cellpadding="4" border="0" cellspacing="0" style="width:500px; height:100%;">
        <tr>
          <td align="left" height="42" valign="middle" cellspacing="0" border="0" style="background-color:#000000; padding-left:10px; color:white;">
            Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here Some text goes here
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
htmlcsshtml-table

Answer №1

Setting a table height to 100% can be tricky if the parent doesn't have a fixed height.

To work around this, consider splitting the parent TD into two separate TDs, each with its own background color.

<table cellpadding="0" border="1" cellspacing="0" style="border:none; border:1px solid black; width:600px;" align="center">
  <tr>

    <td style="vertical-align:top; background: #808080; color:white; width:86px;">
      <table cellpadding="4" cellspacing="0" border="0">
        <tr>
          <td align="center">
            Fit the height of the right side?
          </td>
        </tr>
      </table>
    </td>

    <td style="vertical-align:top; background: #000000; padding-left:10px; color:white;">
      <table cellpadding="4" cellspacing="0" border="0">
        <tr>
          <td align="left">
            Some text goes here... (repeated for emphasis)
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

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

Incorporating Javascript jQuery functionalities from an external file

I have encountered an issue when trying to run my index.html file with the control.js file that I outsourced. It seems like they are not working together properly: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.c ...

javascriptjqueryhtml

What is the significance of the source element in Vue3's audio element?

Playing mp3 files works in Vue 2, but not in Vue3. <template> <audio src="../file_example_MP3_700KB.mp3" controls ></audio> </template> In Vue3, the code needs to be modified as follows: <template> <audi ...

javascripthtmlvue.jsvuejs3

Remove the div of the previous selection in jQuery and add the current selection by appending it, ensuring only one selection per row is allowed when

Here is a code snippet that includes buttons appending selections to the "cart" div upon clicking. The first script ensures only one selection per row when multiple buttons in the same row are clicked. In the second script, selections are appended to the ...

javascripthtmljquerycss

Steer clear of retrieving all the elements from the HTML DOM at once

Scenario I am working on a HTML5+CSS+JS slideshow project that needs to be synchronized across 50 clients in a local area network using a single wireless router. Challenge Due to the heavy content, particularly images, of the slides, I intend to dynamic ...

javascripthtmljquery

Loading input datalist in Firefox postponed

My goal is to implement an input field for a username that allows users to select from a wide range of names/usernames. I want them to be able to enter a partial string from the name or username. Instead of loading the entire list initially, I aim to load ...

javascripthtmljqueryformsautosuggest

What's causing this javascript to malfunction on the browser?

I encountered a problem with the code in my .js file. Here is a snippet of the code: $.extend(KhanUtil, { // This function takes a number and returns its sign customSign: function(num){ num = parseFloat(num) if (num>=0){return 1} ...

javascripthtml

Attempting to enlarge logo or image when cursor hovers over it

Seeking to enhance logo/image size when cursor hovers over it, but facing an issue where it enlarges even on areas outside of the image itself - View Example. I followed a tutorial to achieve this effect, and specified the width as 1024x1024 for the logo/i ...

htmlcssweb

What is the method for centering an input field with inline CSS?

Is there a way to center align an input text box on a webpage using only inline CSS? I have tried various techniques, including the following code snippet, but nothing seems to work: <input type="text" id="myInput" style= "margi ...

htmlcss

Failed to add a new entry to the Sharepoint 2013 List

Having trouble saving an item to a SharePoint list using Knockout.js and REST. In my Ajax POST request, I've used ko.toJSON but the entry doesn't show up in the SharePoint list. It's possible that I'm passing the wrong parameter value. ...

jqueryhtmlajaxknockout.jssharepoint-2013

Internet Explorer is unable to recognize the .less file format

I have created a less file that works perfectly in Chrome and Firefox, but it is not being recognized in IE 9. Does anyone have suggestions on how to make it run in IE 9.0? Below is a sample of the CSS code: @import "../core/variables.less"; @import "Mi ...

cssless

What is the functionality of bootstrap colors?

Recently, I've been practicing my skills with Bootstrap, and I'm determined to understand all aspects of the code. However, one thing that's currently puzzling me is the navbar colors. When I apply the navbar-dark class, instead of displayin ...

htmlcssbootstrap-4

What is the best way to ensure that the size and maximum length of a text input box are properly aligned?

Is there a way to ensure that the size and maxlength attributes of a text input box align correctly? It can be frustrating when these attributes don't match up due to font differences. Example Input: <input type="text" size="4" maxlength="4" /> ...

htmlcssforms

PHP and MySQL combination for efficient removal of multiple dropdown choices

I'm struggling to figure this out. Essentially, it's a form with multiple dropdown menus where users can select one or more items to filter MySQL data results. I want to dynamically update the other dropdown menus as the user makes selections. Fo ...

javascriptphpjqueryhtmlmysql

What is the best way to add a right-hand side navigation bar without blocking the scrollbar from view?

Take a look at this webpage: I am designing a website that includes a header, a footer, and a central container with left and right navigation bars surrounding a content area. However, I want the scrollbar for the content to appear on the right side of th ...

css

Reactively created menu using JQuery

Looking to implement a dynamic JQuery menu using React (ES6). Utilizing the JQuery menu examples (https://jqueryui.com/menu/) as a guide, however, those examples only cover static menus. It doesn't clarify how to modify menu items like updating labels ...

javascriptjqueryhtmljsonreactjs

How to center two divs side by side horizontally using Bootstrap

How can I make the layout work on screens 575px and below with the class "col-xs-6 col-sm-6 col-md-8"? <div class="container"> <div class="row align-items-center"> <div class=&q ...

htmlcssbootstrap-4

Necessary Selection from Dropdown

I've created a contact form with both optional and required fields. One of the mandatory fields is a drop-down menu, which looks like this: <div> <select name="favFruit[]" size="1" required> <option value="apple">Apple&l ...

jqueryhtmljquery-validateselectlist

Is it possible to include pseudo element elements in the configuration of a custom theme in Material UI?

Within my file themeConfig.js, I have defined several theme variables that are utilized to style different components throughout my application. Among these variables, there is a need for implementing the -webkit scrollbar styles for certain components. Du ...

javascriptcssreactjsmaterial-uithemes

Inserting a picture using CSS

I attempted to include an image in a footer div, but I have not been successful with the following approach: Here is the HTML code I tried: <footer> <div class="imagenFooter" style="background-image: url(&quot;./images/footer-bg.jpg&quo ...

htmlcssbootstrap-4

If no other columns are present, ensure a column with a width of 9 fills the entire width

While working with Foundation 6, I encountered a situation where I had a large-3 column next to a large-9 column. The issue was that sometimes the large-3 column might not be present. In such cases, I wanted the remaining column to expand and fill up the ...

htmlcsszurb-foundationgrid-layout