插入下拉菜单时表格单元格中的额外空白

Question

我遇到了一个问题，在我的表格中的单元格内添加选择神秘地只是添加了一堆额外的空间。我一直在尝试研究解决方案，但找不到任何可以解决我遇到的特定问题的方法。如果可以的话请帮忙。

.datagrid table {
  border-collapse: collapse;
  text-align: left;
  width: 100%;
}
.datagrid {
  font: normal 12px/150% Arial, Helvetica, sans-serif;
  background: #fff;
  overflow: hidden;
  border: 2px solid #FA940F;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.datagrid table td,
.datagrid table th {
  padding: 4px 4px;
}
.datagrid table thead th {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #FA921B), color-stop(1, #FF3526));
  background: -moz-linear-gradient(center top, #FA921B 5%, #FF3526 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#FA921B', endColorstr='#FF3526');
  background-color: #FA921B;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: bold;
  border-left: 1px solid #F2C530;
}
.datagrid table thead th:first-child {
  border: none;
}
.datagrid table tbody td {
  color: #000305;
  border-left: 1px solid #F2791D;
  font-size: 12px;
  font-weight: normal;
}
.datagrid table tbody .alt td {
  background: #FFDBA6;
  color: #090F07;
}
.datagrid table tbody td:first-child {
  border-left: none;
}
.datagrid table tbody tr:last-child td {
  border-bottom: none;
}

<div class="datagrid">
  <table cellpadding="0" cellspacing="0">
    <thead>
      <tr>
        <th>Action</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td align="left">
          <select name="action" style="WIDTH: 160px; HEIGHT: 20px" type="text" padding="0">
            <option value="" selected="selected"></option>
            <option value="Closed">Closed</option>
            <option value="In Progress">In Progress</option>
          </select>
        </td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr class="alt">
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
      </tr>
      <tr>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
      </tr>
      <tr class="alt">
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
      </tr>
      <tr>
        <td>17</td>
        <td>18</td>
        <td>19</td>
        <td>20</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

一种解决方案是将table-layout: fixed 添加到table 元素：

Updated Example

.datagrid table {
  border-collapse: collapse;
  text-align: left;
  table-layout: fixed;
  width: 100%;
}

MDN - table-layout: fixed:

表格和列的宽度由 table 和 col 元素的宽度或第一行单元格的宽度设置。后续行中的单元格不会影响列宽。

在“固定”布局方法下，一旦下载并分析了第一行表格，就可以渲染整个表格。与“自动”布局方法相比，这可以加快渲染时间，但随后的单元格内容可能不适合提供的列宽。任何具有溢出内容的单元格都使用溢出属性来确定是否剪切溢出内容。

更新的代码片段：

.datagrid table {
  border-collapse: collapse;
  text-align: left;
  table-layout: fixed;
  width: 100%;
}
.datagrid {
  font: normal 12px/150% Arial, Helvetica, sans-serif;
  background: #fff;
  overflow: hidden;
  border: 2px solid #FA940F;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.datagrid table td,
.datagrid table th {
  padding: 4px 4px;
}
.datagrid table thead th {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #FA921B), color-stop(1, #FF3526));
  background: -moz-linear-gradient(center top, #FA921B 5%, #FF3526 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#FA921B', endColorstr='#FF3526');
  background-color: #FA921B;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: bold;
  border-left: 1px solid #F2C530;
}
.datagrid table thead th:first-child {
  border: none;
}
.datagrid table tbody td {
  color: #000305;
  border-left: 1px solid #F2791D;
  font-size: 12px;
  font-weight: normal;
}
.datagrid table tbody .alt td {
  background: #FFDBA6;
  color: #090F07;
}
.datagrid table tbody td:first-child {
  border-left: none;
}
.datagrid table tbody tr:last-child td {
  border-bottom: none;
}
.datagrid table td.no-padding { padding: 0; }
.remove-whitespace { width: 154px; }

<div class="datagrid">
  <table cellpadding="0" cellspacing="0">
    <thead>
      <tr>
        <th class="remove-whitespace">Action</th>
        <th>header</th>
        <th>header</th>
        <th>header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td align="left" class="no-padding">
          <select name="action" style="WIDTH: 160px; HEIGHT: 20px" type="text" padding="0">
            <option value="" selected="selected"></option>
            <option value="Closed">Closed</option>
            <option value="In Progress">In Progress</option>
          </select>
        </td>

        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr class="alt">
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
      </tr>
      <tr>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
      </tr>
      <tr class="alt">
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
      </tr>
      <tr>
        <td>17</td>
        <td>18</td>
        <td>19</td>
        <td>20</td>
      </tr>
    </tbody>
  </table>
</div>