How to remove html table data padding

Question

I read applied the suggested CSS here answers to this problem. But it doesn't help me.

How can I remove this padding?

Also how to add space?

HTML and CSS gives me this output:-

#page {
  border: 0px;
  border-collapse: collapse;
  border-spacing: 0px;
}

#page td {
  padding: 0;
  margin: 0;
}

Hello world <br/>

<table id="page">
  <tr>
    <td align="left"><input type='button' value='button1'></td>
    <td align="left"><input type='button' value='button2'></td>
    <td align="left"><input type='button' value='button3'></td>
    <td align="left"><input type='button' value='button4'></td>
  </tr>
  <tr>
    <td align="left"><input type='button' value='Sort Name A-Z'></td>
    <td align="left"><input type='button' value='Save sorting'></td>
  </tr>
</table>

How do you want the result to actually look? You cannot have a narrow button in the same column as a wide button take no have "padding" to the next column. It is not actually padding. — mplungjan, Oct 29 '19 at 13:01
Are you able to change html structure i means waht actually you want 2 button with some gap? — Awais, Oct 29 '19 at 13:06
If you don't want your controls organised into rows and columns *don't use a table*! (And don't use a table if you don't have tabular data anyway!) — Quentin, Oct 29 '19 at 13:50

score 3 · Accepted Answer · answered Oct 29 '19 at 13:06

To make the buttons the same size, force them to occupy a specific width (in my example, 98% of the available width) to create "padding" make them smaller then the full available width and center them (please note the css vertical-align is the recommended way to align a td over the deprecated align attribute

#page {
  border: 0px;
  border-collapse: collapse;
  border-spacing: 0px;
}

#page td {
  padding: 0;
  margin: 0;
  vertical-align: center
}

input[type="button"] {
  width: 98%;
}

Hello world <br/>

<table id="page">
  <tr>
    <td align="left"><input type='button' value='button1'></td>
    <td align="left"><input type='button' value='button2'></td>
    <td align="left"><input type='button' value='button3'></td>
    <td align="left"><input type='button' value='button4'></td>
  </tr>
  <tr>
    <td align="left"><input type='button' value='Sort Name A-Z'></td>
    <td align="left"><input type='button' value='Save sorting'></td>
  </tr>
</table>

Thanks. I had to add #page td { padding:3px ; Otherwise it is too much crowded. — masiboo, Oct 30 '19 at 10:12

score 0 · Answer 2 · answered Oct 29 '19 at 13:10

There are so many ways to do that. Here is an example. First I decide the size of the table, then I make the inputs width:100% and finally I add a margin-left.

#page {
   border:0px;
   border-spacing:0px;

}

#page td {
   padding: 0; 
   margin: 0;
}
  
  /*Makes all the inputs 100% width and add a margin*/
  input {
    width: calc(100% - 20px);
    margin-right: 20px;
  }
  
  /*Define a size for the table*/
  table {
    width: 600px;
  }

<html>
<header><title>This is title</title></header>

<body>
Hello world <br/>

<table id="page"  >
    <tr>
        <td align="left"><input type='button' value='button1' ></td>
        <td align="left"><input type='button' value='button2' ></td>
        <td align="left"><input type='button' value='button3' ></td>
        <td align="left"><input type='button' value='button4' ></td>
    </tr>
    <tr>
        <td align="left"><input type='button' value='Sort Name A-Z'></td>
        <td align="left"><input type='button' value='Save sorting' ></td>
    </tr>
</table>
</body>

How to remove html table data padding

2 Answers2