Html 具有表单输入最小宽度的 Bootstrap 响应表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31388385/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap responsive table with form input min width
提问by robarelli
I am trying to create a responsive table that contains form inputs for several columns. From what I understand, the responsive tables shrink until its columns can't go any further, then it adds a scroller. However, the columns shrink to the point where I can't see the values in the input field so I need a way to impose a minimum width on these columns instead of having it determined by the column header text length.
我正在尝试创建一个响应式表，其中包含几列的表单输入。据我了解，响应式表格会缩小，直到它的列不能再往前走，然后它会添加一个滚动条。但是，列缩小到我看不到输入字段中的值的程度，因此我需要一种方法来对这些列施加最小宽度，而不是由列标题文本长度确定。
I have tried adding min-width:"10%" or "150px" to all the elements in the column, but that didn't work. Here is my setup:
我曾尝试向列中的所有元素添加 min-width:"10%" 或 "150px"，但这不起作用。这是我的设置：
<form class="form-horizontal">
<div class="table-responsive">
<table class="table table-bordered table-striped table-highlight">
<thead>
<th>Name</th>
<th>Date</th>
<th>Cost</th>
<th>Billing Type</th>
<th>Tax</th>
<th>Other Col</th>
<th>Other Col</th>
<th>Other Col</th>
<th>Total</th>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control" value="Some Long Name Here"/></td>
<td><input type="text" class="form-control" value="13-Jul-2015"/></td>
<td><input type="text" class="form-control" value="355.12"/></td>
<td>
<select class="form-control">
<option>Monthly</option>
<option>Yearly</option>
</select>
</td>
<td><input type="text" class="form-control" value="another long value"/></td>
<td><input type="text" class="form-control" value="some val"/></td>
<td><input type="text" class="form-control" value="some val"/></td>
<td><input type="text" class="form-control" value="some val"/></td>
<td>5.79</td>
</tr>
</tbody>
</table>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-horizontal">
<div class="table-responsive">
<table class="table table-bordered table-striped table-highlight">
<thead>
<th>Name</th>
<th>Date</th>
<th>Cost</th>
<th>Billing Type</th>
<th>Tax</th>
<th>Other Col</th>
<th>Other Col</th>
<th>Other Col</th>
<th>Total</th>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control" value="Some Long Name Here" /></td>
<td><input type="text" class="form-control" value="13-Jul-2015" /></td>
<td><input type="text" class="form-control" value="355.12" /></td>
<td>
<select class="form-control">
<option>Monthly</option>
<option>Yearly</option>
</select>
</td>
<td><input type="text" class="form-control" value="another long value" /></td>
<td><input type="text" class="form-control" value="some val" /></td>
<td><input type="text" class="form-control" value="some val" /></td>
<td><input type="text" class="form-control" value="some val" /></td>
<td>5.79</td>
</tr>
</tbody>
</table>
</div>
</form>As you can see, some field values are cut off when the table shrinks. Any help is appreciated.
如您所见，当表格缩小时，某些字段值会被截断。任何帮助表示赞赏。
Edit: I would liketo continue using tables due to some legacy code preservation. However, I am open to any solution if need be.
编辑：我想继续使用表，由于一些遗留代码保存。但是，如果需要，我愿意接受任何解决方案。
回答by katwhocodes
The default css of .form-control forces this behavior, so you need to change the css of your input field like:
.form-control 的默认 css 强制执行此行为，因此您需要更改输入字段的 css，例如：
input.form-control {
width: auto;
}
回答by Charchit
Column width will be dynamic as user may input any length value! Wrap input fields in a div, set div width dynamically using JavaScript:
列宽将是动态的，因为用户可以输入任何长度值！将输入字段包装在 div 中，使用 JavaScript 动态设置 div 宽度：
<tr>
<td><div style="width:10em"><input onkeyup="updateWidth(this)" type="text" class="form-control" size="80" value="Some Long Name Here"/></div></td>
<td><div style="width:10em"><input onkeyup="updateWidth(this)" type="text" class="form-control" value="13-Jul-2015"/></div></td>
<td><div style="width:10em"><input onkeyup="updateWidth(this)" type="text" class="form-control" value="355.12"/></div></td>
<td>
<select class="form-control">
<option>Monthly</option>
<option>Yearly</option>
</select>
</td>
<td><div style="width:10em"><input onkeyup="updateWidth(this)" type="text" class="form-control" value="another long value"/></div></td>
<td><div style="width:10em"><input onkeyup="updateWidth(this)" type="text" class="form-control" value="some val"/></div></td>
<td><div style="width:10em"><input onkeyup="updateWidth(this)" type="text" class="form-control" value="some val"/></div></td>
<td><div style="width:10em"><input onkeyup="updateWidth(this)" type="text" class="form-control" value="some val"/></div></td>
<td>5.79</td>
</tr>
And the JS function:
和 JS 函数：
<script>
function updateWidth(textbox) {
$(textbox).parent().css("width",(textbox.value.length + 2) + "em");
}
</script>
回答by cweitat
To add on to @katwhocodes, if you are using Bootstrap 4,
You can add w-autoclass to the <input>.
要添加到@katwhocodes，如果您使用的是 Bootstrap 4，您可以将w-auto类添加到<input>.
https://getbootstrap.com/docs/4.4/utilities/sizing/#relative-to-the-parent
https://getbootstrap.com/docs/4.4/utilities/sizing/#relative-to-the-parent
