CSS alignment cell table

Question

CSS alignment cell table

Navigation

#1 by (1 votes)

2

I have a% of% where the contents of <table> are random numbers, I need the numbers to occupy 100% of the cell, however much I put the size 100%, with <td> and padding zero, always % is inside the cell. I need the number to touch the edge of the top and bottom ie margin and padding . I tried everything but margin:0 insists on continuing.

Here is an example of how my css is.

    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 despair, I put padding: 0 zero to padding and padding and td from within the cell continues.

html5 css css3

asked by anonymous 26.12.2016 / 21:13

1 answer

css for mobile only Div breaking when label content is too large

score 1 · Accepted Answer

The main thing is you set the size of the line-height line. This is because this property already comes with a predefined spacing, so you just have to change to the size that fits 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>

reset in css and took some properties that did not add up to anything.