CSS alignment Cell table

Question

I have a <table> where the content of <td> are random numbers, I need the numbers to occupy 100% of the cell, however much I put the size 100%, with padding and margin zero, there’s always one padding inside the cell. I need the number to touch the edge of the upper and lower, margin:0 and padding: 0. I’ve tried everything but padding insists on continuing.

Here’s an example of how my css looks.

    table{
        border: 1px solid;
        border-collapse: collapse;  
        border-spacing: 0;
        border-padding: 0;
        cellpadding: 0;
        cellspacing: 0;
        width: 300px;   
        TABLE-LAYOUT: fixed;
        margin-right: 10px;
        margin-left: 10px;      
        margin-bottom: 6px;         
    }

    table td {  
        border-spacing: 0;
        border-padding: 0;
        cellpadding: 0;
        cellspacing: 0;                         
        border: 1px solid;  
        text-align: center;                                                                         
        font-weight: bold;  
        font-size: 20px;                        
    }

To illustrate the despair, I put the padding zero for td and table and the padding from inside Cell continues.

Answer 1

The main thing is you set the line size line-height. This happens because this property already comes with a preset spacing, so just switch to the size that suits the cell:

* {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

table {
  border: 1px solid;
  border-collapse: collapse;
  border-spacing: 0;
  width: 300px;
  TABLE-LAYOUT: fixed;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 6px;
}

table td {
  border-spacing: 0;
  border: 1px solid;
  text-align: center;
  font-weight: bold;
  font-size: 2.3em;
  line-height: 25px; !important
}

<table border="1">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
  </tbody>
</table>

Gave a reset in css and pulled some properties that didn’t add anything.