羊皮纸论坛

羊皮纸论坛

分享让知识传播,阅读让心灵成长, 创作让文化传承,让我们共同努力。
  • 禁止广告文
  • 知识传播
  • 阅读
  • 心灵成长
  • 创作
  • 文化传承
论坛目录 / 程式设计 / 网页/网站程式 / CSS /

善用 CSS 中的 table-layout 属性加快 Table 的显示速度

发表新主题
随机主题
上个主题
下个主题
|
    善用 CSS 中的 table-layout 属性加快 Table 的显示速度

    ???在很久以前我们都是用 Table 在排版的,我相信现在还是有不少人还是在用 Table 进行排版而非现在较为流行的 CSS 排版,使用 Table 排版最大的好处就是版面在各浏览器中显示比较不会乱掉。但最大的缺点就是版面调整不像 CSS layout 那麽方便,而且网页出现的时间比较长,版面的问题应该无解,但表格显示的速度却可以利用 table-layout 属性的设定达到目标。

    CSS 的 table-layout 属性有两个可以设定的值∶

    • automatic 表格的总宽度决定於每一个储存格(Cell)的最大值。( 此为预设值 )
    • fixed 表格的总宽度决定於表格 width 属性的定义,以及各栏位(Column) width 属性的定义

    预设的 automatic 有个特性,就是当浏览器开始下载 HTML 资料时,从 <table> 一直读到 </table> 才会将网页显示出来,这是因为浏览器因为不确定 table 应该显示(Render)的宽度,因此必须等到表格都下载完成後才会显示资料。

    所以你如果利用 <table> 设定整个网页版面,就会很容易发现网页下载时会先看到白白的一片底色,最後才会突然出现网页,这就是因为 table-layout 预设为 automatic 的关系。

    所以,当你的表格拥有固定的宽度,例如版面宽度定义为 950px 时,只要将 <table> 的 table-layout 属性设定成 fixed,并且再设定 width 属性,就会明显感觉到表格在下载 HTML 的过程中不会等待 </table> 读完就会直接显示表格内容,速度将会差非常多。

    • 关键字 : table, layout, width, automatic, Table, fixed, 问题应该无解, 速度将会差非常多, 速度却可以利用, 进行排版而非现, 过程中不会, 较不会乱掉, 设定达到目标, 设定整个网页版面, 版面调整不, 此为预设值, 才会将网页显示出来, 成後才会显示资料, 总宽度决定於表格, 总宽度决定於每一个储存格
    00
    2009-09-12T03:10:42+0000


    • 当您未登入羊皮纸时,可以利用脸书 Facebook 登入来发表回响。若使用羊皮纸会员身份发表回响则可获得经验值及虚拟金币,用来参加羊皮纸推出的活动。
    发表回响
     
    验证字串
    留言