zoukankan      html  css  js  c++  java
  • CSS样式表定义让文字自动适应Table宽度

    以下的例子是用样式实现,文字自动适应Table的宽度,并且超出的宽度的文字自动隐藏。IE下面还可以自动出现...的省略符号.

    关键样式:
    table-layout:fixed 固定布局的算法,则表格被呈递的默认宽度为 100% (For IE,Mozilla)
    text-overflow:ellipsis 当对象内文本溢出时显示省略标记(...) (For IE)
    overflow:hidden 不显示超过对象尺寸的内容 (For IE,Mozilla)
    white-space: nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象 (For IE,Mozilla)

    演示:HTML代码
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>

    <style>
     .ctl{
       table-layout:fixed
     }
      .ctl td{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px}
    </style>
    </HEAD>

    <BODY>
     <table cellSpacing="0" cellpadding="1" width="100%" class="ctl" border=1>
      <colgroup>
       <col>
       <col width="60">
      </colgroup>
      <tBody>
       <tr>
            <td>标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻</td>
            <td>(1/1)</td>
       </tr>
        <tr>
            <td>标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻</td>
            <td>(1/1)</td>
       </tr>
       <tr>
            <td>标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻</td>
            <td>(1/1)</td>
       </tr>
       <tr>
            <td>标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻标题扩大副教授的士大夫看见似的看来法艰苦但是第十六棵飞机立刻</td>
            <td>(1/1)</td>
       </tr>
     </tBody>
     </table>
    </BODY>
    </HTML> 

  • 相关阅读:
    一个奇怪的SystemClock_Config问题解决方法
    Keil5下载STM32库
    Entry point (0x08000000) points to a Thumb instruction but is not a valid Thumb code pointer.
    Error: failed to execute 'C:KeilARMARMCC'的解决办法
    C#委托的介绍(delegate、Action、Func、predicate)
    CopyFromScreen在屏幕缩放情况下需要做处理
    C# CEF 封装UserControl
    一个单js文件也可以运行vue
    vue自学入门-3(vue第一个例子)
    vue自学入门-1(Windows下搭建vue环境)
  • 原文地址:https://www.cnblogs.com/yanni/p/3294937.html
Copyright © 2011-2022 走看看