How to make table by CSS?


Tags: html,css

Problem :

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: This is the result

But my desired result is : enter image description here

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.



Solution :

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>


    CSS Howto..

    How to place an image properly with CSS

    How to style 404 page in WAMP server

    How can I apply percentage-based positioning to background-image sprites with pure CSS?

    How to get jQuery to recognize mouse over image once per hover

    How to apply css for anchor tag inside table

    How to overlap a child element of one div with`display:table-cell` over another div with `display:table-cell?`

    How can I center align the list horizontally?

    Flex 4 How to set background image to VBox?

    How to format text in input box with css

    Thai line breaking: how to break Thai text effectively

    How to - dynamically - change link text color in jQuery Mobile?

    How do you vertically align the body tag of an HTML document?

    .show() not working on page load

    How to make element fade in on page scroll?

    How to fade loop background images in Twitter's Bootstrap 3

    How do I align this icon while having the input take 100% width?

    How to let 3 divs displayed in line, won't wrap if I resize the browser?

    How to edit a css file in ASP.NET using C# to change the website design

    How to toggle display: inline and display toggle?

    How to use a different stylesheet for iphone or android? I can modify only html later on

    How to use CSS Background-size: cover; but leave space for menu?

    How to add css library to project generated with angular-cli@webpack

    how to layout tictactoe with html and css on a webpage

    HTML/ CSS: A href exceeds linking image - how to avoid?

    how to reference background image urls in css through config entrys

    How to change opacity suddenly without transition (without fade) using keyframes

    How to override cloudmade maps css with your own css? [closed]

    How to run a Javascript function on an iframe before the source (src) is loaded?

    jQuery - how do I show the full navbar at certain width?

    Vaadin - How to customize MenuBar to look like links