HTML固定列表宽度，超出部分自动隐藏，设置2倍行距，单元格占据两行、两列

最新推荐文章于 2024-05-10 00:42:36 发布

原创最新推荐文章于 2024-05-10 00:42:36 发布 · 4.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#代码 #html #layout #设计 #列宽

Web开发专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现固定宽度列表的方法，确保每个单元格宽度相等且超出部分自动隐藏。通过设置2倍行距及特殊单元格占据两行两列来优化布局。

HTML固定列表宽度，使得每一个单元格宽度相等，单元格中超出列宽的部分自动隐藏。设置2倍行距，最右下角单元格占据两行、两列。

<table border="1" cellspacing="0 " cellpadding="0 " style="width:220px;table-layout:fixed;">
	<tr>		
		<td style="text-align:center;white-space:nowrap;overflow:hidden;">
			<span style="line-height:2;">计算机组成原理</span>
		</td>
		<td style="text-align:center;white-space:nowrap;overflow:hidden;">
			JAVA程序设计高级篇
		</td>
		<td style="text-align:center;white-space:nowrap;overflow:hidden;">
			编译原理
		</td>
	</tr>
	<tr>
		<td style="text-align:center;white-space:nowrap;overflow:hidden;">
			<span style="line-height:2;">数据库系统</span>
		</td>
		<td style="text-align:center;white-space:nowrap;overflow:hidden;"rowspan="2" colspan="2">
			操作系统
		</td>
	</tr>
	<tr>
		<td style="text-align:center;white-space:nowrap;overflow:hidden;">
			<span style="line-height:2;">数据结构</span>
		</td>		
	</tr>
<table>