Кнопка Html Table занимает слишком много места

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" по вашему выбору. Это поможет вам легко настроить пространство таблицы.

Для идентификатора электронной почты используйте свойство «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>

Answer 2

Оказывается, стиль кнопки контролировал все кнопки в моем проекте.Я должен был дать этой кнопке идентификатор, чтобы она не контролировала все кнопки в общем смысле.

Answer 3

Может быть, вам нужно использовать команду «colspan». Например ...

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