Кнопка Html Table занимает слишком много места
Я хочу, чтобы две кнопки сидели рядом друг с другом в одной ячейке. Как я могу сделать это, не имея много места в камере. Только достаточно места, чтобы кнопки располагались в удобном месте друг от друга.
Я использовал 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>[email protected]</td>
<td>
<button type = "button">Add</button>
<button type = "button">Edit</button>
</td>
</tr>
</table>Когда в ячейке присутствуют одна или две кнопки, они создают эту сверхдлинную горизонтальную ячейку. Кнопки тоже далеко друг от друга.
Ответы 4
Возможно, вам нужно использовать команду «colspan». Например...
<tr>
<th>Name</th>
<th colspan = "2">Address</th>
</tr>
Оказывается, стиль кнопки контролировал все кнопки в моем проекте. Я должен был дать этой кнопке идентификатор, чтобы она не управляла всеми кнопками в общем смысле.
Вы можете использовать свойство «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;">[email protected]</td>
<td>
<button type = "button">Add</button>
<button type = "button">Edit</button>
</td>
</tr>
</table>Попробуйте добавить ниже стиль на кнопку или тег td,
display:contents
Поделитесь своим CSS, потому что то, что вы описываете, не происходит с использованием CSS «по умолчанию».