Switch out the rowspan attribute in HTML for a CSS alternative

Hello there,

I've been experimenting with replacing my table layout with divs and CSS, but I'm struggling to find a way to replicate the behavior of the rowspan attribute. Here is the original code snippet:

<table>
 <tr>
  <td>some content</td>
  <td>some more content</td>
  <td rowspan="2">THIS is A COLUMN</td>
 </tr>
 <tr>
  <td colspan="2">SINGLE CELL ROW</td>
 </tr>
</table>

After attempting to use CSS for the layout:

<header>
 <section>
  <div>some content</div>
  <div>some more content</div>
  <div rowspan="2">THIS is A COLUMN</div>
 </section>
 <section>
  <div>SINGLE CELL ROW</div>
 </section>
</header>

header {display:table;}
section {display:table-row;}
div {display:table-cell;}

Unfortunately, this approach doesn't work as expected because the bottom div does not extend below the rowspanned div like it should. Is there a CSS solution that can help achieve this layout?

Thanks for your assistance.

Please note that this query is specific to implementing ROWSPAN, not just colspan.

csshtml-table

Answer №1

If you want to achieve your desired layout, consider adjusting your HTML structure and utilizing the power of Flexbox

*,
*::before,
*::after {
  box-sizing: border-box
}
body {
  margin: 0
}
table {
  width: 100%;
  border-collapse: collapse
}
td {
  border: 1px red solid
}
header {
  display: flex
}
section {
  flex: 1;
  font-size: 0;
}
section > div {
  border: 1px solid green;
  font-size: 16px
}
section:first-of-type div {
  border-right: 0
}
section:first-of-type div:not(:last-of-type) {
  width: 50%;
  display: inline-flex;
  border-bottom: 0;
}
section:last-of-type div {
  height: 100%;
  align-items: center;
  display: flex
}
<h2>TABLE</h2>
<table>
  <tr>
    <td>some content</td>
    <td>some more content</td>
    <td rowspan="2">THIS is A COLUMN</td>
  </tr>
  <tr>
    <td colspan="2">SINGLE CELL ROW</td>
  </tr>
</table>

<br />
<hr />

<h2>DIV</h2>

<header>
  <section>
    <div>some content</div>
    <div>some more content</div>
    <div>SINGLE CELL ROW</div>
  </section>
  <section>
    <div>THIS is A COLUMN</div>
  </section>
</header>

Answer №2

To create a table using flexbox, you can group each part that represents a row or column within div elements.

<div>
  <div>
    <div>
      <div>content here</div>
      <div>more content here</div>
    </div>
    <div>THIS is A COLUMN</div>
  </div>
  <div>SINGLE CELL ROW</div>
</div>

Next, utilize the flexbox properties to create rows and columns with `nowrap` to mimic a table structure.

