具有表单输入最小宽度的引导响应表

Question

我正在尝试创建一个响应式表格，其中包含多列的表单输入。据我了解，响应式表会缩小，直到其列不能再进一步，然后它会添加一个滚动条。但是，列缩小到我看不到输入字段中的值的程度，因此我需要一种方法来对这些列施加最小宽度，而不是让它由列标题文本长度确定。

我尝试将 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="$12355.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>$505.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="$12355.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>$505.79</td>
        </tr>
      </tbody>
    </table>
  </div>
</form>

如您所见，当表格缩小时，某些字段值会被截断。任何帮助表示赞赏。

编辑：由于保留了一些遗留代码，我希望喜欢继续使用表格。但是，如果需要，我愿意接受任何解决方案。

Answer 1

.form-control 的默认 css 会强制执行此行为，因此您需要更改输入字段的 css，例如：

input.form-control {
  width: auto;
}

Answer 2

列宽将是动态的，因为用户可以输入任何长度值！将输入字段包裹在 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="$12355.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>$505.79</td>
            </tr>

还有JS函数：

 <script>
 function updateWidth(textbox) {
         $(textbox).parent().css("width",(textbox.value.length + 2) + "em");
 }
 </script>

Answer 3

要添加到@katwhocodes，如果您使用的是 Bootstrap 4， 您可以将w-auto 类添加到<input>。

https://getbootstrap.com/docs/4.4/utilities/sizing/#relative-to-the-parent