时间戳

首页 > 解决方案 > 引导程序 4 中的表格列宽

html - 引导程序 4 中的表格列宽

问题描述

我对 bootstrap 非常陌生，并且正在通过添加带有表单输入字段的表来扩展使用 bootstrap 4 的现有 MVC Web 应用程序。我想弄清楚如何控制表格列宽。一个下拉列表有很长的选项，所以我希望能够限制该列的大小并溢出/包装下拉列表中的文本，但我很难调整甚至是空表的大小。这是页面的现有 div 结构和我放入的虚拟表，其结构与真实表的结构相同。

<div class="form-horizontal col-10 offset-1">
    <div class="row">
        <h5 class="mt-n1 pl-1">Section title</h5>
    </div>
    <div class="row" style="background-color:#e8eef4; border: 1px solid #d2d2d2; border-radius: 3px; padding-top: 4px;">
        <table class="table table-borderless table-condensed">
            <thead>
                <tr>
                    <th class="col-3">Column 1</th>
                    <th class="col-6">Column 2</th>
                    <th class="col-3">Column 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <select class="form-control">
                            <option>Select...</option>
                            <option>Option 1</option>
                            <option>Option 2</option>
                        </select>
                    </td>
                    <td>
                        <select class="form-control">
                            <option>Select...</option>
                            <option>An example of the really long text for the select option that will need to overflow.</option>
                            <option>Another example of the really long text for the select option that will need to overflow.</option>
                        </select>
                    </td>
                    <td>
                        <textarea class="form-control" cols=20 rows=2></textarea>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

这无法以我期望的方式控制列宽。我已阅读有关将container类添加到其中一个 div 以允许控制列宽的信息，但我不确定将其添加到哪个 div。我还阅读了有关使用table-responsive该类的信息，但我宁愿没有滚动表。您能提供的任何帮助将不胜感激。 https://codeply.com/v/fT9xOWEToJ

标签： htmlcssbootstrap-4

解决方案

你需要有col-for each <th>and<td>而不是 just <th>。此外，添加d-flex以启用弹性行为。

这是代码块的修改版本<table>：

<table class="table table-borderless table-condensed">
    <thead>
        <tr class="d-flex">
            <th class="col-3">Column 1</th>
            <th class="col-6">Column 2</th>
            <th class="col-3">Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr class="d-flex">
            <td class="col-3">
                <select class="form-control">
                    <option>Select...</option>
                    <option>Option 1</option>
                    <option>Option 2</option>
                </select>
            </td>
            <td class="col-6">
                <select class="form-control">
                    <option>Select...</option>
                    <option>An example of the really long text for the select option that will need to overflow.</option>
                    <option>Another example of the really long text for the select option that will need to overflow.</option>
                </select>
            </td>
            <td class="col-3">
                <textarea class="form-control" cols="20" rows="2"></textarea>
            </td>
        </tr>
    </tbody>
</table>

推荐阅读