html - 如何删除html表格数据填充

Question

我在这里阅读了应用建议的 CSS answers到这个问题。但这对我没有帮助。

我怎样才能删除这个填充？

还有怎么加空格？

HTML 和 CSS 给我这个输出:-

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

Answer 1

要使按钮大小相同，强制它们占用特定宽度(在我的示例中，可用宽度的 98%)创建“填充”使它们小于整个可用宽度并将它们居中(请注意 css vertical-align 是在弃用的 align 上对齐 td 的推荐方法属性

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