table-layout属性fixed和auto的区别

定义:
table-layout属性fixed和auto的区别_第1张图片
table-layout属性fixed和auto的区别_第2张图片


<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>     

结果:
table-layout属性fixed和auto的区别_第3张图片

从结果上看,

相同点:

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

不同点:

auto属性:

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

fixed属性:

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

你可能感兴趣的:(web前端,CSS,CSS3)