Is there a way to line up these two tables or divs using a shared parent header div?

Question

Is there a way to line up these two tables or divs using a shared parent header div?

In the process of developing this webpage, I encountered a layout that resembles the following:

Here is an approximation of the HTML structure:

<div class="title">
    <table>
        <tr>
            <td width="35%">Table 1a Header</td>
            <td width="65%">Table 2a Header</td>
        </tr>
    </table>
</div>

<div class="padding-all">
    <div class="body" style="width: 100%">
        <div><table> <!-- table 1b... --></div>
        <div><table> <!-- empty table for spacing --></div>
        <div><table> <!-- table 2b... --></div>
    </div>
</div>

The desired outcome is either:

1) Positioning the text in <div class="title"> at the top to align it above the tables within <div class="body">

OR

2) Expanding the "top" rows within the tables to cover the full width of the page and eliminate any black space, essentially mimicking the appearance of the current title div.

In both cases, alignment between the text for "1a" and "1b" as well as 2a/2b is required, along with a gray background spanning the width of the page.

Although I'm predominantly a developer rather than a designer, I've struggled to find a solution. Adjusting the percentages of the title div's table data cells has proven to be inconsistent across resolutions. What other approaches could I take?

html css

Answer 1

Answer №1

If you're looking to achieve a specific outcome overall, consider embedding your tables as one potential solution.

Take a look at the example I created on this jsfiddle link, where I utilized the code below:

<table>
  <thead>
    <tr>
      <th width="2%"></th>
      <th width="33%">Header for Table 1</th>
      <th width="2%"></th>
      <th width="63%">Header for Table 2</th>
    </tr>
    <tr height="10px">
      <td colspan="4"></td>
    </tr>
    <tr>
      <td width="2%"></td>
      <th width="33%">Sub-header for Table 1</th>
      <td width="2%"></td>
      <th width="63%">Sub-header for Table 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td width="2%"></td>
      <td width="33%">
        <table><!-- Insert Content --></table>
      </td>
      <td width="2%"></td>
      <td width="63%">
        <table><!-- Insert Content --></table>
      </td>
    </tr>
  </tbody>
</table>

Answer 2

If you're looking to achieve a specific outcome overall, consider embedding your tables as one potential solution.

Take a look at the example I created on this jsfiddle link, where I utilized the code below:

<table>
  <thead>
    <tr>
      <th width="2%"></th>
      <th width="33%">Header for Table 1</th>
      <th width="2%"></th>
      <th width="63%">Header for Table 2</th>
    </tr>
    <tr height="10px">
      <td colspan="4"></td>
    </tr>
    <tr>
      <td width="2%"></td>
      <th width="33%">Sub-header for Table 1</th>
      <td width="2%"></td>
      <th width="63%">Sub-header for Table 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td width="2%"></td>
      <td width="33%">
        <table><!-- Insert Content --></table>
      </td>
      <td width="2%"></td>
      <td width="63%">
        <table><!-- Insert Content --></table>
      </td>
    </tr>
  </tbody>
</table>

Is there a way to line up these two tables or divs using a shared parent header div?

Answer №1

Similar questions

Prevent background image animation in CSS

Tips for securing a navbar in material ui

What is the process for adjusting the color of a particular date in the <input type=Date> field?

Tips for changing the CSS properties of input elements in iView

Is there a way to eliminate the white border surrounding this input field? (JSFiddle link included)

Exploration of features through leaflet interaction

"Revolutionary tool for creating dynamic charts: moving from ASP.NET to HTML

The issue with the ng-click property not triggering arises when it is assigned to a button that is generated dynamically

I need to extract information from the source code of a different website - how can I do this

Loading an empty CSS file in Node.js

The background image on my website isn't showing up once it's been deployed via GitHub

Is it possible to trigger a server-side event using jQuery in SharePoint 2010?

The functionality of .bind() is malfunctioning on both Microsoft Edge and Google Chrome browsers

jQuery Ajax Redirect Form

deciding on the axis for flipping a div with CSS

In Chrome, the height of 100% is not functioning properly within the <div> element

PHP Warning: Attempt to access undefined variable

Implementing an interactive tab feature using jQuery UI

I want to know how to move data (variables) between different HTML pages. I am currently implementing this using HTML and the Django framework

Concealing excess background color in HTML/CSS