zoukankan      html  css  js  c++  java
  • 表格列布局系列如何灵活把握列宽

    问题  如何使列宽收缩适应到内容宽度

    解决方法:在表格上设置table-layout:auto和auto.然后在单元格上设置auto.

    问题   设定尺寸列

    解决方法:

    在表格上设置table-layout:auto和auto.然后在单元格上设置value.就可以设置列宽。如果所有列宽总和大于上级容器宽度,其布局方式会变成按宽度比例划分列的设计模式。这就是最大宽度的设定尺寸列。如果在表格上设置table-layout:fixed和min-width.然后在第一行的单元格上设置value,也可以设置列宽,这里不存在最大宽度限制--表格会根据需要溢出上级容器,保证各列能够显示为设定的宽度值。如果表格宽度大于各列宽度之和,那么布局会变成2按宽度比例划分列的设计模式。这种设计模式即为最小宽度的设定尺寸列。

    问题   按内容比例划分列

    解决模式:

    HTML  <table><tr><td>content</td></tr></table>
    CSS    table_selector {value or percent;table-layout:auto;}
           cell-selector{auto;}

    问题   按宽度比例划分列

    解决方法:在表格上设置table-layout:auto和value or percent.然后在单元格上设置value

    问题   按百分比例划分菜单

    解决方法:

    HTML  <table><tr><td>content</td></tr></table>
    CSS    table_selector {value or percent;}
           cell-selector{percent;}

    问题  按反比例划分列(百分比越小,内容越宽,表格会越宽)

    解决模式:

    HTML  <table><tr><td>content</td></tr></table>
    CSS    table_selector {auto;table-layout:auto;}
           cell-selector{percent;}

    问题   最小等宽列,将所有列设置为相等宽度,同时保证表格宽度为足够显示所有内容的最小宽度。适用于收缩适应型表格。

    解决模式:

    HTML  <table><tr><td>content</td></tr></table>
    CSS    table_selector {auto;table-layout:auto;}
           cell-selector{percent;}

    问题  等宽列,即将表格宽度自动划分为等宽单元格  这个模式适用于设定尺寸型,拉伸型和固定尺寸型表格

    解决模式:

    HTML  <table><tr><td>content</td></tr></table>
    CSS    table_selector {value or percent;}
           cell-selector{percent;}

    问题   小尺寸列  这个模式适用于固定尺寸型表格

    解决模式:

    HTML  <table><tr><td>content</td></tr></table>
    CSS    table_selector {value or percent;table-layout:fixed;}
           cell-selector{value or percent;overflow:hidden}
  • 相关阅读:
    iptables学习笔记
    启动级别和单用户模式
    Apache虚拟主机配置模板
    LAMP环境搭建问题
    LAMP环境搭建
    C++面向对象高级编程(九)Reference与重载operator new和operator delete
    C++面向对象高级编程(八)模板
    C++面向对象高级编程(七)point-like classes和function-like classes
    C++面向对象高级编程(六)转换函数与non-explicit one argument ctor
    C++面向对象高级编程(五)类与类之间的关系
  • 原文地址:https://www.cnblogs.com/s-z-y/p/4477205.html
Copyright © 2011-2022 走看看