HTML/CSS中table表格布局

最新推荐文章于 2025-05-24 09:15:00 发布

xiaokangmiclong

最新推荐文章于 2025-05-24 09:15:00 发布

阅读量3.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Html CSS

本文链接：https://blog.youkuaiyun.com/xiaokangmiclong/article/details/50783890

CSS 同时被 2 个专栏收录

16 篇文章

订阅专栏

Html

6 篇文章

订阅专栏

本文介绍了HTML/CSS中table布局的相关属性，包括table-layout的automatic和fixed模式，以及border-spacing和border-collapse的用法。通过实例展示了如何控制表格列宽、内容溢出处理以及单元格间距，帮助理解表格布局的灵活性。

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

省略超出列部分，设计到表格的列计算规则：table-layout，其值包括：
automatic：为默认值，列的宽度由单元格里面的内容来设定。
fixed: 列宽度由表格宽度和列宽度来设定。
inherit: 列宽度从父元素继承而来。

border-spacing:设置单元格之前的间距，参数分别横向和纵向，若只有一个参数则两个方向相等。

border-collapse:设置单元格边框属性，可能的值有：separate（分开）collapse（合并）。

<html >
<head>
<meta charset=" utf-8">
<style type="text/css">
table
{
width:400px;
border-collapse: collapse;
border-spacing:5px 20px;
}
.one
{
margin:20px;
table-layout: automatic;
}
.tow
{
margin:20px;
table-layout: automatic;
}
.three
{
margin:20px;
table-layout: fixed;
}

.three td{
margin:20px;
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
}

</style>
</head>
<body>

<table class="one" border="1" >
<tr>
<th width="20%">qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq</td>
<th width="40%">10000000</td>
<th width="40%">100</td>
</tr>
</table>

<table class="tow" border="1" >
<caption>测试表格</caption>
<tr>
<td width="20%">你你你你你你你你你你你您你你你你你你你你你</td>
<td width="40%">100000000000000000000000</td>
<td width="40%">100</td>
</tr>
</table>

<table width="200" border="1" class="three">
<tr>
<td width="20%">哈哈哈哈哈</td>
<td width="20%">你你你你你你你你inin你你你您你你你你你你你你你</td>
<td width="30%">100000000000000000000000</td>
<td width="30%">100</td>
</tr>
<tr>
<td colspan="3" rowspan="3"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>

</table>
</body>
</html>