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

Question

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).

@AndreF yes, this has a small effect. However there is still a visible padding left — mjn, Jun 03 '19 at 12:04
Don't use a `p` within your `td`...Unless you *really* mean you have a paragraph of text. See [Is it good to put `
` inside `
` to put content text?](https://stackoverflow.com/q/1944213/215552) — Heretic Monkey, Jun 03 '19 at 12:20
@HereticMonkey I removed the p (makes the example more readable) — mjn, Jun 03 '19 at 12:30

score 1 · Answer 1 · answered Jun 03 '19 at 13:00

1

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;

answered Jun 03 '19 at 13:00

Harikrishnan k

203
2
8

Many thanks, please see my edit - font families and font sizes are unknown so there is the danger that fixed values for line height cause cut-off characters. – mjn Jun 03 '19 at 13:02
ok use this way td { margin:0px; padding: 0px; line-height: 12px; } so no more padding and margin, basically you need to specify the line-height in pixels – Harikrishnan k Jun 03 '19 at 13:36

score 0 · Answer 2 · answered Jun 03 '19 at 11:53

0

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.

answered Jun 03 '19 at 11:53

wasanga7

242
1
3
17

With Firefox and Chrome, I see no difference. Which browser do you use for testing? – mjn Jun 03 '19 at 11:58
I'm using Chrome v74.0.3729.169 and I can see a bit of a difference. – wasanga7 Jun 03 '19 at 11:59
Same version here, I am not sure what is wrong with my browser. I will try again. – mjn Jun 03 '19 at 12:01

score 0 · Answer 3 · answered Jun 03 '19 at 11:57

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;
}

?

How would adding more elements to the HTML reduce the amount of space? Please [edit] your question to explain how this answers the OP's problem. — Heretic Monkey, Jun 03 '19 at 12:37
Hello, i added
element into html to edit them into css. And then add a margin-top: ...px; to reduce the padding — SuRo, Jun 03 '19 at 12:39

maddy23285 · Answer 4 · 2019-06-03T12:25:18.173

0

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>
....

edited Jun 03 '19 at 12:25

answered Jun 03 '19 at 12:05

maddy23285

738
6
16

line-height: 1; (unitless) is the recommended way https://developer.mozilla.org/en-US/docs/Web/CSS/line-height - I don't have control over the actual font sizes so I can't use a fixed value – mjn Jun 03 '19 at 12:14
1

"Try this" is rarely a good answer. Better to explain why you are suggesting the code present in the answer. – Heretic Monkey Jun 03 '19 at 12:23
@Heretic Monkey , property line-height controls the space between lines of text. As we know that, by default TD get automatically resized according to its child contents. So forcing it to reduce the line space might do the trick. – maddy23285 Jun 03 '19 at 12:30
[Edit] your question with the explanation so the OP and future visitors know that. – Heretic Monkey Jun 03 '19 at 12:33
In case of
css property margin-top accepts negative values also, so similarly you can push the div to pass through / overlap the default margin.
– maddy23285 Jun 03 '19 at 12:33

Mileesh M S · Answer 5 · 2019-06-03T12:58:55.537

0

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>

edited Jun 03 '19 at 12:58

answered Jun 03 '19 at 12:17

Mileesh M S

84
6

"Try this" is rarely a good answer. Better to explain why you are suggesting the code present in the answer. – Heretic Monkey Jun 03 '19 at 12:23
Sorry. I have added JSFiddle link – Mileesh M S Jun 03 '19 at 12:26
2

Adding a JSFiddle link was orthogonal what I was saying :). You should explain how your code solves the OP's problem. Note that you can use [Stack Snippets](https://meta.stackoverflow.com/q/358992/215552) instead of JSFiddle if you want to provide a runnable example. – Heretic Monkey Jun 03 '19 at 12:29
The cell itself also give padding. So reset it to zero and reduce line-height to .9em(90% of font-size) – Mileesh M S Jun 03 '19 at 12:35
[Edit] your question with the explanation so the OP and future visitors know that. – Heretic Monkey Jun 03 '19 at 12:35
I m using stack overflow for the first time. Sorry for my ignorance – Mileesh M S Jun 03 '19 at 12:36
No worries! I just want to make sure your answer is the best it can be :). – Heretic Monkey Jun 03 '19 at 12:38
Thank you for the guidance. I have added Stack Snippets. :) – Mileesh M S Jun 03 '19 at 12:44
Many thanks, however with line-height 0.9, some characters might get cut off - maybe there is a "safer" solution – mjn Jun 03 '19 at 12:53
@mjn please see the snippet – Mileesh M S Jun 03 '19 at 12:59
Many thanks, please see my edit - font families and font sizes are unknown beforehand so there is the danger that fixed values for line height cause cut-off characters. Also there may be more than one font used in a cell. – mjn Jun 03 '19 at 13:08
Also you need to set the padding 0 to the Cell @mjn – Mileesh M S Jun 03 '19 at 13:08
Please note the line-height value is in em - @mjn – Mileesh M S Jun 03 '19 at 13:44

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

5 Answers5