CODEWITHSUNDEEP
csshtml
iefpw
iefpw

Reputation: 7042

Spacing/padding from table border and narrower rows

How do I add spacing/padding/margin from the table border?

I would want a narrower spacing between the table rows and more spacing/padding from the table border itself like:

<table /*inner margin/padding = 50px */>
<tr /* margin = 2px */><td>Hello</td></tr>
<tr /* margin = 2px */><td>Hello</td></tr>
<tr /* margin = 2px */><td>Hello</td></tr>
</table>

When I do:

 table border-collapse:separate; border-spacing: 10px;

The whole rows and the padding from the border increases. I want the padding between rows much narrower than the padding from the table borders. In other words I would want the outer padding increase, not the inner rows padding.

Upvotes: 0

Views: 1192

Answers (1)

Hashem Qolami
Hashem Qolami

Reputation: 99484

Is this what you want?

HTML: 

<table>
  <tr>
    <th>No.</th>
    <th>Name</th>
    <th>Family</th>
    <th>Email Address</th>
  </tr>
  <tr>
    <td>1</td>
    <td>John</td>
    <td>Doe</td>
    <td>[email protected]</td>
  </tr>
  <!-- So on -->
</table>

CSS: 

table {
  padding: 48px;              /* 48 + 2 = 50px */
  border-collapse: separate;  /*      |        */
  border-spacing: 2px;  /* <-----------        */
}

table, th, td {
  border: 1px solid black;
}

You could use border-spacing property to specify the distance between the borders of adjacent cells, and padding property to create space between borders of the table and its content.

JSBin Demo

Upvotes: 2

Related Questions