html - 文本输入的较大默认宽​​度会阻止表格适应最小的单元格

Question

我在一个数据单元格中输入了一个文本，在同一列中有一个标题单元格。我希望计算宽度的层次结构是标题 >> 列 >> 文本输入，因为文本输入没有明确的宽度设置。但事实证明，文本输入有一个默认宽度，使其比标题更宽，从而决定了列的宽度。

这是代码的链接

.style-table {
  text-align: left;
}

input[type=text] {
  width: 100%;
  box-sizing: border-box;
}

<table class="style-table">
  <tbody>
    <tr style="background-color:#4CAF50;color:white;">
      <th>gears</th>
      <th>rate</th>
    </tr>
    <tr>
      <td class="style-header-column">X1</td>
      <td class="style-input-td">
        <input id="X1-text" type="text" value="0" />
      </td>
    </tr>
    <tr>
      <td class="style-header-column">X10</td>
      <td class="style-input-td">
        <input id="X2-text" type="text" value="0" />
      </td>
    </tr>
    <tr>
      <td class="style-header-column">X100</td>
      <td class="style-input-td">
        <input id="X3-text" type="text" value="0" />
      </td>
  </tbody>
</table>

http://jsfiddle.net/ricecakebear/5686z44L/ .

那么如何去掉文本输入的默认宽度，让header决定列的宽度呢？谢谢。

Answer 1

input 的浏览器默认值为 size = "20"

1. 将 size = "1" 添加到 input 以重置它。
2. 此外，包括您的原始 css (width = 100%)。这将允许 input 扩展以匹配 th。
3. 还包括 box-sizing 属性以说明 border(或重新设置)

fiddle

table {
  border-collapse: collapse;
}

.style-table {
  text-align: left;
}

input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

<table class="style-table">
  <tbody>
    <tr style="background-color:#4CAF50;color:white;">
      <th>gears</th>
      <th>rate</th>
    </tr>
    <tr>
      <td class="style-header-column">X1</td>
      <td class="style-input-td">
        <input id="X1-text" type="text" value="0" size="1" />
      </td>

    </tr>
    <tr>
      <td class="style-header-column">X10</td>
      <td class="style-input-td">
        <input id="X2-text" type="text" value="0" size="1" />
      </td>

    </tr>
    <tr>
      <td class="style-header-column">X100</td>
      <td class="style-input-td">
        <input id="X3-text" type="text" value="0" size="1" />
      </td>
  </tbody>
</table>
<br>
<table class="style-table">
  <tbody>
    <tr style="background-color:#4CAF50;color:white;">
      <th>gears</th>
      <th>A longer heading</th>
    </tr>
    <tr>
      <td class="style-header-column">X1</td>
      <td class="style-input-td">
        <input id="X1-text" type="text" value="0" size="1" />
      </td>

    </tr>
    <tr>
      <td class="style-header-column">X10</td>
      <td class="style-input-td">
        <input id="X2-text" type="text" value="0" size="1" />
      </td>

    </tr>
    <tr>
      <td class="style-header-column">X100</td>
      <td class="style-input-td">
        <input id="X3-text" type="text" value="0" size="1" />
      </td>
  </tbody>
</table>