CODEWITHSUNDEEP
htmlcsshtml-table
Anthony
Anthony

Reputation: 56

Html Table Button Taking too much space

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>[email protected]</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.

Upvotes: 0

Views: 1026

Answers (4)

amnrzm
amnrzm

Reputation: 51

Try to add below styling on the button or the td tag,

display:contents

Upvotes: 0

Mamta Thakur
Mamta Thakur

Reputation: 147

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;">[email protected]</td>
    <td>
      <button type="button">Add</button>
      <button type="button">Edit</button>
    </td>
  </tr>
</table>

Upvotes: 2

Anthony
Anthony

Reputation: 56

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.

Upvotes: 0

christina zeimpeki
christina zeimpeki

Reputation: 1

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

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

Upvotes: 0

Related Questions