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.

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>