Question

我发现我的代码存在两个问题。标题没有得到修复，第二个问题是自动换行不适用于标题/行。我使用过bootstrap类，但仍面临问题。我想修复表头，只有行应该是可滚动的，如果文本很长，它应该自动换行。我的应用程序中有多列（大约15列）。请提供建议。

查看示例代码click here。

示例HTML代码：

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Launch demo modal
</button>

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body" id="modal-body">
                <table id="myTable" class="table table-fixedheader table-bordered table-striped">
                    <thead>

                        <tr class="row">
                            <th class="col-md-3">Header1</th>
                            <th class="col-md-4">Header2Header2Header2Header2</th>
                            <th class="col-md-3">Header3</th>
                            <th class="col-md-4">Header4</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="row">
                            <td class="col-md-3">111111111111111111111111111111111111111111111111111111111111111111111</td>
                            <td class="col-md-4">33333</td>
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">5443545435354543</td>
                        </tr>
                        <tr class="row">
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">33333</td>
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">5437665</td>
                        </tr>
                        <tr class="row">
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">33333</td>
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">5435435443</td>
                        </tr>
                        <tr class="row">
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">33333</td>
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">68678454</td>
                        </tr>
                        <tr class="row">
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">786876</td>
                            <td class="col-md-3">8787876</td>
                            <td class="col-md-4">6765767</td>
                        </tr>
                        <tr class="row">
                            <td class="col-md-3">7656765</td>
                            <td class="col-md-4">656456</td>
                            <td class="col-md-3">116611</td>
                            <td class="col-md-4">43434</td>
                        </tr>
                        <tr class="row">
                            <td class="col-md-3">43243432434324342</td>
                            <td class="col-md-4">33344343233</td>
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">4343</td>
                        </tr>
                        <tr class="row">
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">432434343243243</td>
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">432443</td>
                        </tr>
                        <tr class="row">
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">333333</td>
                            <td class="col-md-3">111312312123121</td>
                            <td class="col-md-4">32112</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

Answer 1

您可以尝试非表格方法。如果您可以在列中设置宽度，并在单元格中包含内容。这是一个例子https://codepen.io/flurrd/pen/jmMNxK?editors=1100

注意：此示例中的类名称很糟糕。我打算将其用于正确使用。

base

使用引导类

1 个答案: