Use of "colspan" in div style!

We generally use the code “colspan” in table style. My intention is to know about the similar code for div style. As my code is being much more longer, i want to reduce the code. For example:I am bounded to use the code “[div class=“dpCell background height1”][/div]” 5 times in order to get my desired result.
The page link is given for yours kind concentration: http://dot.kr/z-test/hmtl/div.php

There is no equivalent for colspan or rowspan in css display: table properties unfortunately.

If you can explain what you are trying to do with real data then we may be able to offer a solution but there is no rowspan or colspan in css properties and CSS cannot mimic those equivalent table attributes.

Sometimes you can use nested display:table divs to get the effect you want but only if layouts are simple.

On another note why are you using empty divs for your borders?

Why not just add a border to the cells?
I’m curious about what your intention is. It looks like to are trying to emulate the look of a html table, without using table elements.

1 Like

Thank you sir for your cooperation. Actually, I want to make the result of my second page similar as first one given below for your kind attention. Moreover, I like to use div style.

  1. http://dot.kr/z-test/hmtl/colspan2.php
  2. http://dot.kr/z-test/hmtl/colspan3.php

It does look like tabular data, so it begs the question: why not use actual tables?
I know people get it drummed into them “Don’t use tables in web layouts”. This is correct for general layouts, but for actual tabular data, it is correct to use tables.

To do this with display table, you would need to make each row a separate table or nest the tables.
But I have a feeling this may be case where you should actually just use tables.

1 Like

Yes it looks suitable for tabular data and therefore an html table would be best,

Just for interests sake then this is how it could be achieved with css.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap {
	max-width:960px;
	margin:auto;
	width:100%;
	display:table;
	font-size:100%;
	border-collapse:collapse;
}
.wrap .td {
	display:table-cell;
	vertical-align:top;
	border:1px solid #000;
}
.wrap .wrap .td {
	padding:5px;
	border:none;
	border-top:1px solid #000;
	border-right:1px solid #000;
}
.wrap h2 {
	font-size:100%;
	margin:0;
	padding:5px;
}
</style>
</head>

<body>
<div class="wrap">
  <div class="td">
    <h2>Asia</h2>
    <div class="wrap">
      <div class="td">Korea</div>
      <div class="td">Japan</div>
    </div>
  </div>
  <div class="td">
    <h2>Europe</h2>
    <div class="wrap">
      <div class="td">Germany</div>
      <div class="td">France</div>
      <div class="td">England</div>
    </div>
  </div>
</div>
</body>
</html>

You could do much the same with flexbox also.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.