CODEWITHSUNDEEP
htmlcssinternet-explorer
Jan Van der Haegen
Jan Van der Haegen

Reputation: 373

Div with absolute positioning not taking full height of TD (IE issue)

I have a table where the first column spans multiple rows. I'm trying to add a side-border to it with some nice padding (not absolutely glued in the corners). Hence I thought to just draw an absolutely positioned div in the td. Unfortunately, in IE the absolutely positioned div is calculated based on the single row height, not the height of the actual td. Can anyone help figure this out? JSfiddle available =)

Thanks!

td {
  position: relative;
  width: 50px;
}
.side {
  position: absolute;
  top: 5px;
  bottom: 5px;
  right: 5px;
  background-color: green;
  width: 5px;
}
.one {
  background-color: orange;
}
.two {
  background-color: blue;
}
.three {
  background-color: red;
}
<table>
  <tr>
    <td class="one" rowspan="2">
      <div class="side"></div>
      1

    </td>
    <td class="two">2</td>
  </tr>
  <tr>
    <td class="three">3</td>
  </tr>
</table>

Upvotes: 2

Views: 692

Answers (1)

Arathi Sreekumar
Arathi Sreekumar

Reputation: 2584

Position relative on td's is undefined as per the css spec. So there need not be consistent results for this. I can suggest an alternate solution, which is to apply the styles directly to the td itself:

.one {
  background-color: orange;
  border-right: 5px solid green;
  outline: 5px solid orange;
}

https://jsfiddle.net/8g2dc2k3/2/

Of course that might mean adjusting styling for other td's to manage the border spacing.

It is a bit unconventional and I am using outline property for td to be same as the background colour in order to make this work.

Upvotes: 1

Related Questions