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，请使用“断字：全部断开”属性来断开文本，而不要使用“空白：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>

Answer 2

也许您需要使用命令“ colspan”。例如...

<tr>
    <th>Name</th>
    <th colspan="2">Address</th>
</tr>

Answer 3

原来，一个按钮的样式控制着我项目中的所有按钮。我应该给该按钮指定一个ID，这样它就不会在一般意义上控制所有按钮。

Answer 4

尝试在按钮或td标签上添加以下样式，

display:contents

HTML表格按钮占用太多空间

4 个答案: