Switch out the rowspan attribute in HTML for a CSS alternative

Question

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.

css html-table

Answer 1

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

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 3

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 4

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 5

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

Answer 6

.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

Switch out the rowspan attribute in HTML for a CSS alternative

Answer №1

Answer №2

Answer №3

Similar questions

I require the flexbox children to be arranged in a regular manner

The CSS outline properties vary between input elements and input elements in focus

What is the best way to trigger a JavaScript onclick event for a button that is located within a dropdown menu on an HTML page

Aligning three hyperlinks evenly to spread across the webpage

Steps for shaping the dialog of Material-UI to fit an image

Arranging the navigation bar at the top of my chatbot in HTML

The background color of the columns is overwhelming

Can you guide me on where to find the login with Facebook button on this site?

Tips for ensuring an image fits perfectly within a MUI grid

Modifying the appearance of a WordPress website with CSS styling

Place the border image underneath the div element

Arranging Divs Inside a Container Div - Dealing with Overflow

How can we reduce the use of !important in SCSS when working with React and Material UI?

Could you advise on the best placement for my upcoming JQuery animation?

Tips for containing `overflow` within a flexbox container

Adaptable CSS triangle design

div is consistently correct across all web browsers

Hiding an HTML image element by setting its display to none will prevent it from being visible if later changed to block display

tips for creating a jquery/css scales animation

React Images: Carousel display issue with images not centered