【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{
	   width:100%;
	   word-break:keep-all;
	   word-wrap:normal;
	   white-space:nowrap;
	   border-collapse:collapse;
	   border:1px solid skyblue;
	}

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