How to make table by CSS? - html

Question

I try to use CSS display:table instead HTML table tags.
My HTML:
<div class="c_result">
<div class="rp-row">
<ul class="rp-first">
<li>London</li>
</ul>
<ul class="rp-second">
<li>Male</li>
<li>Female</li>
</ul>
<ul class="rp-result">
<li>result1</li>
<li>result2</li>
<li>result3</li>
</ul>
</div>
<div class="rp-row">
<ul class="rp-first">
<li>Paris</li>
</ul>
<ul class="rp-second">
<li>Male</li>
<li>Female</li>
</ul>
<ul class="rp-result">
<li>result4</li>
<li>result5</li>
<li>result6</li>
</ul>
</div>
</div>
My CSS:
.c_result {
border: 1px solid red;
display: table;
width: 100%;
}
.c_result .rp-row {
display: table-row;
border: 1px solid #000;
}
.c_result ul {
display: table-row;
}
.c_result .rp-row li {
display: table-row;
}
The result:
But my desired result is :
The border styles didn't apply too and when I try to use border it doesn't appear in the result , How can I do that ?
Best regards.

Answer 1

Is this already looking better ??
edit: colspan & rowspan not possible in css or with a trick
.c_result {
border: 1px solid red;
display: table;
width: 100%;
}
.rp-row {
display: table-row;
}
.cell {
display: table-cell;
}
<div class="c_result">
<div class="rp-row">
<ul class="cell rp-first">
<li>London</li>
</ul>
<ul class="cell rp-second">
<li>Male</li>
<li>Female</li>
</ul>
<ul class="cell rp-result">
<li>result1</li>
<li>result2</li>
<li>result3</li>
</ul>
</div>
<div class="rp-row">
<ul class="rp-first">
<li>Paris</li>
</ul>
<ul class="cell rp-second">
<li>Male</li>
<li>Female</li>
</ul>
<ul class="cell rp-result">
<li>result4</li>
<li>result5</li>
<li>result6</li>
</ul>
</div>
</div>
Edit:
.c_result {
width: 600px;
/* total width */
}
.c_result * {
display: block;
/* remove list items and so..*/
text-align: center;
/*center text*/
padding: 0;
/* reset */
margin: 0;
/* reset */
}
li {
outline: 1px solid black;
/*border is calculated in element width, outline not.*/
}
.rp-row > * {
float: right; /*floats bases to right*/
}
.rp-first {
width: 12.5%;
/* 1/8 width */
}
.rp-first li {
line-height: 198px;
/* base = floor ( 200 / 3 (max split) ) * 3 (max split) = 198 */
}
.rp-second {
width: 25%;
/* 2/8 width */
}
.rp-second li {
line-height: 99px;
/* base / 2 = 99; */
}
.rp-result {
width: 62.5%;
/* 6/8 width */
}
.rp-result li {
line-height: 66px;
/* base / 3 = 66; */
}
<div class="c_result">
<div class="rp-row">
<ul class="rp-first">
<li>London</li>
</ul>
<ul class="rp-second">
<li>Male</li>
<li>Female</li>
</ul>
<ul class="rp-result">
<li>result1</li>
<li>result2</li>
<li>result3</li>
</ul>
</div>
<div class="rp-row">
<ul class="rp-first">
<li>Paris</li>
</ul>
<ul class="rp-second">
<li>Male</li>
<li>Female</li>
</ul>
<ul class="rp-result">
<li>result4</li>
<li>result5</li>
<li>result6</li>
</ul>
</div>
</div>