CODEWITHSUNDEEP
htmlcss
mrjayviper
mrjayviper

Reputation: 2388

how to simulate this table using divs?

I have this screenshot. The one above is using div. The one below is using table. I tried making the one above look similar to the one below but I'm getting nowhere.

My aim is to simulate a stacked horizontal bar. I've found similar CSS examples on the net but it won't let me add the text inside the "box".

Code Example

br.clear {
  float: clear;
}

div.fullwidth {
  border: 1px solid black; 
  height: 40px;
  max-width: 100px;
}
div.available {
  background-color: #22BB22;
  color: #111111;
  float: left;
  font-size: 20px;
  height: 40px;
  text-align: center;
  line-height: 40px;

}
div.notavailable {
  background-color: #222222;
  color: #DDDDDD;
  float: left;
  font-size: 20px;
  height: 40px;
  text-align: center;
  line-height: 40px;

}
<div class="fullwidth" style="height: 40px;">
  <div class="available" width="50px">10</div>
  <div class="notavailable" width="50px">10</div>
  <br class="clear" />
</div>
<hr>
<table>
  <tr>
    <td style="background-color: green; width: 50px; text-align: center;">10</td>
    <td style="background-color: blue; width: 50px; text-align: center;">10</td>
</table>

Upvotes: 0

Views: 68

Answers (3)

Ahs N
Ahs N

Reputation: 8366

This is what I did:

br.clear {
  float: clear;
}

div.fullwidth {
  display: table;
}

div.available {
  background-color: green;
  color: #111111;
  text-align: center;
}

div.notavailable {
  background-color: blue;
  color: #DDDDDD;
  text-align: center;
}

.fullwidth div {
  width: 53px;
  height: 20px;
  display: table-cell;
  margin: 2px;
  border-spacing: 5px;
  border: solid 1px white;

    color:black;
}

Here is the JSFiddle demo

Upvotes: 1

Sowmya
Sowmya

Reputation: 26969

Something like this?

 div.fullwidth {
                /*border: 1px solid black; */
                height: 20px;
                max-width: 100px;
            }
            div.available {
                background-color: #22BB22;
                color: #111111;
                float: left;
                font-size: 20px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                width:49%

            }
            div.notavailable {
                background-color: #222222;
                color: #DDDDDD;
                float: left;
                font-size: 20px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                 width:49%;
                 border-left:2px solid #fff

            }

DEMO

Upvotes: 1

Krish
Krish

Reputation: 1894

br.clear {
  float: clear;
}

div.fullwidth {
  border: 1px solid black; 
  height: 40px;
  max-width: 100px;
}
div.available {
  background-color: #22BB22;
  color: #111111;
  float: left;
  font-size: 20px;
  height: 40px;
  text-align: center;
  line-height: 40px;

}
div.notavailable {
  background-color: #222222;
  color: #DDDDDD;
  float: left;
  font-size: 20px;
  height: 40px;
  text-align: center;
  line-height: 40px;

}
<div class="fullwidth" style="height: 40px;">
  <div class="available" width="50px">10</div>
  <div class="notavailable" width="50px">10</div>
  <br class="clear" />
</div>
<hr>
<table style="border:solid 1px #000;" cellpadding="0" cellspacing="0">
  <tr>
    <td style="background-color: green; width: 20px; height: 40px; text-align: center;">10</td>
    <td style="background-color: blue; width: 20px; height: 40px; color: #fff; text-align: center;">10</td>
    <td style="width: 60px;"></td>
</table>

Upvotes: 1

Related Questions