Question

我已经在Stack Overflow中包含了所有受欢迎的建议如何执行此操作，但我的input仍然比height略低td。

看起来关键的css选项是display:table-cell;和width:100%;

重要 - 如果我删除table table-condensed，则表示正常。

但问题是，如何使用input保留height table-condensed？

＆＃13;

td.zeon_input_table_cell input {
  display: table-cell;
  width: 100%;
  background-color: transparent
}
td {
  border: solid
}

＆＃13;

<table id="formset" class="form table table-condensed zeon zeon-row-hover">
  <thead>
    <th>Column 1</th>
    <th>Column 2</th>
  </thead>
  <tbody>
    <tr class="row1">
      <td class="zeon_input_table_cell">
        <input id="id_form-0-id" name="form-0-id" type="hidden" value="1">
      </td>

      <td class="zeon_input_table_cell">
        <input id="id_form-0-min_delivery_value" name="form-0-min_delivery_value" step="any" type="number" value="5000.0">
      </td>
    </tr>

＆＃13;

Answer 1

Bootstrap在padding: 5px中默认为table td值，如下所示：

.table-condensed thead > tr > th,
.table-condensed tbody > tr > th,
.table-condensed tfoot > tr > th,
.table-condensed thead > tr > td,
.table-condensed tbody > tr > td,
.table-condensed tfoot > tr > td {
  padding: 5px;
}

所以你需要覆盖它们。

但不使用!IMPORTANT - 这是 BAD PRACTICE

相反，在您的规则中更具体。

这称为CSS specifity，您可以计算选择器的特异性here

此外，在您的input中，您只需要width:100%

#formset td.zeon_input_table_cell input {
  width: 100%;
}
#formset td {
  border: solid;
  padding: 0;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<table id="formset" class="form table table-condensed zeon zeon-row-hover">
  <thead>
    <th>Column 1</th>
    <th>Column 2</th>
  </thead>
  <tbody>
    <tr class="row1">
      <td class="zeon_input_table_cell">
        <input id="id_form-0-id" name="form-0-id" type="hidden" value="1">
      </td>

      <td class="zeon_input_table_cell">
        <input id="id_form-0-min_delivery_value" name="form-0-min_delivery_value" step="any" type="number" value="5000.0">
      </td>
    </tr>

使输入适合td高度和宽度

1 个答案: