Space between text and table borders

Asked

Viewed 72 times

-2

How I remove or reduce the space between the text and the upper and lower table edges?

I need to be closer to the text because I have a large form and with these spaces does not fit in a sheet for printing.

<table border="1" cellpadding=".666" cellspacing=".666" style="line-height:.75px; width:500px">
    <tbody>
        <tr>
            <td>
            <p>primeira</p>

            <p>segunda</p>
            </td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

figura com os espaços que quero retirar destacados em vermelho

2 answers

2

This answer is addressed both to the author of the question and to the other answer authors. It is difficult to write then any contribution will be welcome.

Evaluating the other answers

The other two answers are wrong:

One answer is incomplete

p {
  margin: 0;
}
<table border="1" cellpadding=".666" cellspacing=".666" style="line-height:.75px; width:500px">
  <tbody>
    <tr>
      <td>
        <p>primeira</p>

        <p>segunda</p>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

The other answer doesn’t make sense.

td {
  padding: 5px;
}
<table border="1" cellpadding=".666" cellspacing=".666" style="line-height:.75px; width:500px">
  <tbody>
    <tr>
      <td>
        <p>primeira</p>

        <p>segunda</p>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

Then I will take advantage of the incomplete answer and present a solution.

CSS inline

Both answers do not seem to notice that the user applied an online stylization to his table:

style="line-height:.75px; width:500px"

The first step an AR should take is to guide the user to remove the CSS inline since it is not recommended, this type of styling makes it difficult to maintain the page because it makes it difficult to read and understand the page as a whole. The proof of this argument is that both Ars ignored this CSS.

Same question code passing inline CSS to stylesheet:

table{
  line-height:.75px; 
  width:500px
}
<table border="1" cellpadding=".666" cellspacing=".666">
  <tbody>
    <tr>
      <td>
        <p>primeira</p>

        <p>segunda</p>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

Understanding what’s been done

Basically AP customized two properties of its table:

  • line-height defining the distance between lines of text content within an element.

  • width determining the width of the content area of an element.

Then it is possible to deduce that the AP set a width for the table and mistakenly tried to make the text content of the table contraísse.

Taking advantage of the incomplete answer and transforming it into a solution

Restore the value of line-height for the default value:

line-height: normal; 

Create a rule that removes paragraph margins belonging to the table and does not affect paragraphs outside the table:

td p {
  margin: 0;
}

Joining in a solution:

td {
  line-height: normal;
  width: 500px
}

td p {
  margin: 0;
}
<table border="1" cellpadding=".666" cellspacing=".666">
  <tbody>
    <tr>
      <td>
        <p>primeira</p>

        <p>segunda</p>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

<p>primeiro parágrafo não afetado pelo estilo</p>
<p>segundo parágrafo não afetado pelo estilo</p>

  • If the author of the incomplete answer wants to fix and restore his answer I have no problem in removing that reply if requested.

-2

Use Padding to separate the space from the inside

td{
  padding: 5px;
}

Browser other questions tagged

You are not signed in. Login or sign up in order to post.