div table with varying cell styles on each row

Is it feasible to achieve a table layout resembling the one depicted below using only div tags and CSS?

_________________________________________________
|           |                       |            |
|           |                       |            |
|           |                       |            |
|___________|_______________________|____________|
|      |       |                |                |
|      |       |                |                |
|      |       |                |                |
|______|_______|________________|________________|
|           |                       |            |
|           |                       |            |
|           |                       |            |
|___________|_______________________|____________|

The challenge lies in creating the second row with 4 cells, as it affects the widths of the first row with 3 cells. Below is the HTML code:

<div class="box-table" style="width: 800px">
    <div class="box-row">
        <div class="box" style="width: 20%"></div>
        <div class="box" style="width: 45%"></div>
        <div class="box" style="width: 35%"></div>
    </div>
    <div class="box-row">
        <div class="box" style="width: 15%">></div>
        <div class="box" style="width: 15%">></div>
        <div class="box" style="width: 40%">></div>
        <div class="box" style="width: 30%">></div>
    </div>
    <div class="box-row">
        <div class="box" style="width: 20%"></div>
        <div class="box" style="width: 45%"></div>
        <div class="box" style="width: 35%"></div>
    </div>
</div>

Here is the CSS code being used:

.box-table {
   display: table;
   border-collapse: collapse;
}

.box-table .box-row {
   display: table-row;
}

.box-table .box {
   display: table-cell;
   text-align: left;
   vertical-align: top;
   padding: 5px;
}

Can this be achieved or should each row be transformed into a separate table? Thank you for your assistance.

htmlcss

Answer №1

Sure, it can be done - SEE DEMO

.box-table {
  outline: 1px solid #c00;
  overflow: hidden;
  width: 800px;
}

.box-table .box-row {
  display: block;
}

.box-table .box {
  outline: 1px solid #ccc;
  display: inline-block;
  float: left;
  text-align: left;
  vertical-align: top;
  padding: 0;
  height: 2em;
}

Answer №2

The reason for this limitation is that each row in the table must have an equal number of table cells. While you have the option to use colspan on rows other than the second one, doing so would require converting the div layout to a table layout, which may not be desired.

Answer №3

Here are a couple of suggestions to improve the layout:

  1. Consider removing the padding in your box class as it is causing boxes to wrap unnecessarily. Instead, try adding padding to a nested div within the main div.
  2. Try adding float:left property to the .box class to help with alignment.

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

Struggling to dynamically include an identifier to a div element within a Rails helper function

I'm currently facing a bizarre issue. Here's how my view looks: <h1>All Deals</h1> <%= sanitize print_grouped_deals(@deals) %> This is what's in my deals_helper.rb file: def print_grouped_deals(grouped_deals_by_date ...

htmlcssruby-on-rails

What is the best way to incorporate JQuery into html content retrieved through an ajax request?

In my jsp file, there is a div structured like this : <div id="response" class="response"></div> After triggering an ajax call to a servlet, the content of this div gets updated with the following elements : <div id="response" class="res ...

javascriptjqueryhtmlajaxjsp

Using jQuery, you can activate an onclick function based on specific keywords entered by the user

Within this element, there is a text input field that allows users to search for specific items. Next to the input field is an icon image that can be clicked on to trigger a jQuery onclick event. This event sends an AJAX request to a PHP file, retrieves da ...

javascriptjqueryhtml

Is AJAX malfunctioning while the success function is functioning properly?

the function for success is operational, however the data isn't being saved in the database $(document).ready(function() { $("#ChatText").keyup(function(e){ if(e.keyCode == 13) { var ChatText = $("#ChatText").val(); ...

phphtmlajax

Arrange the side by side display of uploaded image previews

Could someone please assist me with aligning my image upload preview in a row, similar to a brand/partners slider? The current preview output is not displaying as desired. Here is the code I have: <div class="image-gallery"> <div class ...

htmljquerycssimageupload

Strong tags are not functioning properly within paragraph tags in Firefox

