3

When using table { border-collapse: collapse; } combined with th { border-bottom: 11px solid black }, it seems impossible to compute the border-bottom-width in JavaScript.

window.getComputedStyle(th).getPropertyValue('border-bottom-width') does not help at all. Just see what this fiddle logs to the console in different browsers...

  • Chrome: 11px
  • IE11: 5.5px
  • Firefox: 6px

If I remove border-collapse all browsers return 11px, as I would expect.

Is there a more reliable way to get the precise border-width when using border-collapse? OR is there a way to get the height (including borders) of either the thead, tr or th without running into the same inconsistencies between browsers?

Rudey
  • 4,717
  • 4
  • 42
  • 84
  • Possible duplicate of [Get border width from a div with plain javascript](http://stackoverflow.com/questions/14681002/get-border-width-from-a-div-with-plain-javascript) – Fabian Schultz Oct 21 '16 at 21:56
  • @FabianSchultz Those answers are exactly what I'm doing here, my question is specifically about doing this when `border-collapse` is present. – Rudey Oct 21 '16 at 22:00

2 Answers2

4

Interesting! Seems like it's a plain inconsistency between browsers, don't think there's a simple solution to this. Anyways, here's a hacky solution/workaround:

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>

Tested in Chrome & Firefox, both returned 11px.

EDIT: Based on @Eric N's answer, you might get lucky adding display: block to the ths. That would break the table layout then and you would need to work around that. Example for that:

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>
Community
  • 1
  • 1
Fabian Schultz
  • 18,138
  • 5
  • 49
  • 56
  • While these solutions work, they seems to return decimal numbers in Firefox when the zoom level is not 100%. That seems to be a separate bug, not related to tables. – Rudey Oct 21 '16 at 22:46
  • Got it to work perfectly with Firefox's zoom issues, by using `th.offsetHeight - th.clientHeight` after temporarily setting `border-collapse` to `separate` as you suggested. – Rudey Oct 21 '16 at 22:59
1

Based on this post, it appears having a display:table-cell (inherit for your cells) yield different height/border-width results in different browsers. They suggest changing the display to block on your th to force the browser to calculate that value as you would expect.

Community
  • 1
  • 1
Eric N
  • 2,136
  • 13
  • 13