表格列布局系列如何灵活把握列宽

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

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

问题   设定尺寸列

解决方法：

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

问题   按内容比例划分列

解决模式：

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

问题   按宽度比例划分列

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

问题   按百分比例划分菜单

解决方法：

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

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

解决模式：

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

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

解决模式：

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

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

解决模式：

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

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

解决模式：

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

 

转载于:https://www.cnblogs.com/s-z-y/p/4477205.html