Question 43295 in Html Question posted in
Some basic documentation can be found here.

HTML – Button does not fill td

I have a table with full of buttons as a cell. The buttons don’t fill the space, theres a little gap and I don’t know how to remove it. Here is a JSFiddle for the code: https://jsfiddle.net/2bhds5p4/

Also, how can I set the ‘s width fix? I have a search function in this table and when it filters to a row with a shorter Name, the ITEM button becomes bigger.

Thank you for your help!

enter image description here

CSS:

.name {
  background-color: orange;
  border: 0px solid gray;
  color: black;
  padding: 6px 10px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  margin: -1px;
  height: 100%;
  min-width: 100%;
  font-size: 14px;
  display: block;
  border-radius: 0%;
}

.item {
  background-color: red;
  border: 0px solid gray;
  color: black;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  width: 100%;
  height: 100%;
  display: table-cell;
  border-radius: 0%;
}

.table_list {
  text-align: left;
  border-spacing: 0;
  font-size: 14px;
  width: 100%;
  border-collapse: collapse;
  margin-top: -18px;
}

.table_list td {
  border: 1px solid gray;
  height: 100%;
}
<div id='list_div'>
  <table id='table' class='table_list'>
    <tr class='header'>
      <th>#</th>
      <th>Name</th>
      <th class='item_th'>Item</th>
    </tr>
    <tr>
      <td class='list_no'>1</td>";
      <td><button onclick='updateStatus(this);' class='name'>LAMP</td>;
              <td class='list_item'><button onclick='updateItem(this);' class='item'>ITEM</td>
            </tr>
       </table>
    </div>

I was searching this site for hours, but none of the answers worked for me.

Tags:

2

Answers


  1. 0

    For the spacing issue you can reset the padding on the td element like so

    td {
 padding: 0;
}
    Login or Signup to reply.
  2. 0

    giving td padding of 0 and setting height of .item to 28px, which fixes most of the spacing, but does leave a small gap still.

    .name {
  background-color: orange;
  border: 0px solid gray;
  color: black;
  padding: 6px 10px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  margin: -1px;
  height: 100%;
  min-width: 100%;
  font-size: 14px;
  display: block;
  border-radius: 0%;
}

.item {
  background-color: red;
  border: 0px solid gray;
  color: black;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  width: 100%;
  height: 28px;
  display: table-cell;
  border-radius: 0%;
}

.table_list {
  text-align: left;
  border-spacing: 0;
  font-size: 14px;
  width: 100%;
  border-collapse: collapse;
  margin-top: -18px;
}

.table_list td {
  border: 1px solid gray;
  height: 100%;
}
td {
  padding: 0px;
}
    <div id='list_div'>
  <table id='table' class='table_list'>
    <tr class='header'>
      <th>#</th>
      <th>Name</th>
      <th class='item_th'>Item</th>
    </tr>
    <tr>
      <td class='list_no'>1</td>";
      <td><button onclick='updateStatus(this);' class='name'>LAMP</button></td>;
      <td class='list_item'><button onclick='updateItem(this);' class='item'>ITEM</button></td>
    </tr>
  </table>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search