插入DropDown时表单元格中的额外空白

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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元素的宽度或第一行单元格的宽度设置。后续行中的单元格不会影响列宽。

     

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

更新了代码段：

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