table表格td无法设置宽度

最新推荐文章于 2024-07-06 10:50:45 发布

武陵人123

最新推荐文章于 2024-07-06 10:50:45 发布

阅读量1.3k

点赞数 2

分类专栏： HTML 文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_61276211/article/details/126122259

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

由于设置了table-layout: fixed，下面的每一行宽度都是根据第一行宽度设置的，无法单独进行宽度设置，尝试了用div包裹设置宽度也不行

想要展示的信息栏如下

但是由于无法设置宽度，只能展现成下图这样

解决办法：

</colgroup>

源码：

<table border="1" style="table-layout: fixed">
			<colgroup>
			  <col style="width:4%;"/>
			  <col style="width:15%;"/>
			  <col style="width:31%;"/>
			  <col style="width:19%;"/>
			  <col style="width:31%;"/>
			</colgroup>
			<tr>
				<td colspan="5">...............</td>
			</tr>
			<tr>
			  <td rowspan="5" align="center" style="width: 50px;">信息</td>
			  <td>信息</td>
			  <td></td>
			  <td>电话</td>
			  <td></td>
			</tr>
			<tr>
			  <td>地址</td>
			  <td colspan="3"></td>
			</tr>
			<tr>
			  <td>联系人</td>
			  <td></td>
			  <td>联系电话</td>
			  <td></td>
			</tr>
			<tr>
			  <td>。。</td>
			  <td></td>
			  <td>。。。</td>
			  <td></td>
			</tr>
			<tr>
			  <td>。。。</td>
			  <td></td>
			  <td>。。。</td>
			  <td></td>
			</tr>
			<tr>
			  <td colspan="2" align="center" height="90">。。</td>
			  <td colspan="3"></td>
			</tr>
			<tr>
			  <td rowspan="4" align="center">其他信息</td>
			  <td colspan="2" align="center">1</td>
			  <td colspan="2" align="center">2</td>
			</tr>
			<tr>
			  <td>3</td>
			  <td></td>
			  <td>4</td>
			  <td></td>
			</tr>
			<tr>
			  <td>5</td>
			  <td></td>
			  <td>6</td>
			  <td></td>
			</tr>
			<tr>
			  <td>7</td>
			  <td></td>
			  <td>8</td>
			  <td></td>
			</tr>
		</table>