具有表单输入最小宽度的 Bootstrap 响应表 [英] Bootstrap responsive table with form input min width

问题描述

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

我曾尝试向列中的所有元素添加 min-width:"10%" 或 "150px"，但这没有用.这是我的设置:

<div class="table-responsive"><table class="table table-bordered table-striped table-highlight"><头><th>姓名</th><第>日期</th><th>成本</th><th>计费类型</th><th>税</th><th>其他Col</th><th>其他Col</th><th>其他Col</th><th>总</th></thead><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>每月</option><option>每年</option></选择></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>

</表单>

<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-horizo​​ntal"><div class="table-responsive"><table class="table table-bordered table-striped table-highlight"><头><th>姓名</th><第>日期</th><th>成本</th><th>计费类型</th><th>税</th><th>其他Col</th><th>其他Col</th><th>其他Col</th><th>总</th></thead><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>每月</option><option>每年</option></选择></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>

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

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

解决方案

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

input.form-control {宽度:自动；}

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:

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

As you can see, some field values are cut off when the table shrinks. Any help is appreciated.

Edit: I would like to continue using tables due to some legacy code preservation. However, I am open to any solution if need be.

解决方案

The default css of .form-control forces this behavior, so you need to change the css of your input field like:

input.form-control {
  width: auto;
}

这篇关于具有表单输入最小宽度的 Bootstrap 响应表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！