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

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 and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.

Under the "fixed" layout method, the entire table can be rendered once the first table row has been downloaded and analyzed. This can speed up rendering time over the "automatic" layout method, but subsequent cell content may not fit in the column widths provided. Any cell that has content that overflows uses the overflow property to determine whether to clip the overflow content.

更新的代码片段:

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