table-layout属性fixed和auto的区别

最新推荐文章于 2023-12-11 15:24:24 发布

#麻辣小龙虾#

最新推荐文章于 2023-12-11 15:24:24 发布

阅读量1.4w

点赞数 2

分类专栏： web前端 CSS3 CSS

本文链接：https://blog.csdn.net/CodingNoob/article/details/77503485

版权

web前端同时被 3 个专栏收录

99 篇文章 2 订阅

订阅专栏

CSS3

20 篇文章 0 订阅

订阅专栏

CSS

15 篇文章 0 订阅

订阅专栏

定义：
这里写图片描述

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>table-layout属性fixed和auto的区别</title>
<meta name="author" content="" />
<style>
h1{font-size:16px;font-family:Arial;}
.auto{table-layout:auto;width:350px;}
.fixed{table-layout:auto;width:350px;}
.fixed td{width:300px;}
.auto td{width:200px;}
</style>
</head>
<body>
<h1>auto: 表格自动算法</h1>
<table border="1" class="auto">
<tbody>
    <tr>
        <td>表格自动算法，宽度将基于单元格的内容自动拉伸</td>
        <td>表格自动算法</td>
        <td>表格自动算法</td>
    </tr>
    <tr>
        <td>表格自动算法</td>
        <td>表格自动算法</td>
        <td>表格自动算法</td>
    </tr>
</tbody>
</table>

<h1>fixed: 表格固定算法</h1>
<table border="1" class="fixed">
<tbody>
    <tr>
        <td>表格固定算法布局</td>
        <td>表格固定算法</td>
        <td>表格固定算法</td>
    </tr>
    <tr>
        <td>表格固定算法</td>
        <td>表格固定算法</td>
        <td>表格固定算法</td>
    </tr>
</tbody>
</table>
</body>
</html>

结果：
这里写图片描述

从结果上看，

相同点：

如果表格都没有设定宽高属性，那么不管是auto或者fixed属性、表格宽度高度则为单元格宽高（包括一些padding、border属性等）累积的总和。

不同点：

auto属性：

当设置为auto属性，也就是table-layout属性的时候，如果表格设置了width属性height属性，那么表格的宽度和高度就是设置的值。不管你是否设置了单元格的高宽值，表格的高宽都已经限定了！如果没有设定，那么表格宽度高度则为单元格宽高（包括一些padding、border属性等）累积的总和。

fixed属性：

但是当设置了fixed属性的时候，如果表格设置了width属性height属性，如果设置的单元格宽高累加起来的总和比表格设置的宽高总和要大，那么表格的实际宽高就为每个单元格宽高累积的总和，但是如果单元格累积的总和比表格自己设计的要小，那么表格的宽高属性则为表格设置的宽高值。

#麻辣小龙虾#

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
table-layout属性fixed和auto的区别

定义： <!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="utf-8" /><title>table-layout属性fixed和auto的区别</title><meta name="author" content="" /><style>h1{font-size:16px;font-family:Arial
复制链接

扫一扫