zoukankan      html  css  js  c++  java
  • 精准控制表格列表(table-layout:fixed)

    现在面临的问题:

    对于元素的display的属性使用表格的形式,可以使元素有表格的行为,但对于不固定宽度的的元素,进行布局也会很难控制。这是因为列宽会对表格进行相应的调整,即使指定了相应的宽度,也只是能起到类似的效果。

    解决方案:

    table-layout的属性。它的默认值是atuo,其行为模式被自动表格布局算法,也是表格布局行为。它还具有另一个值fixed,这个值可以明显可控一些。这个fixed属性成为固定表格布局算法。通过以下例子对比一下:

    1.默认表格值

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>默认</title>
        <style>
            table{
                 500px;
                height: 80px;
            }
        </style>
    </head>
    <body>
    <table border="1" cellspacing="0"  >
        <tr>
            <td>如果我们不……</td>
            <td>指定的单元格的宽度,则这些单元格会根据内容的
                宽度的长短来分析表格的宽度。也就是说内容较长的分配的宽度就会多一些</td>
        </tr>
        <tr>
            <td>表格的每一行都会参与到列宽的计算,而且不仅是第一行</td>
            <td>
                这个结果和上面的那个是不一样的
            </td>
        </tr>
    </table>
    </body>
    </html>
    View Code

    2使用table-layout:fixed属性

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>table-layout: fixed</title>
        <style>
            table{
                width: 500px;
                height: 80px;
                table-layout: fixed;
            }
        </style>
    </head>
    <body>
    <table border="1" cellspacing="0"  >
        <tr>
            <td>如果我们不……</td>
            <td>指定的单元格的宽度,则这些单元格会根据内容的
                宽度的长短来分析表格的宽度。也就是说内容较长的分配的宽度就会多一些</td>
        </tr>
        <tr>
            <td>表格的每一行都会参与到列宽的计算,而且不仅是第一行</td>
            <td>
                这个结果和上面的那个是不一样的
            </td>
        </tr>
    </table>
    </body>
    </html>
    View Code

  • 相关阅读:
    Hbase 统计行数的四种方式
    Solr、MongoDB和Hadoop比较
    三种方法更改MAC OS X下的HOSTS文件
    史上最全前端面试题(含答案)
    图文-水平垂直居中兼容ie6+
    CSS3动画
    jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com)
    web app变革之rem
    MAC中通过gem命令安装compass
    mac下升级ruby环境版本
  • 原文地址:https://www.cnblogs.com/mj878/p/5951102.html
Copyright © 2011-2022 走看看