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}
  • 相关阅读:
    [转]使用Composer管理PHP依赖关系
    Php环境下载(PHPNow)安装
    精美的 ( Android, iPhone, iPad ) 手机界面设计素材和线框图设计工具
    八款强大的jQuery图片滑块动画插件
    JavaScript prototype.js提升JavaScript开发效率
    JS Message 网页消息提醒
    Vis.js图表插件
    动态算法学习
    GPS功能:百度路书自定义【轨迹回放】
    CSS美化页面滚动条
  • 原文地址:https://www.cnblogs.com/s-z-y/p/4477205.html
Copyright © 2011-2022 走看看