Snorlax Snorlax - 1 month ago 22
CSS Question

border-collapse: collapse not working properly when scaling

I'm trying to remove the border of a table using

border-collapse: collapse
. It works great and as it should, but when I start doing
transform: scale()
to make it smaller, the borders magically appear again.

https://jsfiddle.net/ox11pvag/

table {
border-collapse: collapse;

-moz-transform: scale(0.6);
-moz-transform-origin: top left;
-o-transform: scale(0.6);
-o-transform-origin: top left;
-webkit-transform: scale(0.6);
-webkit-transform-origin: top left;
transform: scale(0.6);
transform-origin: top left;
}


Is there a way to force the borders to collapse no matter what? I assume overlapping them (negative margin) is a way, but it sounds so dirty.

Answer

When browser is scaling the table it is not making exact calculations for the width of td elements. As a result there is some gap between adjacent td elements and background of parent element is visible through this gap which looks like td elements have borders(But actually its gap, if you will apply some background-color on parent you will see it).

You can fix this by doing the following changes:

  1. Remove background of tbody tr:nth-child(odd) and apply it to table.
  2. Add 2px or 3px border-right having the color same as background on td inside even rows and inside thead.

Working snippet is below:

table {
  border-collapse: collapse;
  transform: scale(0.6);
  transform-origin: top left;
  background: #7892a1;
  width: 70%;
}

thead {
  height: 50px;
  line-height: 50px;
}

tbody tr {
  height: 50px;
  line-height: 50px;
}

thead {
  background: #d2dbe0;
}

thead th {
  border-right: 2px solid #d2dbe0;
}

tbody tr:nth-child(even) {
  background: #a5b7c0;
}

tbody tr:nth-child(even) td {
  border-right: 2px solid #a5b7c0;
}
<table>
  <thead>
    <th>Something</th>
    <th>Something 2</th>
    <th>Something 3</th>
  </thead>
  <tbody>
    <tr>
      <td>Some data</td>
      <td>Some more data</td>
      <td>Most data</td>
    </tr>
    <tr>
      <td>Some data</td>
      <td>Some more data</td>
      <td>Most data</td>
    </tr>
    <tr>
      <td>Some data</td>
      <td>Some more data</td>
      <td>Most data</td>
    </tr>
  </tbody>
</table>