您将如何制作一个按钮表，但按钮之间没有间隙？

Question

我正在开发一个网站，并意识到，我不知道如何在按钮之间不留空隙。我上网了，但我无法用语言表达我想要的东西。我想制作一张桌子，但是我放在桌子上的按钮之间没有空隙。

如果您能提供帮助，我希望将代码限制为 html、CSS 和 Javascript。

Answer 1

实现这一目标的关键是结合使用边框折叠和用于边距和填充的 CSS 重置。

table {
  border-collapse: collapse;
}
* {
  margin: 0;
  padding: 0;
}

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1.1</td>
      <td>Cell 1.2</td>
      <td>Cell 1.3</td>
    </tr>
    <tr>
      <td>Cell 2.1</td>
      <td>Cell 2.2</td>
      <td>Cell 2.3</td>
    </tr>
    <tr>
      <td>Cell 3.1</td>
      <td>Cell 3.2</td>
      <td>Cell 3.3</td>
    </tr>
    <tr>
      <td>
        <button>Button 4.1</button>
      </td>
      <td>
        <button>Button 4.2</button>
      </td>
      <td>
        <button>Button 4.3</button>
      </td>
    </tr>
    <tr>
      <td>
        <button>Button 5.1</button>
      </td>
      <td>
        <button>Button 5.2</button>
      </td>
      <td>
        <button>Button 5.3</button>
      </td>
    </tr>
  </tbody>
</table>