插入下拉菜单时在 Table 单元格中增加白色 Space

Question

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

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

插入下拉菜单时在 Table 单元格中增加白色 Space

Extra White Space In Table Cell When Inserting a DropDown

html

css

google-chrome

html-table

html-select