border-collapseを使用する場合、JavaScriptのborder-bottom-widthを計算する方法は？

Question

とth { border-bottom: 11px solid black }を組み合わせて使用​​すると、JavaScriptでborder-bottom-widthを計算することができないようです。

window.getComputedStyle(th).getPropertyValue('border-bottom-width')は一切手助けしません。私はborder-collapseを削除すると、すべてのブラウザでは、11pxを返す6px

：11px

IE11：5.5px

Firefoxのちょうど別のブラウザでコンソールに何this fiddleログ...

• クローム見ます私が期待するように。

  border-collapseを使用すると正確な境界幅を取得する信頼性の高い方法はありますか？または、thead,trまたはthのいずれかの高さ（枠線を含む）をブラウザ間で同じ矛盾を起こさずに取得する方法はありますか？

Answer 1

興味深い！ plain inconsistency between browsersのようだが、これには単純な解決策はないと思う。とにかく、ここでハック解決策/回避策です：クローム& Firefoxで動作確認済み

var th = document.getElementById('th'); 
 
var table = document.getElementById('table'); 
 
var style = window.getComputedStyle(th); 
 

 
table.style.borderCollapse = 'separate'; 
 
var borderHeight = style.getPropertyValue('border-bottom-width'); 
 
table.style.borderCollapse = 'collapse'; 
 
console.log(borderHeight);

table { 
 
    border-collapse: collapse; 
 
} 
 
th { 
 
    border-bottom: 11px solid red; 
 
}

<table id="table"> 
 
    <tr> 
 
    <th id="th">TH</th> 
 
    </tr> 
 
</table>

は、両方とも 11pxを返しました。

---

EDIT：@Eric Nの答えに基づいて、あなたはth秒にdisplay: blockを追加する幸運を得るかもしれません。そうすればテーブルのレイアウトが壊れ、そのことを回避する必要があります。そのための例：

var th = document.getElementById('th'); 
 
var style = window.getComputedStyle(th); 
 

 
var borderHeight = style.getPropertyValue('border-bottom-width'); 
 
console.log(borderHeight);

table { 
 
    border-collapse: collapse; 
 
} 
 
th { 
 
    display: block; 
 
    float: left; 
 
    border-bottom: 11px solid red; 
 
}

<table id="table"> 
 
    <tr> 
 
    <th id="th">TH</th> 
 
    <th>TH</th> 
 
    <th>TH</th> 
 
    </tr> 
 
</table>

Answer 2

this postに基づいて、次のように表示されます。table-cell（あなたのセルを継承する）異なるブラウザーで異なる高さ/ボーダー幅の結果が得られます。彼らはあなたの期待通りにブラウザがその価値を計算するようにするために、ディスプレイをブロックするように変更することをお勧めします。