CODEWITHSUNDEEP
htmlcss
m.popov
m.popov

Reputation: 566

"border-collapse: collapse" removes padding from table

I have two questions:

  1. is there a logical explanation, Why is this working like that?
  2. Is there a CSS workaround for that situation?

Thanks!

table {
      border-collapse: collapse;
      padding:30px; /* Padding not working */
    }
<table>
    <tr>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
    </tr>
</table>

Upvotes: 17

Views: 12351

Answers (1)

Quentin
Quentin

Reputation: 943569

is there a logical explanation, Why is this working like that?

When you collapse the borders, it joins adjacent borders together.

The border around the outside edge of the table is adjacent to the outside borders of the outside cells.

If those borders are joined together then you can't put padding between them. There is no "between".

Is there a CSS workaround for that situation?

Not, in general, a plain one.

You need to add another element around the table, and place the padding there.

In this case, you already have the container div, so you can move the padding to that.

.container {
  width: 400px;
  height: 300px;
  margin: 40px auto;
  background: #ddd;
  padding: 30px;
}

table {
  text-align: center;
  width: 100%;
  height: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid red;
}
<div class="container">
  <table>
    <tr>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
    </tr>
  </table>
</div>

Upvotes: 11

Related Questions