How can I minimize the top and bottom "padding" for HTML table cells?

Question

How can I minimize the top and bottom "padding" for HTML table cells?

3.4k Views Asked by mjn At 03 June 2019 at 11:48

I try to render a table with as litte text cell padding above and below as possible.

The snippet below shows what I have done so far. However it still contains visible top and bottom "padding" for the cell text.

What other CSS options exist to reduce this white space above the text, so that the text is rendered just below the top line, and the bottom line is drawn just below the text without a gap?

td {
  border: 1px solid silver;
  line-height: 1;
}

table {
  border-collapse: collapse;
}

<!DOCTYPE html>
<html>

<head>
  <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Table Test</title>
</head>

<body>
  <table>
    <tr>
      <td>
        First row
      </td>
    </tr>
    <tr>
      <td>
        Second row
      </td>
    </tr>
  </table>
</body>

</html>

Many thanks for the answers so far!

In my case, the actual font families and font sizes are unknown, this means that the CSS can't use any fixed values for line height as this has the risk of cut-off characters. So I am looking for a 'canonical' and safe solution.

Ideally, there is just one single CSS setting which causes the 'gap' between text and border to disappear, and works with all fonts families and font sizes (there might be more than one font used in a single cell).

Original Q&A

There are 5 best solutions below

**wasanga7** · Answer 1 · 2019-06-03T11:53:47.140000

wasanga7 On 03 June 2019 at 11:53

Try this:

body,
p {
  margin: 0px;
}

td {
  border: 1px solid silver;
  padding:0; 
  margin:0;
}

table {
  border-collapse: collapse;
}

It minimizes even more the margin and the padding in the cell.

**SuRo** · Answer 2 · 2019-06-03T11:57:34.100000

Do you tried to add a div on each row to margin-bottom them ?

Like that :

<!DOCTYPE html>
<html>

<head>
  <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Table Test</title>
</head>

<body>
  <table>
    <tr>
      <td>
        <p>
   <div class="FirstRow">
          First row
   </div>
        </p>
      </td>
    </tr>
    <tr>
      <td>
        <p>
          <div class="SecondRow">
          Second row
          </div>
        </p>
      </td>
    </tr>
  </table>
</body>

</html>

and

body,
p {
  margin: 0px;
}

td {
  border: 1px solid silver;
}

table {
  border-collapse: collapse;
}

 .FirstRow {
  margin-bottom: ...px;
}

 .SecondRow {
  margn-bottom: ...px;
}

 table {
  border-collapse: collapse;
}

?

**maddy23285** · Answer 3 · 2019-06-03T12:05:27.863000

maddy23285 On 03 June 2019 at 12:05

Try this:

td {
  line-height: 10px; /* or value which suits your design */
}

How about this?:

td div{
    margin-top: -4px; /* or value which suits your design */
}

....
<td><div>Your Data</div></td>
....

**Mileesh M S** · Answer 4 · 2019-06-03T12:17:10.740000

the cell itself also give padding.So please give "padding:0" and "line-height:.9em"(90% of font-size).

td {
  border: 1px solid silver;
  padding:0;
  line-height:.9em;
}

body,
p {
  margin: 0;
}

td {
  border: 1px solid silver;
  vertical-align:top;
  line-height:.9em;
padding:0;

}

table {
  border-collapse: collapse;
    border: 1px solid;
   
}

<!DOCTYPE html>
<html>

<head>
  <title>Table Test</title>
</head>

<body>
  <table>
    <tr>
      <td>
        <p>
          First row
        </p>
      </td>
    </tr>
    <tr>
      <td>
        <p>
          Second row jygq
        </p>
      </td>
    </tr>
  </table>
</body>

</html>

**Harikrishnan k** · Answer 5 · 2019-06-03T13:00:12.063000

Harikrishnan k On 03 June 2019 at 13:00

first make the cell font family same, here you are describing only one cell font family, that's why both cells have different line height and padding.

so make it one font family && make line height 12px;

How can I minimize the top and bottom "padding" for HTML table cells?

There are 5 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in HTML-TABLE

Related Questions in CELLPADDING

Trending Questions

Popular # Hahtags

Popular Questions