Bootstrap 3表带过滤器，多个选择输入的大小

Question

我有一个具有以下行结构的静态表：

1. 头
2. 多项选择过滤项目
3. 数据行

是否可以制作（2）：

a）具有多个选择的下拉列表 b）确保多个选择中的内部文本被截断，因此大小由其余行指示

<div class="table-responsive">
    <table >
        <thead>
            <tr>
                <th>head1</th>
                <th>head2</th>
                <th>head3</th>
                <th>head4</th>
                <th>head5</th>
                <th>head6</th>
                <th>head7</th>
                <th>head8</th>
                <th>head9</th>
                <th>head10</th>
            </tr>
            <tr>
                <th>
                    <div class="form-inline">
                        <select multiple class="form-control" id="sel1">
                            <option value="jan">Jan Foo Lorem Ipsum</option>
                            <option value="feb">Feb</option>
                            <option value="mar">Mar</option>
                        </select>
                    </div>
                </th>
                <th>
                    <div class="form-inline">
                        <select multiple class="form-control" id="sel1">
                            <option value="jan">Jan Foo Lorem Ipsum</option>
                            <option value="feb">Feb</option>
                            <option value="mar">Mar</option>
                        </select>
                    </div>
                </th>
                <th>
                    <div class="form-inline">
                        <select multiple class="form-control" id="sel1">
                            <option value="jan">Jan Foo Lorem Ipsum</option>
                            <option value="feb">Feb</option>
                            <option value="mar">Mar</option>
                        </select>
                    </div>
                </th>
                <th>
                    <div class="form-inline">
                        <select multiple class="form-control" id="sel1">
                            <option value="jan">Jan Foo Lorem Ipsum</option>
                            <option value="feb">Feb</option>
                            <option value="mar">Mar</option>
                        </select>
                    </div>
                </th>
                <th>
                    <div class="form-inline">
                        <select multiple class="form-control" id="sel1">
                            <option value="jan">Jan Foo Lorem Ipsum</option>
                            <option value="feb">Feb</option>
                            <option value="mar">Mar</option>
                        </select>
                    </div>
                </th>
                <th>
                    <div class="form-inline">
                        <select multiple class="form-control" id="sel1">
                            <option value="jan">Jan Foo Lorem Ipsum</option>
                            <option value="feb">Feb</option>
                            <option value="mar">Mar</option>
                        </select>
                    </div>
                </th>
                <th>
                    <div class="form-inline">
                        <select multiple class="form-control" id="sel1">
                            <option value="jan">Jan Foo Lorem Ipsum</option>
                            <option value="feb">Feb</option>
                            <option value="mar">Mar</option>
                        </select>
                    </div>
                </th>
                <th>
                    <div class="form-inline">
                        <select multiple class="form-control" id="sel1">
                            <option value="jan">Jan Foo Lorem Ipsum</option>
                            <option value="feb">Feb</option>
                            <option value="mar">Mar</option>
                        </select>
                    </div>
                </th>
                <th>
                    <div class="form-inline">
                        <select multiple class="form-control" id="sel1">
                            <option value="jan">Jan Foo Lorem Ipsum</option>
                            <option value="feb">Feb</option>
                            <option value="mar">Mar</option>
                        </select>
                    </div>
                </th>
                <th>
                    <div class="form-inline">
                        <select multiple class="form-control" id="sel1">
                            <option value="jan">Jan Foo Lorem Ipsum</option>
                            <option value="feb">Feb</option>
                            <option value="mar">Mar</option>
                        </select>
                    </div>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>7543</td>
                <td>6148</td>
                <td>1006004</td>
                <td>0200000100018</td>
                <td>1</td>
                <td>0200000100018 0200000100018 0,6x4</td>
                <td>0,6x4</td>
                <td>0,6</td>
                <td>4</td>
                <td>0,1</td>
            </tr>
        </tbody>
    </table>
</div>

可以找到小提琴here 我正在使用Bootstrap 3。

Answer 1

如果要在表格中过滤，请使用datatables插件。 Data tables