Cell border expanding total table's width

Question

I need a table which spans the full width of the parent container. The table's header cell cannot have any border while the data cell should. The cell borders should be uniformly 1px wide on all 4 sides, which means that the border needs to collapse. When I have styled my table like this in CSS I notce that the total table width is 100% + 1px. Could anyone help me and tell me what am I doing wrong?

* {
  box-sizing: border-box;
}

div {
  width: 200px;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td,
th {
  border: 1px solid #d3e0ee;
  padding: 5px;
}

th {
  border: 0px solid white;
  padding: 6px;
}

<div>

  <table>
    <tr>
      <th>Col 1</th>
      <th>Col2</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </table>
</div>

Demo also at https://jsfiddle.net/fbwyx66o/4/ (try in Chrome)

Edit 1: When the border is set to transparent (i.e. border: 1px solid transparent;) the overflow issue is gone but the browser still renders only half of the right hand side border. Please compare the th and td right border on the screenshot below:

`that the total table width is 100% + 1px` --> how ? it's 100% for me — Temani Afif, Apr 01 '18 at 17:29
table and div are same 200px and table width looks 100% for me from jsfiddle after inspecting from developer tools — Naga Sai A, Apr 01 '18 at 17:38
@NagaSaiA I agree, but then why is it overflowing by that 1px? — Dharman, Apr 01 '18 at 17:42
Removing overflow-x:auto, I see the same output in Chrome,FF,Edge: https://jsfiddle.net/dgrogan/fbwyx66o/54/ (both borders visible, which I think is what you want) Otherwise, all 3 browsers are different: https://jsfiddle.net/dgrogan/fbwyx66o/53/ (Edge cuts off right border, FF cuts off left, Chrome adds scrollbar that allows you to see both) — dgrogan, Apr 04 '18 at 17:33

score 1 · Accepted Answer · answered Apr 01 '18 at 18:41

1

It seems a Chrome bug when the render calculates the table size, it works in Firefox. Instead of removing border, make it transparent or use the same color as background.

  th {
    border-color: rgba(0, 0, 0, 0);
    border-bottom-color: #d3e0ee;
    padding: 6px;
  }

I tried the style above and it works fine in Chrome.

answered Apr 01 '18 at 18:41

jonastg

46
1
4

This is the first thing I tried. Unfortunately, when the border is transparent, the border-right is rendered as 0.5px. Transparent border fixes the overflow but it still looks odd with 0.5px border missing. I cannot use a static color for border because the background color isn't. – Dharman Apr 01 '18 at 18:55
I don't see the 0.5px border on the right (tried with Chrome 65 and FF 59) in the header. To use transparent color for top, right and left borders solves the problem of having different background colors, you only need to define border bottom color with the same color of cell borders. – jonastg Apr 01 '18 at 19:14

score 0 · Answer 2 · answered Apr 01 '18 at 19:11

To achieve expected result with border-collpase:collapse use below border for div

  div {
    width: 200px;
    overflow-x: auto;
    border:1px solid white;
  }

code sample - https://jsfiddle.net/Nagasai_Aytha/fbwyx66o/41/

It seems to be Chrome bug ,as in other browsers it looks fine

Check this for more details - Table width 100% is off by a single pixel (depending on actual width)

Cell border expanding total table's width

2 Answers2