How to make table by CSS?

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.

@PhilAndelhofs The result is same when I use table-cell for li(s). — Mike, Aug 26 '15 at 16:46
there is an issue with your html, result is last `
` but desired result `Results` are first col so you have to sort that out and also set `float:left` to `c_result ul` CSS selector, here is a fiddle http://jsfiddle.net/j26q0w5g/, you can take it from here — Shehary, Aug 26 '15 at 16:48

score 2 · Accepted Answer · edited May 23 '17 at 12:07

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>

The result get better but there are some problem yet. the column and cell height is not 100% and **male** and **female** results is not separate. — Mike, Aug 26 '15 at 17:03
I guess my HTML should change for **Male** and **Female** result. :) — Mike, Aug 26 '15 at 17:12
@Mike there is a lot to change.. but will not work with this HTML can you change the HTML ? — , Aug 26 '15 at 17:25
Thank you for your answer, but male and female result section is separate. — Mike, Aug 26 '15 at 17:56
@Mike i explained inside the snippet so you can change what you like :) — , Aug 26 '15 at 18:14

How to make table by CSS?

1 Answers1