Member Avatar for emulman

first, think to have this simple table:

<!DOCTYPE HTML>
<html>
<head>
  <title>Table with DIV and CSS</title>
  <style type="text/css">
  /*<![CDATA[*/
  #table { display: table; }
  .row { display: table-row; }
  .cell { display: table-cell; padding: 0.5em; border: 1px solid; }
  /*]]>*/
  </style>
</head>
<body>
<div id="table">
  <div class="row">
    <div class="cell">table with DIV and CSS</div>
  </div>
  <div class="row">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <div class="row">
    <div class="cell">4</div><div class="cell">5</div><div class="cell">6</div>
  </div>
  <div class="row">
    <div class="cell">7</div><div class="cell">8</div><div class="cell">9</div>
  </div>
</div>
</body>
</html>

as you can see, the string "table with DIV and CSS" appears only in the first left column of the table! i want it works like as follow:

<tr><td colspan="3">table with DIV and CSS</td></tr>

but it seems impossible to simulate a COLSPAN with CSS...some idea???

  • 3 Contributors
  • 4 Replies
  • 6K Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by z666zz666z

Dani AI

Generated

Short answer: CSS "table" layout does not support colspan/rowspan. Those spans are part of the HTML table model, not the CSS table box model. So with display: table and display: table-cell, there is no CSS property that will span cells across columns or rows. For true tabular data, the most robust choice remains real <table> markup for semantics and accessibility.

If you must use non-table elements and need arbitrary spans (e.g., a 5x5 with one cell spanning 2x2), use CSS Grid, which natively supports spanning in both directions. Example:

<style>
.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.cell { border: 1px solid #000; padding: .5em; }
.span2x2 { grid-column: 1 / span 2; grid-row: 1 / span 2; } /* like colspan=2, rowspan=2 */
.header   { grid-column: 1 / -1; } /* span full row, like colspan=5 */
</style>

<div class="grid">
  <div class="cell header">table with DIV and CSS</div>
  <div class="cell span2x2">A</div>
  <div class="cell">B</div><div class="cell">C</div><div class="cell">D</div>
  <!-- continue placing remaining cells -->
</div>

Notes:

  • Flexbox is one-dimensional, so it cannot simulate row spanning reliably.
  • If the content is truly tabular, prefer <table> for screen readers and keyboard navigation; if you must use <div>s, consider ARIA roles (role="table", row, cell) as a partial aid, though they do not fix layout or spanning.

References: MDN on CSS Grid Layout and display; browser support for Grid at Can I use CSS Grid.

Recommended Answers

All 4 Replies

Member Avatar for scottloway

You can define it as table-caption, though you'll want to consider how this effects users with browsers that don't support display: table (http://caniuse.com/#search=table).

<!DOCTYPE HTML>
<html>
<head>
  <title>Table with DIV and CSS</title>
  <style type="text/css">
	  #table { display: table; }
	  .caption { display: table-caption; padding: 0.5em; border: 1px solid #000; }
	  .row { display: table-row; }
	  .cell { display: table-cell; padding: 0.5em; border: 1px solid; }
  </style>
</head>
<body>
<div id="table">
  <div class="caption">table with DIV and CSS</div>
  <div class="row">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <div class="row">
    <div class="cell">4</div><div class="cell">5</div><div class="cell">6</div>
  </div>
  <div class="row">
    <div class="cell">7</div><div class="cell">8</div><div class="cell">9</div>
  </div>
</div>
</body>
</html>
Member Avatar for emulman

thank you very much! :icon_cheesygrin:

Member Avatar for scottloway

You're welcome; would you mind please marking the thread "solved"?

Cheers!

Member Avatar for z666zz666z

Hey! and waht about a five columns and a cell with colspan="3", how dare can be done.

I need to do such, since tags table tr and td are not allowed and need a table where some cells (if done with table tr and td tags) has colspan and rowspan with different values...

Just an example, imagine a table of 5x5...
-Cells 1-1 and 1-2 and 2-1 and 2-2 as one bigger cell, the rest as normal

I mean the first cell if done with td would have: colspan="2" and rowspan="2", but there are more than 2 cells on each row and also more than two rows.. so no cell takes a full row nor a full column... but some ones takes more than a cell.

Thanks.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.