Html 表格按钮占用太多空间

Question

我想让两个按钮在同一个单元格中并排放置。如果单元格中没有足够的空间，我该怎么做呢？只有足够的空间让按钮位于彼此之间的舒适空间内。

我用过display: inline-block;以及 display:block 和 style='white-space: nowrap'。看过类似的问题，但他们的答案不适用于我的元素。

<table>
  <tr>
    <th>Employee Name</th>
    <th>Email Address</th>
    <th>Action</th>
  </tr>
  <tr>
    <td>Johnny Depp</td>
    <td>hotdog69@gmail.com</td>
    <td>
      <button type="button">Add</button>
      <button type="button">Edit</button>
    </td>
  </tr>
</table>

当一个或两个按钮出现在一个单元格中时，它们会创建这个超长的水平单元格。按钮也彼此相距很远。

Answer 1

您可以使用“table-layout:fixed”属性让您的表格使用固定宽度，并根据您的选择将宽度分配给“th”。它将帮助您轻松调整表格布局的空间。

对于电子邮件 ID，使用“word-break: break-all”属性来分隔文本，而不是使用“white-space: nowrap”属性。

<table style="table-layout:fixed;text-align:left">
  <tr>
    <th width="115px">Employee Name</th>
    <th width="105px">Email Address</th>
    <th width="90px">Action</th>
  </tr>
  <tr>
    <td>Johnny Depp</td>
    <td style="word-break:break-all;">hotdog69@gmail.com</td>
    <td>
      <button type="button">Add</button>
      <button type="button">Edit</button>
    </td>
  </tr>
</table>