HTML表格按钮无法填满TD及固定列宽问题求助

问题描述 #

我制作了一个单元格内均为按钮的表格，按钮无法填满单元格空间，存在少量间隙，不知如何消除。此外，表格带有搜索功能，当筛选到名称较短的行时，ITEM按钮会变大，需要设置列的固定宽度。

原始代码 #

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%;
}

HTML代码

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

解决方案 #

一、消除按钮与单元格的间隙

问题根源是单元格默认内边距、按钮盒模型计算规则及错误的display属性，修改如下CSS：

/* 移除单元格默认内边距，让按钮完全填充 */
.table_list td {
  border: 1px solid gray;
  height: 100%;
  padding: 0;
}

/* 修正Name按钮样式，确保宽度高度完全适配 */
.name {
  background-color: orange;
  border: 0;
  color: black;
  padding: 6px 10px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  margin: 0;
  width: 100%;
  height: 100%;
  font-size: 14px;
  display: block;
  border-radius: 0;
  box-sizing: border-box; /* 让padding包含在宽度内，避免超出单元格 */
}

/* 修正Item按钮样式，替换错误的display属性 */
.item {
  background-color: red;
  border: 0;
  color: black;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  height: 100%;
  display: block; /* 替换table-cell为block，适配单元格布局 */
  border-radius: 0;
  box-sizing: border-box;
}

二、设置固定列宽

给表格的表头和对应单元格设置固定宽度，避免筛选后列宽变化：

/* 给各列设置固定宽度，可根据需求调整数值 */
.table_list th:nth-child(1), .table_list td:nth-child(1) {
  width: 50px; /* 序号列宽度 */
}

.table_list th:nth-child(2), .table_list td:nth-child(2) {
  width: 200px; /* Name列宽度 */
}

.table_list th:nth-child(3), .table_list td:nth-child(3) {
  width: 120px; /* Item列宽度 */
}

也可直接通过类选择器设置：

.item_th, .list_item {
  width: 120px;
}

内容的提问来源于stack exchange，提问作者i_dont_know_anything_YET