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:

https://i.sstatic.net/T8XHa.png

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?

htmlcss

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>

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

Connected selection menu

I have noticed several discussions on this topic, but many of them rely on JavaScript or focus solely on a standard drop-down list. I have developed a PHP function that generates drop-down menus based on select queries in my database. Currently, this part ...

phphtmlforms

Exploring td data inside tr element using LXML

Is there a better way to parse individual statistics from the Yahoo Finance tables for formatting purposes? The current method involves repeating code to retrieve stats within each row of the table, as shown in the example below. It seems inefficient - a ...

pythonhtmlpython-3.xlxml

Tips for creating text that adjusts to the size of a div element

I'm currently working on developing my e-commerce website. Each product is showcased in its own separate div, but I've encountered a challenge. The issue arises when the product description exceeds the limits of the div, causing it to overflow ou ...

javascripthtmlcssresponsive

What are the guidelines for incorporating tag names in CSS selectors?

I created a button that when clicked, displays a table containing actors. I have named them as follows: <button class="actors">Show actors</button> <table class="actors">...</div> Next, I want to style and access them in my CSS (a ...

htmlcsscss-selectors

Storing raw HTML in a Mysql database, then fetching and displaying it on a webpage

I'm having an issue with my application. It's a form builder that allows users to create their own forms and then save them for later use. The HTML code generated by the form builder is stored in a MySQL database. However, when I try to retrieve ...

javascriptphpjqueryhtmlmysql

While using the Android Firefox browser, I noticed that the keyboard is causing my screen to shrink in size

As I work on creating a cross-platform HTML page, I have encountered an issue with text fields on Android smartphones. When I attempt to type in a text box, the keyboard pops up and causes my HTML page to shrink within the viewport. I'm curious to kn ...

androidhtmlcsssvgkeyboard

How can I align two inner boxes vertically in the most efficient manner?

.dd{ height:100px; width:100%; border:1px soild red; background:#000; } .dd .d1{ height:20px; width:20px; border:1px solid green; display:inline-block; } .dd .d2{ height:20px; width:20px; border:1px solid green; display:inl ...

javascriptcssalignmentvertical-alignment

What is the best way to eliminate existing double quotation marks within string values stored in objects in Angular?

When using Angular, data is retrieved in object form from the database to the backend and then to the frontend. Here's how it looks in HTML: <h3>Payslip for the month of {{dataout[0].MonthYear | json }}</h3> The issue arises when running ...

htmljsonangularobject

Having issues with customizing the design of MaterialUI Accordion header

Link to my code sandbox project I am encountering issues with the styling in my Accordion Heading. My Accordion Contents are set up like this: <Accordion heading1= { <DishItem name="Döner Teller Spezial" price="13,60€"/> ...

cssreactjsmaterial-uiaccordion

A pair of boxes sitting next to each other, both occupying 50% of the space but slightly longer in length and not aligned on the same level

My goal is to have two side-by-side boxes that fill the entire width of the screen. However, I'm facing an issue where each box exceeds 50% width by about 10 pixels. What could be causing this discrepancy? #sides { padding-top: 40px; padding- ...

htmlcsswidth

Adjust the height of images to be consistent

I'm currently working on creating a grid layout with 4 images in a row using DaisyUI card component. However, I've run into an issue where there is white space at the bottom of some images due to varying image heights. Is there a solution that wo ...

javascripthtmlcssfrontendtailwind-css

Steps to display the datatable footer on the printed page

I am having trouble understanding the solutions provided for my table query. The current table setup is as follows: <table class="table table-bordered make_datatable"> <thead> <tr> <th>SL No</th> ...

javascriptjqueryhtml

Uncertainty surrounds the interaction of computed height and margins with CSS float right

What is the reason behind this HTML code: <html> <head> <style type="text/css"> .left { background-color: yellow; } .right { float: right; background-color: lightgray; width: 150px; } </sty ...

csshtml

The issue with clip-path not functioning correctly in Safari persists

My list of clipped elements is causing an issue when using the CSS3 clip-path method to clip an image into an SVG path. The clipping works perfectly, but in Safari (V 12.1.4), the position of the clipped element changes with each box. The element ...

htmlcsssvgsafariclip-path

Ways to modify the .MuiSelect-nativeInput element within Material-UI

const styles = makeStyles((theme) => ({ root: { margin: "0px 20px" }, textStyle: { fontFamily: "Comfortaa", }, container: {}, textField: { fontFamily: "Comfortaa", }, dropDownFormSize: { width: &qu ...

cssreactjsmaterial-uicss-selectorsjsx

The toggling feature seems to be malfunctioning as the div section fails to display

I'm facing an issue with my Django project while working on a template. I want to toggle the visibility of a div element between hiding and showing, but the function I used isn't working for some reason. I borrowed the function from a different t ...

javascripthtmlcssdjango

Incorporating a bottom line or border within the input field with a specified width

I have been struggling with styling an input field. I added a 1px solid #000 border around it, but now I need to include a thicker black line within the input itself. I tried using border-bottom: 5px solid #000, but that just created a border at the bottom ...

css

Preventing a sprite from going beyond the boundaries of a canvas with pure JavaScript - here's how!

I am in the process of developing a game using native JavaScript, HTML, and a touch of CSS. I have two blocks called Sprites that tend to keep moving off the canvas edges when they reach them. Question: How can I utilize native JS to prevent the sprites fr ...

javascripthtmlcsscanvas

When I zoom in, a different div replaces the original div

I have recently delved into the world of HTML and CSS as I embarked on creating my own website. However, I seem to have hit a snag - when I zoom in on the content, it overlaps with the menu. I have scoured the internet for a solution to no avail, so any as ...

csshtmlzooming

Access another page by clicking on a link within an HTML document

Is it possible to include an anchor tag in demo1.html that, when clicked, will take the user to the demo2.html page and automatically select a data filter on that page? Here is the code snippet for demo1.html: <li> <div><a href="urunli ...

javascripthtml