CODEWITHSUNDEEP
htmlcsshtml-table
Victor Silva
Victor Silva

Reputation: 564

Position divs in front of other divs inside a table cell

Inside a table cell, I have .interval divs, that must appear side-by-side, and I also have .shift divs, that must appear in front of the .interval divs and have their specific 'left' and 'width' values.

So far, I managed to position the divs the way I want only on separate cells (.interval divs on the first line, .shift divs on the second line):

But how do I put them in the same cell, like in the image below?

My current code:

table {
  width: 100%;
}
table tr,
table tr td {
  height: 48px;
}
table tr td {
  background-color: #EDEDED
}
.interval {
  height: 48px;
  float: left;
  background-color: #f9f2e2;
  box-sizing: border-box;
  border-left: solid 1px #d5cbc2;
  width: 10%;
}
.shift {
  height: 40px;
  float: left;
  position: relative;
  background-color: #e9e2d2;
}
.shift1 {
  left: 10%;
  width: 20%;
}
.shift2 {
  left: 40%;
  width: 10%;
}
.shift3 {
  left: 80%;
  width: 20%;
}
<table>
  <tr>
    <td>
      <div class="interval"></div>
      <div class="interval"></div>
      <div class="interval"></div>
      <div class="interval"></div>
      <div class="interval"></div>
      <div class="interval"></div>
      <div class="interval"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="shift shift1"></div>
      <div class="shift shift2"></div>
    </td>
  </tr>
</table>

Upvotes: 0

Views: 271

Answers (2)

Victor Silva
Victor Silva

Reputation: 564

I found how to do it:

table {
  width: 100%;
}
table tr,
table tr td {
  height: 48px;
}
table tr td {
  background-color: #EDEDED;
  position: relative;
}
.inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 48px;
}
.interval {
  height: 48px;
  float: left;
  background-color: #f9f2e2;
  box-sizing: border-box;
  border-left: solid 1px #d5cbc2;
  width: 10%;
}
.shift {
  margin: 4px 0;
  height: 40px;
  float: left;
  position: relative;
  background-color: #e9e2d2;
}
.shift1 {
  left: 10%;
  width: 20%;
}
.shift2 {
  left: 40%;
  width: 10%;
}
<table>
  <tr>
    <td width="60px">test:</td>
    <td>
      <div class="inner">
        <div class="interval"></div>
        <div class="interval"></div>
        <div class="interval"></div>
        <div class="interval"></div>
        <div class="interval"></div>
        <div class="interval"></div>
        <div class="interval"></div>
      </div>
      <div class="inner">
        <div class="shift shift1"></div>
        <div class="shift shift2"></div>
      </div>
    </td>
  </tr>
</table>

Upvotes: 0

Varin
Varin

Reputation: 2443

You need to give .shift position:absolute; and put it inside the other div's, then position them.

Divs containing .shift elements have to have position:relative property.

Here is jsfiddle https://jsfiddle.net/8tkue3qn/

Upvotes: 1

Related Questions