Question

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

这是代码的链接

＆＃13;

.style-table {
  text-align: left;
}

input[type=text] {
  width: 100%;
  box-sizing: border-box;
}

＆＃13;

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

＆＃13;

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

那么如何删除文本输入的默认宽度，并让header确定列的宽度？感谢。

Answer 1

void swap(char* a, char* b) { char temp; temp=*a; *a=*b; *b=temp; a++; b++; }的浏览器默认值为input

将size = "20"添加到size = "1"以重置此项。
此外，请添加原始css（input）。这样，width = 100%可以展开以匹配input。
同时包含th属性以说明box-sizing（或重置此内容）

fiddle

＆＃13;

border

＆＃13;

table {
  border-collapse: collapse;
}

.style-table {
  text-align: left;
}

input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

＆＃13;

Answer 2

您正在使用width:100%;作为输入，而不是限制列td的宽度。

因此输入将采用默认宽度。

＆＃13;

.style-table {
  text-align: left;
}
.style-input-td{
  width:50px;
}
input[type=text] {
  width: 100%;
  box-sizing: border-box;
}

＆＃13;

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

＆＃13;

Answer 3

您可以根据需要在th中添加宽度

＆＃13;

.style-table {
  text-align: left;
}

input[type=text] {
  width: 100%;
  box-sizing: border-box;
}

＆＃13;

<table class="style-table">
  <tbody>
    <tr style="background-color:#4CAF50;color:white;">
      <th width="60%">gears</th>
      <th width="40%">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>

＆＃13;

文本输入的大默认宽度可防止表格适合最小的单元格

3 个答案: