bootstrap table表格解决文本值太大，表格无法自适应解决方案

最新推荐文章于 2024-08-16 11:39:03 发布

JasonZ_1

最新推荐文章于 2024-08-16 11:39:03 发布

阅读量2.5k

点赞数

文章标签： bootstrap css html

本文链接：https://blog.csdn.net/qq_42392337/article/details/124663912

版权

table标签外层div标签加上table-responsive属性
th以及td标签加上overflow:hidden;text-overflow:ellipsis;white-space:nowrap;，另外这里可以根据数据长度自定义设置每列的宽度，不然超过宽度的部分会默认显示为省略号

<div class="table-responsive">
 <table class="table table-hover table-bordered" style="word-wrap:break-all;word-break:break-all;table-layout:fixed;">
                    <thead class="thead-light">
                    <tr style="width: 100%;">
                        <th scope="col" style="width: 80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">colxxx </th>
                        <th scope="col" style="width: 200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">colxxx </th>
                        <th scope="col" style="width: 100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"> colxxx </th>
                        <th scope="col" style="width: 80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"> colxxx </th>
                        <th style="width: 315px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; " scope="col"> colxxx </th>
                        <th style="width: 356px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" scope="col"> colxxx </th>
                        <th style="width: 80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" scope="col"> colxxx  </th>
                        <th style="width: 325px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" scope="col"> colxxx </th>
                         <th style="width: 120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" scope="col"> colxxx </th>
                    </tr>
                    </thead>
                    <tbody>

                    {% for item in list2 %}
                        <tr style="width: 100%;">
                            <td style="width: 80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align: left">{{ item.value1}}</td>
                            <td style="width: 200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align: left">{{ item.value1}}</td>
                            <td style="width: 100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align: left">{{ item.value1}}</td>
                            <td style="width: 80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align: left">{{ item.value1}}</td>
                            <td style="width: 315px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align: left" title="{{ item.value1}}">{{ item.value1}}</td>
                            <td style="width: 356px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align: left" title="{{ item.value1}}">{{ item.value1}}</td>
                            <td style="width: 80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ item.value1}}</td>
                            <td style="width: 325px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align: left" title="{{ item.value1}}">{{ item.value1}}</td>
                            <td style="width: 120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" >{{ item.value1}}</td>
                        </tr>
                    {% endfor %}