CODEWITHSUNDEEP
css
MortenMoulder
MortenMoulder

Reputation: 6646

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.

Upvotes: 0

Views: 451

Answers (1)

Mohammad Usman
Mohammad Usman

Reputation: 39322

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>

Upvotes: 1

Related Questions