CODEWITHSUNDEEP
htmlcsshtml-tablespacing
yoonicode
yoonicode

Reputation: 1477

Tables: when adding border, cells expand

I have a table of fixed width and height, and usually, it evenly distributes the cells to fit the given width and height. However, once I add borders on only some of the cells, the cells are no longer evenly spaced.

It appears that the cells with the border get more width than the other cells. Additionally, the cells with a thicker border get wider than the ones with a thin border.

Here is some code showing what happens. The green cells are the ones with a border-left, and the red and blue cells have no right or left border.

<table style="width: 500px; height: 1000px; border-spacing: 0; background-color: gray;">
  <tr>
  <td style="background-color: blue; border-left: none; border-top: white solid 1px;"></td>
    <td style="background-color: green; border-left: white solid 1px; border-top: white solid 1px;"></td>
    <td style="background-color: red; border-left: none; border-top: white solid 1px;"></td>
      <td style="background-color: blue; border-left: none; border-top: white solid 1px;"></td>
    <td style="background-color: green; border-left: white solid 1px; border-top: white solid 1px;"></td>
    <td style="background-color: red; border-left: none; border-top: white solid 1px;"></td>
      <td style="background-color: blue; border-left: none; border-top: white solid 1px;"></td>
    <td style="background-color: green; border-left: white solid 1px; border-top: white solid 1px;"></td>
    <td style="background-color: red; border-left: none; border-top: white solid 1px;"></td>
    </tr>
      <tr>
  <td style="background-color: blue; border-left: none; border-top: white solid 1px;"></td>
    <td style="background-color: green; border-left: white solid 1px; border-top: white solid 1px;"></td>
    <td style="background-color: red; border-left: none; border-top: white solid 1px;"></td>
      <td style="background-color: blue; border-left: none; border-top: white solid 1px;"></td>
    <td style="background-color: green; border-left: white solid 1px; border-top: white solid 1px;"></td>
    <td style="background-color: red; border-left: none; border-top: white solid 1px;"></td>
      <td style="background-color: blue; border-left: none; border-top: white solid 1px;"></td>
    <td style="background-color: green; border-left: white solid 1px; border-top: white solid 1px;"></td>
    <td style="background-color: red; border-left: none; border-top: white solid 1px;"></td>
    </tr>
      <tr>
  <td style="background-color: blue; border-left: none; border-top: white solid 1px;"></td>
    <td style="background-color: green; border-left: white solid 1px; border-top: white solid 1px;"></td>
    <td style="background-color: red; border-left: none; border-top: white solid 1px;"></td>
      <td style="background-color: blue; border-left: none; border-top: white solid 1px;"></td>
    <td style="background-color: green; border-left: white solid 1px; border-top: white solid 1px;"></td>
    <td style="background-color: red; border-left: none; border-top: white solid 1px;"></td>
      <td style="background-color: blue; border-left: none; border-top: white solid 1px;"></td>
    <td style="background-color: green; border-left: white solid 1px; border-top: white solid 1px;"></td>
    <td style="background-color: red; border-left: none; border-top: white solid 1px;"></td>
    </tr>

</table>

In case this is a browser-specific issue, here is a screenshot of Chrome 66 on Mac OS X High Sierra.Screenshot of table

I have confirmed in other browsers, and the same thing happens:

My question is: What causes this and how do I fix it? Please note that in my real code, I have borders of different thicknesses.

Upvotes: 1

Views: 1084

Answers (2)

Martijn Scheffer
Martijn Scheffer

Reputation: 691

i had the same problem, until i specified a with of an arbitrary 10% for all TD's

apparently this happens when no size is specified at all.

Upvotes: 0

wazz
wazz

Reputation: 5068

I'm not really sure what's causing it but I have a workaround.

Add a transparent border around all cells (use !important):

td { border: 1px solid transparent !important; }

then you'll also have to add !important to every individual cell that you add a border to.

<td style="background-color: green; 
    border-left: white solid 1px !important; 
    border-top: white solid 1px !important;">
</td>

I tried adding box-sizing to fix/understand what's happening but it seemed to have no effect. The overall size of the table may be affected with the added borders; you'll have to check that.

Upvotes: 2

Related Questions