It has come to my attention that when I insert <strong> into a <p>, the text does not appear bold. This issue seems to only occur in Firefox, as Chrome and Safari display it correctly. However, when I place <strong> inside a <li>, e ...

htmlcss

What could be the reason my div is not being hidden in jQuery?

Creating a quiz layout for school is my current project, and I'm just getting started. My goal is to have the questions disappear once the 'next question' button is clicked. The issue arises after the second question because instead of the ...

javascriptjqueryhtml

Populate List Items until Maximum Capacity is Reached and Increase the

Is there a way to make a ListItem fill the list vertically while also being able to overflow it if needed? I'm looking for a solution that would allow me to access the height of the empty space in the list, which I believe would be the minHeight. Som ...

javascriptcssreactjstypescriptmaterial-ui

Modify the CSS color attribute interactively by clicking

I have a function that can generate random colors. I would like to utilize this function along with jQuery's toggleClass feature to change the color of a table cell when clicked, and revert it back to its original color if clicked again. Here is the ...

jquerycss

How can I ensure a div always moves to the right by using margin-right auto?

How can I align a div to the right using margin-right auto? I attempted margin-right: auto; and margin: 0 0 0 auto; but it was not successful. ...

htmlcss

Trouble arises when accessing GET form in php/Ajax

I am in the process of creating a dynamic website. At the top, I have an input form that, when submitted, should display the output from an asynchronous request to a PHP page using echo to show what was submitted. Unfortunately, it's not functioning ...

javascriptphpjqueryhtmlajax

Is it possible to control the display of open graph images on the iOS messaging app?

Recently, I discovered that it's possible to have multiple og:image meta tags on a single page. However, I'm struggling to figure out how this may impact the display on the iOS message app. I came across a Shopify website that showcases a mosaic ...

htmlfacebook-opengraph

Utilizing PHP to Extract Information through cURL and HTML Parsing

Is there a way to search through an HTML page specifically for text contained within a particular div element? ...

phphtmlhtml-content-extraction

Leveraging AJAX for seamless PHP execution without page refresh

I have this HTML form: <form class="clearfix" method="POST"> <input name="username" type="text" placeholder="Username:"> <input name="password" type="password" placeholder="Password:"> <textarea name="comment" placeholder="Comment: ...

phphtmlajaxformspost

Retrieve the child DIV element within its sibling without using an identifier

I have a setup similar to the following: <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Tiger128 (v2)</h3> </div> <div class="panel-body"> <inp ...

javascriptjqueryhtml

Dynamically switch between showing more and showing less content on each div

Whenever the specific show more button is clicked, the content should be displayed without causing the entire component to re-render. I have tried using a useState, but each time the button is clicked, the whole component re-renders, resulting in long load ...

javascriptcssreactjsbootstrap-4material-ui

XSL fails to display HTML tables

I am having trouble displaying information from an XML file about hotels using XSL on a webpage without HTML tables. Despite searching through numerous posts on StackOverflow, I cannot seem to pinpoint where I may have gone wrong. Here is an excerpt from ...

htmlxmlxslt

Sticky position applied and overlapping with the following container

I'm struggling with the CSS property position: sticky. In my layout, I have three boxes stacked one after another. Each box is styled with the class container from Bootstrap. The middle box, labeled as box-2, needs to be fixed in its position. To ach ...

htmlcssbootstrap-4

Python script to extract data from a dynamic JavaScript webpage

I've been involved in a research project where we are aiming to gather a list of reference articles from the Brazil Hemeroteca (The specific page reference we are seeking: , needs to be located by extracting data from two hidden elements on this page: ...

pythonhtmlselenium

Upgrading Bootstrap from version 3.4 to 5.3 in a .NET project

I have a website project created using .Net Framework 4.7.2. Currently, I am utilizing Bootstrap version 3.4.1 from here. Since Bootstrap 3.4 is now in an end-of-life phase, I need to upgrade to the latest version, 5.3. Upon replacing the old version fil ...

javascriptcssasp.net.netbootstrap-5