Question

包含输入字段的表格：

＆＃13;

table {
  border: 1px solid orange;
  border-collapse: collapse;
  width: 200px;
}
td {
  border: 1px solid orange;
  padding: .5em;
}

＆＃13;

<table>
  <tr>
    <td style="width:70%"><label>Key</label></td>
    <td>Value</td>
  </tr>
  <tr>
    <td><label for="text">Key</label></td>
    <td><input type="text" name="text" value="Value"></td>
  </tr>
</table>

＆＃13;

没有输入字段的表格：

＆＃13;

table {
  border: 1px solid orange;
  border-collapse: collapse;
  width: 200px;
}
td {
  border: 1px solid orange;
  padding: .5em;
}

＆＃13;

<table>
  <tr>
    <td style="width:70%"><label>Key</label></td>
    <td>Value</td>
  </tr>
  <tr>
    <td><label for="text">Key</label></td>
    <td>Value</td>
  </tr>
</table>

＆＃13;

那么指定细胞的正确方法是什么？在这种情况下宽度？真的很感谢你的帮助！

Answer 1

更新jsfiddle。您可以提供表格table-layout: fixed;，然后将td提供给您想要的任何width。您还应该输入输入类型width 100％;

table{
    border: 1px solid black;
    table-layout: fixed;
    width: 200px;
}

input{
    width:100%;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
}

Answer 2

您可以使用input元素的size Attribute

<td><input type="text" name="text" value="Value" size="20"></td>

如何指定细胞＆＃39;包含输入字段的表格中的宽度？

2 个答案: