IE11のtable-cellの上下にパディングボーダーがあります

Question

左側にボーダーがあるテーブルセルを持つCSSテーブルが必要です（fiddle参照）。これは絶対的な位置付けによって動作し、Chromeの上下の値を使用します。 しかし、IE11（と私が推測するより古い）で、国境は全く示されていません。これを達成するための最良の解決策は何ですか？それはすべてのブラウザ（IE9まで）で動作しますか？ https://jsfiddle.net/jhparj52/7/

HTML：

<div class="the-table"> 
    <div class="cell-containing-border"> 
     <div class="the-border"></div> 
    <div> 
</div> 
</div> 
    <div class="cell-not-containing-border"></div> 
</div> 

CSS：

.the-table { 
    display: table; 
    height: 80px; 
    background-color: red; 
    width: 80px; 
} 

.cell-containing-border { 
    display:table-cell; 
    position: relative; 
} 

.the-border { 
    top: 10px; 
    bottom: 10px; 
    position: absolute; 
    border-left: 4px solid black; 
} 

.cell-not-containing-border { 
    display: table-cell; 
    height: 40px; 
} 

Answer 1

パディングを追加するには、問題を修正するようだ：

.the-table { 
 
    display: table; 
 
    height: 80px; 
 
    background-color: red; 
 
    width: 80px; 
 
} 
 

 
.cell-containing-border { 
 
    display: table-cell; 
 
    position: relative; 
 
} 
 

 
.the-border { 
 
    top: 10px; 
 
    bottom: 10px; 
 
    position: absolute; 
 
    border-left: 4px solid black; 
 
    padding: 20px 0px 20px 0; 
 
} 
 

 
.cell-not-containing-border { 
 
    display: table-cell; 
 
    height: 40px; 
 
}

<div class="the-table"> 
 
    <div class="cell-containing-border"> 
 
    <div class="the-border"> 
 

 
    </div> 
 
    <div> 
 

 
    </div> 
 
    </div> 
 
    <div class="cell-not-containing-border"> 
 

 
    </div> 
 
</div>

Answer 2

私が見つけることができる唯一の解決策は、境界に明示的な高さを設定することです。親に固定された高さでは、上下に同じパディングを得るために高さを計算することができます。

.the-table { 
 
    display: table; 
 
    height: 80px; 
 
    background-color: red; 
 
    width: 80px; 
 
} 
 
    
 
.cell-containing-border { 
 
    display:table-cell; 
 
    position: relative; 
 
} 
 
    
 
.the-border { 
 
    top: 10px; 
 
    position: absolute; 
 
    border-left: 4px solid black; 
 
    height: 60px; 
 
} 
 
    
 
.cell-not-containing-border { 
 
    display: table-cell; 
 
    height: 40px; 
 
}

<div class="the-table"> 
 
    <div class="cell-containing-border"> 
 
    <div class="the-border"></div> 
 
    <div></div> 
 
    </div> 
 
    <div class="cell-not-containing-border"></div> 
 
</div>