Html 表格按钮占用太多空间

Question

I want make two buttons sit next to each other within the same cell. How can I go about that without having alot space in the cell. Only Enough space to have the buttons sit in comfortable space between each other.

I have used display: inline-block; as well as display:block and style='white-space: nowrap'. Have looked at similar questions and their answers don't work with my project.

 <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>

When one or two buttons are present within a cell, they create this super long horizontal cell. The buttons are also far apart from each other.

Answer 1

You can use "table-layout:fixed" property to make your table use fixed width and assign width to "th" as per your choice. It will help you to adjust space of your table layout easily.

For email id, use "word-break: break-all" property to break text instead of using "white-space: nowrap" property.

 <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

Maybe you need to use the command "colspan". For example...

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

Answer 3

Turns out a button's style was controlling all the buttons in my project. I should have given that button an id so it wouldn't control all the buttons in a general sense.

Answer 4

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

display:contents