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
  • 5K Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by z666zz666z

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.