zoukankan      html  css  js  c++  java
  • CSS设置表格TD宽度布局

      使用表格布局时,对单元格的宽度控制很伤脑筋,所以查阅资料整理如下:

    一、表格布局table-layout

      语法:
        table-layout : auto | fixed

      取值:

        auto  : 大多数浏览器采用自动表格布局算法对表格布局;表格及单元格的宽度取决于其包含的内容。

        fixed :表格和列的宽度通过表格的宽度来设置,某一列的宽度仅由该列首行的单元格决定;在当前列中,该单元格所在行之后的行并不会影响整个列宽。

      **注意**

        使用 “fixed” 布局方式时,整个表格可以在其首行被下载后就被解析和渲染。

        这样对于 “automatic” 自动布局方式来说可以加速渲染,但是其后的单元格内容并不会自适应当前列宽。

        任何一个包含溢出内容的单元格可以使用 overflow  属性控制是否允许内容溢出。

    二、单元格文字控制

      1.white-space

        该属性是用来设置如何处理元素中的空白

        语法:

          white-space : normal | pre | nowrap | inherit
        取值:
          normal : 默认值;文本自动处理换行;假如抵达容器边界内容会转到下一行;

          pre      : 连续的空白符会被保留,在遇到换行符或者<br>元素时才会换行;

                换行和其他空白字符都将受到保护;
                这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持;

                如果 !DOCTYPE 声明没有指定为 standards-compliant mode ,此属性可以使用,但是不会发生作用;结果等同于 normal ;

          nowrap : 连续的空白符会被合并,强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象;

      2.word-break

        该属性指定了怎样在单词内断行

        语法:
          word-break : normal | break-all | keep-all

        取值:

          normal   : 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行 ;

          break-all: 对于non-CJK (中文/日文/韩文) 文本,可在任意字符间断行 ;

          keep-all : CJK 文本不断行;

               Non-CJK 文本表现同 normal(与所有非亚洲语言的normal相同;对于中文,韩文,日文,不允许字断开;

               适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法);

    三、表格宽度综合处理

      1.css固定table td的宽度(默认显示)

    1 table{table-layout: fixed;}
    2 <th style="63px" ></th>
    3 td{white-space: normal;} 

      2.css固定table td的宽度(一行显示)

    table{table-layout: fixed;}
    <th style="63px" ></th>
    td{white-space: nowrap; overflow:hidden;word-break:break-all;} /*防止换行*/ 

    四、CSS设置文本强制换行和不换行写法(题外)

      1.不转行

     .text{overflow:hidden;white-space:normal;}

      2.强行换行

    .text{word-break: normal;}

    五、本文涉及链接

      https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout

      https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space

      https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-break

  • 相关阅读:
    React-Native 之 GD (二十一)APP 打包
    React-Native 之 GD (十九)TabBarItem 逻辑完善 / 关闭筛选菜单滑动手势 / Navigator 掉帧卡顿问题处理
    React-Native 之 GD (二十)removeClippedSubviews / modal放置的顺序 / Android 加载git图动图 / 去除 Android 中输入框的下划线 / navigationBar
    React-Native 之 GD (十六)首页筛选功能
    React-Native 之 GD (十七)小时风云榜按钮处理
    React-Native 之 GD (十八)监听 TabBarItem 点击与传值实现 点击 Item 进行刷新功能
    SettingsPLSQLDeveloper
    UsageLog4j
    SettingsJDK
    UsageGrideReport++
  • 原文地址:https://www.cnblogs.com/anniey/p/7026772.html
Copyright © 2011-2022 走看看