0

I am encountering an issue in IE9,10,11 where an ::after pseudo element will not fill 100% of the height of it's td parent.

If the first column in the second row had two lines of text, the pseudo element would fill the full height with no problem. So, I figured that the issue was happening because the td was not filling the height of the tr but that isn't the case.

The first screenshot is Chrome and the second is IE9

enter image description here enter image description here

HTML

<table>
  <tr>
    <td>Two<br/>Lines</td>
    <td>Two<br/>Lines</td>
  </tr>
  <tr>
    <td>One Line</td>
    <td>Two <br/>Lines</td>
  </tr>
</table>

CSS

table td {
  border-bottom: 1px solid;
}

table td:first-child {
  position: relative;
}

table td:first-child::after {
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  width: 2px;
  height: 100%;
  display: block;
  background-color: orange;
}

Codepen: http://codepen.io/cbier/full/BjpaqB/

P.S. I am using an ::after pseudo-element instead of borders for a special reason and it is a requirement

Thanks!

Chris Bier
  • 14,183
  • 17
  • 67
  • 103
  • I found this issue in a slightly different form in these questions: http://stackoverflow.com/questions/27384433/ie-display-table-cell-child-ignores-height-100 http://stackoverflow.com/questions/25285595/height-100-percent-under-display-table-cell-in-ie – Chris Bier Jan 01 '16 at 02:00

2 Answers2

1

May be using a single pseudo element for the whole table ?

table {
  overflow: hidden;
}
table td {
  border-bottom: 1px solid;
}
table tr:first-child td:first-child {
  position: relative;
}
table tr:first-child td:first-child:after {
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  width: 2px;
  height: 1000px;
  display: block;
  background-color: orange;
}
<table>
  <tr>
    <td>Two<br/>Lines</td>
    <td>Two<br/>Lines</td>
  </tr>
  <tr>
    <td>One Line</td>
    <td>Two <br/>Lines</td>
  </tr>
</table>

An alternate way, with background : linear-gradient

table td {
  border-bottom: 1px solid;
}
table td:first-child {
  background-image: linear-gradient(270deg, orange 3px, transparent 3px);
}
<table>
  <tr>
    <td>Two<br/>Lines</td>
    <td>Two<br/>Lines</td>
  </tr>
  <tr>
    <td>One Line</td>
    <td>Two <br/>Lines</td>
  </tr>
</table>
vals
  • 61,425
  • 11
  • 89
  • 138
  • This is a clever idea! The only thing is that the table has a variable height, so a 100% height is still needed – Chris Bier Jan 04 '16 at 14:10
  • In my example, I set overflow: hidden to the table, and then a huge height, greater than needed.You can change height: 1000px to 9999px, for instance – vals Jan 04 '16 at 15:09
  • Thanks for the options but I've personally touched on that one already, too. I am looking for a less messy way to do it. Maybe there really is no way to make IE behave. Sorry I didn't notice that you used overflow hidden – Chris Bier Jan 04 '16 at 15:43
  • I know that you said that it should be a pseudo... but the reason that you stated is that it couldn't be a border, so I posted a solution with gradients. That will leave IE9 out, but may be you can solve it with filters.. (I Can't test IE9) – vals Jan 04 '16 at 17:16
  • Your solution was good the first time :) I just meant it couldn't use the `border` property since I'm using an image background on the pseduo element in my current scenario – Chris Bier Jan 04 '16 at 17:23
  • Sorry for the confusion – Chris Bier Jan 04 '16 at 17:47
0

You can use following code for it:

  table td:first-child::after {
    position: absolute;
    top: 0;
    right: 0;
    content: '';
    width: 2px;
    height: 45px;
   display: block;
   background-color: orange;
 }

it is giving same output in chromeas well as IE 9

Bijal
  • 132
  • 1
  • 8