bootstrap 表格设置列固定宽度以及内容自动换行的CSS

最新推荐文章于 2021-06-19 15:10:13 发布

Jonah_lxw

最新推荐文章于 2021-06-19 15:10:13 发布

阅读量5.1k

点赞数 2

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/xiuwu0423/article/details/84791993

版权

前端专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种使用CSS设置表格固定布局及自动换行的方法，通过定义特定样式实现表格列宽固定并确保内容自动换行，适用于各种屏幕尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style type="text/css">
	#contentTable{
		table-layout:fixed; /* bootstrap-table设置colmuns中某列的宽度无效时，需要给整个表设置css属性 */
		word-break:break-all; word-wrap:break-all; /* 自动换行 */
	}
</style>

<table id="contentTable" class="table table-striped table-bordered table-condensed ">
	<thead>
		<tr>
			<th style="width:314px;">消息标题</th>
			<th style="width:80px;">策略名称</th>
			<th style="width:160px;">重发消息标题</th>
			<th style="width:80px;">消息通道</th>
			<th style="width:160px;">消息接收人</th>
		</tr>
	</thead>
	<tbody>
	</tbody>
</table>