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

Trigger Javascript on 'Nearby' input from Html form

I have a JavaScript code that retrieves the latitude and longitude of users from their device for a local search. Although everything works correctly, I want to make sure the script is only executed if the user specifically selects "nearby" as the locatio ...

javascriptjqueryhtmlformsgeolocation

specialized html elements within data-ng-options

I have a code snippet where I am populating select options from a controller using data-ng-options. However, I would also like to include an icon with each option. For example, I want to append <span class="fa fa-plus"></span> at the end of e ...

javascriptjqueryhtmlangularjs

Building an Angular 4 app featuring a customized default landing page and URL parameters functionality

I am in the process of developing a web portal that will be embedded within an iFrame. Below is the code snippet I am using to set up the portal: Routes Configuration const routes: Routes = [ { path: '', redirectTo: '/dash ...

htmlangulartypescriptiframeangular-router

The Parallax effect reference hook does not seem to be functioning properly with components in NextJs

I'm attempting to implement the useParallax hook on an element within my JavaScript file. My setup involves NextJs, ReactJs, and styled components. Here is how I integrated the hook: Mainland.js import React, { useEffect, useRef } from 'react&ap ...

htmlreactjsreact-hooksnext.jsuse-ref

Switch the secondary menu to be the main menu on all pages excluding the homepage in WordPress

I am looking to customize my menu display by showing the primary menu only on my home page (front-page.php) and displaying the secondary menu on all other pages except for the home page. In my functions.php file, I have registered both the primary and sec ...

phphtmlcsswordpress

Preserving information throughout an online browsing session

Is there a way to save the data about which buttons a user clicked on while visiting our website without using a database? The issue is that any array I use gets reset every time the user is redirected from the page. Note: I'm still learning PHP ...

javascriptphpjqueryhtmlmysql

Guide on modifying HTML attribute with TFHpple in the Swift programming language

I have received an HTML string and I want to modify the elements inside them, specifically the img tags, so that they have a style of width = 100% and height set to auto. This way, when I embed these images into a web view, they can easily adjust to fit th ...

htmlcssswifttfhpple

Switch the placement of two DIV elements by their corresponding IDs

I am attempting to adjust the position of two divs using jQuery, but I seem to be a bit confused as they are already swapping positions. However, when they do swap, it results in a duplication of the field. I have tried using both insertBefore and insertA ...

javascriptphpjqueryhtmlcodeigniter

Seeking assistance in creating custom tabs for integration with a jQuery tabs plugin

Attempting to navigate the world of CSS as a newbie, I find myself struggling with creating tabs. Our current tab setup can be viewed here, but unfortunately, these tabs are created using an unattractive <table> tag. Below is the code responsible fo ...

jquerycsstabs

Ways to categorize items using JQuery based on their hierarchical structure

I am looking to organize the following HTML content: <h2>State the Issue  </h2> <h3>Provide information about your objective</h3> <h3>Share any error messages received</h3> <h2>Outline Your Attempts  ...

javascripthtmljquery

What is the most effective method for preserving RichText (WYSIWYG output)?

I am currently using a JavaScript-based rich text editor in my application. Could you suggest the most secure method to store the generated tags? My database is MySQL, and I have concerns about the safety of using mysql_real_escape_string($text);. ...

phpjavascripthtml

When text is wrapped within the <li> tag

In this div, the structure is as follows: <div class="box1" id="infobox"> <h2> Point characteristics: </h2> <div style="padding-left:30px" align="left"> <ul> <li class="infobox_list"><b>X value: </b>< ...

javascriptjqueryhtmlcss

Deactivating Node.js files in vsCode for client-side JavaScript files

I'm facing a major challenge when it comes to coding with JavaScript. I have a JavaScript file that is using Node.js, which means I am unable to manipulate the DOM elements. Take this code snippet for example: var form = document.getElementsByClassNa ...

javascripthtmlnode.js

I would like for my element to increase and decrease in size while rotating when the button is clicked

I am trying to create an element that changes its size while spinning when a button is clicked. It seems to be working fine on hover, but not onclick. Here is the code I have: <div class="rec">Rec</div> <button id="button&quo ...

javascripthtml

Tips for securely encrypting a PHP file when combining it with an HTML file using the phpB

I am attempting to encrypt a .php file using phpBolt. It works fine when the file contains only PHP code, but it fails when there is a mixture of HTML and PHP. Here is the encryption code: <?php /** * src : source folder * encrypted : Output folde ...

phphtmlencryption

Guide to updating 2 iframes simultaneously with a single link/button using HTML and JavaScript

Just joined the community and looking for help on how to refresh two different iframes within a single page. I came across a solution on Google that involves using getElementById. However, I've heard Firefox can be tricky with IDs. Appreciate any as ...

javascripthtmliframerefresh

Configuring the interactive background for a textbox

How can I set a background image for a textbox that is clickable? I tried using a div tag with position:absolute positioned above the textbox, and included the image within it. However, the issue is that the image appears above the text. I attempted to a ...

htmlasp.netcsstelerik

Only switch a radio button when the Ajax call results in success

Within an HTML form, I am working with a group of Radio buttons that trigger an Ajax call when the onchange() event is fired. This Ajax call communicates with the server to process the value sent by the call. The response can either be a string of "succes ...

javascripthtmlajaxradio-buttondom-events

Is there a way to create a JavaScript script that automatically updates a webpage for all users simultaneously?

I have developed a web application that enables users to modify content using JavaScript. Currently, these changes are only visible on the local browser and do not involve AJAX. However, I am wondering how I can ensure that these DOM alterations are refle ...

javascriptajaxhtml

Modifying the information depending on the option chosen from the dropdown menu using angularJS

I have a dropdown menu where I can choose between two options, and when selected, the corresponding data is displayed. However, I would like to display the data that is inside a div tag instead. Check out this Fiddle Demo HTML: <div ng-controller="Ct ...

javascriptjqueryhtmlangularjs