table-layout:fixed 属性的解说（文字强制换行）IE、firefox与chorme兼容问题

最新推荐文章于 2024-08-27 14:12:16 发布

Yesir_mao

最新推荐文章于 2024-08-27 14:12:16 发布

阅读量1.4k

点赞数

分类专栏： css 文章标签： c's's

原文链接：https://blog.csdn.net/WYZSC/article/details/6094486

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

说明：文章转载至：https://blog.csdn.net/WYZSC/article/details/6094486
1.定义：tableLayout 属性用来显示表格单元格、行、列的算法规则。
在这里插入图片描述
说明：所有浏览器都支持 table-layout 属性。任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
2.用法说明：
固定表格布局：
固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。
在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。
通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。

自动表格布局：
在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。
此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容
3.代码演示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      table.one {
        table-layout: automatic;
      }
      table.two {
        table-layout: fixed;
      }
      .tbl {
        table-layout: fixed;
      }

      .tb2 {
        table-layout: fixed;
      }
      .tb3 {
        table-layout: fixed;
      }
      .tb4 {
        table-layout: fixed;
      }
      .tb5 {
        table-layout: fixed;
      }
      .td {
        overflow: hidden;
      }
      .tb6 {
        table-layout: fixed;
      }
      .td1 {
        overflow: hidden;
      }
    </style>
  </head>

  <body>
    <!-- w3school实例 -->
    <table class="one" border="1" width="100%">
      <tr>
        <td width="20%">1000000000000000000000000000</td>
        <td width="40%">10000000</td>
        <td width="40%">100</td>
      </tr>
    </table>

    <table class="two" border="1" width="100%">
      <tr>
        <td width="20%">1000000000000000000000000000</td>
        <td width="40%">10000000</td>
        <td width="40%">100</td>
      </tr>
    </table>

    <!-- 方式一 普通的情况  效果：可以看到width=80并没有起作用，表格被字符撑开了-->
    <table border="1" width="80">
      <tr>
        <td>abcdefghigklmnopqrstuvwxyz 1234567890</td>
      </tr>
    </table>

    <!-- 方式二 使用样式table-layout:fixed  效果：width=80起作用了，但是表格换行了。-->
    <table class="tbl" border="1" width="80">
      <tr>
        <td>abcdefghigklmnopqrstuvwxyz 1234567890</td>
      </tr>
    </table>

    <!-- 方式三 使用样式table-layout:fixed与nowrap  效果：width=80起作用了，换行也被干掉了。-->
    <table class="tb2" border="1" width="80">
      <tr>
        <td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td>
      </tr>
    </table>

    <!-- 方式四 在使用数值固定td大小情况下使用样式table-layout:fixed与nowrap  效果：不幸发生了，第一个td的nowrap不起作用了-->
    <table class="tb3" border="1" width="80">
      <tr>
        <td width="20" nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td>
        <td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td>
      </tr>
    </table>

    <!-- 方式五 在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap  效果：改成百分比，终于搞定了，第一个td的nowrap起作用了-->
    <table class="tb4" border="1" width="80">
      <tr>
        <td width="25%" nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td>
        <td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td>
      </tr>
    </table>

    <!-- 方式六 在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div  效果：width即起作用，换行也起作用了-->
    <table class="tb5" border="1" width="80">
      <tr>
        <td width="25%" class="td" nowrap>
          <div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
        </td>
        <td class="td" nowrap>
          <div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
        </td>
      </tr>
    </table>

    <!-- 方式七 在使用数值固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div 效果：在chorome中nowrap又不起作用了-->
    <table class="tb6" border="1" width="80">
      <tr>
        <td width="20" class="td1" nowrap>
          <div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
        </td>
        <td class="td1" nowrap>
          <div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
        </td>
      </tr>
    </table>
  </body>
</html>

4.各浏览器效果如图：
在这里插入图片描述
5.总结：
方式一普通的情况效果：可以看到width=80并没有起作用，表格被字符撑开了
方式二使用样式table-layout:fixed 效果：width=80起作用了，但是表格换行了
方式三使用样式table-layout:fixed与nowrap 效果：width=80起作用了，换行也被干掉了
方式四在使用数值固定td大小情况下使用样式table-layout:fixed与nowrap 效果：不幸发生了，第一个td的nowrap不起作用了
方式五在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap 效果：改成百分比，终于搞定了，第一个td的nowrap起作用了
方式六在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div 效果：width即起作用，换行也起作用了
方式七在使用数值固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div 效果：在chorome中nowrap又不起作用了