layui静态表格防止被内容撑开变形

.ellipsis-cell {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fixed-table {
	table-layout: fixed;
}
<table class="layui-table fixed-table" lay-size="sm">
	<colgroup>
		<col>
		<col width="80">
		<col width="60">
		<col width="80">
		<col width="100">
	</colgroup>
	<thead>
		<tr>
			<th>文件名</th>
			<th>大小</th>
			<th>扩展名</th>
			<th>上传进度</th>
			<th>操作</th>
		</tr>
	</thead>
	<tbody id="upload-files">
		{volist name="row.files_arr" id="vo"}
		<tr>
			<td data-src="{$vo.src}" title="{$vo.name}" class="ellipsis-cell">{$vo.name}</td>
			<td>{$vo.size}</td>
			<td>{$vo.ext}</td>
			<td>
				<div class="layui-progress">
					<div class="layui-progress-bar" lay-percent="100%"></div>
				</div>
			</td>
			<td>
				<div class="layui-btn-group">
					<button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
					<a href="{$vo.src}" target="_blank" class="layui-btn layui-btn-xs">查看</a>
				</div>

			</td>
		</tr>
		{/volist}
	</tbody>
</table>

posted on 2025-10-25 16:59  小馬過河﹎  阅读(4)  评论(0)    收藏  举报

导航