body div { border: 1px solid #999; margin: 0; }
body > div { display: flex; flex-flow: row nowrap; margin-top: 10px; }
body > div > div { display: flex; flex-flow: column nowrap; flex: 1 1 0; }
body > div > div > div { display: flex; flex-flow: row nowrap; flex: 1 1 1;}
body > div > div > div > div { flex: 1 1 0; }

Check out the Plunker example here.

Answer №3

.container{
  display: flex;
  align-items: center;
  width: 100%;
}

.box{
  display: flex;
  flex-direction: column;
  border: 1px solid #444;
}

.row{
  display: flex;
}
    <div class="container">
  <div class="box">
    <div class="row">
      <div>some content</div>
      <div>some more content</div>
    </div>
    <div class="row">
       <div>SINGLE CELL ROW</div>
    </div>
  </div>
  <div class="box">
    <div class="row">
      <div>THIS is A COLUMN</div>
    </div>
  </div>
</div>

Hopefully this meets your requirements

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

What could be causing the background rainbow animation to malfunction?

.colorful { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); animation: change 10s ease-in-out infinite; } @keyframes change-color { 0% { background-position: 0 50%; } 50% { background-position: 100% 50%; } 10 ...

css

Angular Digest Loop for Dynamic Photo Grid Styling

I have a special filter that alters the objects being filtered. However, when I apply ng-style="item.gridSize", it triggers my custom grid algorithm. This algorithm was adapted for my requirements from a source found at this link. angular.module("custom.m ...

javascriptcssangularjsangularjs-directiveangularjs-scope

Problem occurring with Bulma CDN version 0.8.0 failing to identify the spacing helper

Recently revisited an older project I had started some time ago using the Bulma framework. However, for some reason, the 0.8.0 CDN is not being imported or recognized correctly by the spacing classes. Here's the code snippet I had initially: <link ...

htmlcsscdnbulma

I am having issues displaying my background image

I'm experiencing an issue where my background image isn't displaying correctly. Here is the CSS code I'm using: body { background-image: url('img/bg.png'); background-repeat: no-repeat; } ...

css

Ways to include additional hyperlinks in my navigation bar

I am seeking ways to enhance my CSS menu so that there is no lag when new links are added. I aim to include 8 additional links if possible. Is there a way to prevent this delay and ensure that the links align correctly? nav { display: inline-block; ...

htmlcss

Background color set for only half of the div

Is it possible to achieve a design similar to this using CSS, with a Half-background color for a div? ...

htmlcssbootstrap-4

I am having trouble retrieving the information stored in an Array of Objects. Specifically, I am having difficulty accessing and iterating through each object using a for

Is there a way to extract data from an API individually and retrieve data from an Array? let {Array}=jsonData fetch("https://apis.ccbp.in/city-bikes?bike_name" + search, options) .then(function(response){ return response.json(); }) .then(funct ...

javascripthtmlcss

Unable to navigate through images on Bootstrap Carousel using previous and next buttons

Despite following tutorials and examining the HTML code on bootstrap, I'm facing issues while trying to create a carousel. I believed that everything was done correctly, but when I click on the next button, nothing happens. <!DOCTYPE html> < ...

javascripthtmlcssbootstrap-4carousel

Position the DIVs at the bottom of the TD

I'm having trouble aligning two DIVs within a table TD to the bottom of the table. Despite trying various alignment methods, the left DIV simply won't move. It's crucial for me to design this email responsively, ensuring it still displays co ...

htmlcssvertical-alignment

What is the purpose of the video-js endcard plugin incorporating native controls into the player?

Endcard is a unique plugin designed for the video-js html5 video player that adds clickable links to the end of a video. (More information on endcards can be found here: https://github.com/theonion/videojs-endcard). To implement an endcard, simply include ...

javascriptcssvideo.js

What is the functionality of 'min-height: 100vh' when child elements stack due to a small width?

In a parent element, I have two child elements: <div id="registration"> <div id="left-panel"></div> <div id="right-panel"></div> </div> The styling is as follows: #registration{ @include l { flex-dire ...

htmlcss

HTML and CSS: Aligning Text on the Left and Image on the Right - A Guide to Positioning Elements

Just starting out with HTML and CSS, I've run into some issues while writing my code. My goal is to have Text (on the left middle part) and image (on the right middle part) displayed side by side A responsive design that stacks the text on top of t ...

htmlcssresponsive

Issue with JQuery addClass functionality in Firefox

I've come across numerous posts on this topic, but none of them have provided a solution. I recently added drag and drop functionality to my website. When I drag an item over a valid container, I add a specific class to it. Here is the HTML for the ...

javascriptjqueryhtmlcss

"Utilizing social links in web design for a seamless user experience

I'm currently exploring ways to repair the design of social media links. The GitHub and Spotify icons are displaying at different sizes, and it seems like the Blogger icon is not aligning correctly: Referring to How To Create Social Media Buttons - ...

htmlcssicons

How come the dropdown menu consistently disrupts my CSS design?

Whenever I add a dropdown menu, my CSS layout gets all messed up. Can someone please explain why this happens and how to fix it? Below is the code snippet: <asp:Label ID="projnamelbl" runat="server" CssClass="editlabels" Text="Project Name"></as ...

c#asp.netcss

What is the reason behind the `h-full`/`height:100%` not completely filling the void within a div element?

The issue lies in the structure of my content, which includes a title, a subtitle, and a footer. My desire is for the subtitle's div to fill the gap between the title and the footer. I attempted using h-full on the div element, but it had no noticeab ...

htmlcssnext.jsflexboxtailwind-css

Can a universal selector be used to target a specific nth element and all subsequent occurrences of that element type?

As I navigate through using a data scraper, I find myself in the realm of code where my knowledge is limited. The tool I am using is free but comes with its limitations such as a crawl limit and no option to resume from the endpoint. My goal is to scrape ...

cssweb-scrapingxpathselectorparsehub

Dim the brightness of an image on Internet Explorer

I discovered this code on another site and it functions flawlessly in Chrome and FF, however, IE (version 11.0.9) doesn't seem to like it. -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); fil ...

javascripthtmlcss

Adjust the translateZ value according to the dynamic height of the element

A unique rotating cube effect has been developed using 3D css transformations. To achieve this, the following transform is applied to a child element: transform: translateY(-50%) translateZ(-75px) rotateX(90deg) ; In addition, the parent element contain ...

csscss-transforms

What is the process of importing a cascading style sheet into a C# object?

Currently, I am working on a web application and I would like to provide users with the flexibility to change the styling elements of CSS linked to a page through an admin screen. I have been exploring ways to load a CSS file into a C# object or convert ...

c#cssobject