zoukankan      html  css  js  c++  java
  • 【CSS技术分享】防止表格标题行换行

            在看《CSS3实战》这本书,看到了“防止表格标题行换行”这一块,觉得挺有用的,因为自己之前也遇到过类似的问题,但解决的没有书上的好。不知道大家有没有遇到过这样的问题,你做了一个table,大多数td的字符数都挺短的,但是每一列的标题却挺长的,反正比td长多了,导致标题在他们自己格子里只能换行显示,非常不好看,现在的要求就是标题格只能在一行中显示。方法书上讲的很仔细,就把代码在这里打一遍方便以后查询。这里的代码参考自《CSS3实战》(成林 著)第71、72页。

            html代码:

    <table>
      <tr>
       <th nowrap="nowrap">排名</th>
       <th nowrap="nowrap">校名</th>
       <th nowrap="nowrap">总得分</th>
       <th nowrap="nowrap">人才培养总得分</th>
       <th nowrap="nowrap">研究生培养总得分</th>
       <th nowrap="nowrap">本科生培养总得分</th>
       <th nowrap="nowrap">科学研究总得分</th>
       <th nowrap="nowrap">自然科学研究得分</th>
       <th nowrap="nowrap">社会科学研究得分</th>
       <th nowrap="nowrap">所属省份</th>
       <th nowrap="nowrap">分省排名</th>
       <th nowrap="nowrap">学校类型</th>
      </tr>
      <tr>
       <td>demo</td>
       <td>demo</td>
       <td>demo</td>
       <td>demo</td>
       <td>demo</td>
       <td>demo</td>
       <td>demo</td>
       <td>demo</td>
       <td>demo</td>
       <td>demo</td>
       <td>demo</td>
       <td>demo</td>
      </tr>
     </table>
    

      

    CSS代码:

    table{
    	   100%;
    	   word-break:keep-all;
    	   word-wrap:normal;
    	   white-space:nowrap;
    	   border-collapse:collapse;
    	   border:1px solid skyblue;
    	}
    

      效果很好,大家可以手动试试看

  • 相关阅读:
    在循环中禁止remove/add
    [算法竞赛入门]WERTYU
    [算法竞赛入门]Tex Quotes
    [算法竞赛入门]竖式问题
    [算法竞赛入门]蛇形填数
    [C++面试]关于const的使用方法
    [C++面试]单例模式-设计模式
    [C++面试]C++的三种继承(public/protected/private继承)
    用微服务架构,有哪些好处?
    东软数据可视化分析, 已经方便成这样?!
  • 原文地址:https://www.cnblogs.com/xuchaosheng/p/3001456.html
Copyright © 2011-2022 走看看