时间戳

首页 > 解决方案 > Html 表格按钮占用太多空间

html - Html 表格按钮占用太多空间

问题描述

我想让两个按钮在同一个单元格中并排放置。如果牢房里没有很多空间，我怎么能做到这一点。只有足够的空间让按钮位于彼此之间的舒适空间中。

我用过 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>

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

标签： htmlcsshtml-table

解决方案

您可以使用“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>

推荐阅读