您现在的位置是：网站首页> 编程资料编程资料

表格单元格内容超出时显示省略号效果(实现代码)_心得技巧_网页制作_

2023-11-10 363人已围观

简介 下面小编就为大家带来一篇表格单元格内容超出时显示省略号效果(实现代码)。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

说明

在前端开发中，经常会遇到需要限制单元格宽度并且内容超出部分显示省略号的的情况。下面就简单的介绍下如何达到这种效果。

准备知识

1. 控制文本不换行

white-space: nowrap;

2. 超出长度时，出现省略号

overflow:hidden;

text-overflow:ellipsis

3. 修改表格布局算法

table-layout:fixed;table-layout的默认值为automatic，意思是列宽度由单元格内容设定。而fixed意思是列宽由表格宽度和列宽度设定。

也就是说当你给表格设定列宽时，实际情况是不起作用的，当单元格内容过多时，依然会把宽度撑开。如果需要让表格的列宽显示方式由自己给单元格定义的列宽决定，就必须使用fixed这个值。

注意：1、表格必须设置宽度 2、如果只设置表格宽度，而不设置列宽度的话，列的宽度会平均分配。

代码演示

如下代码所示，表格中安排了姓名、年龄、性别以及地址四列，这几个列的长度分别为10%、20%、30%、40%。

XML/HTML Code复制内容到剪贴板
  1. >  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8" />  
  5.     <title>表格演示title>  
  6.     <style type="text/css">  
  7.         table{   
  8.             width: 100%;   
  9.             table-layout: fixed;   
  10.         }   
  11.         .name{   
  12.             width: 10%;   
  13.         }   
  14.         .age{   
  15.             width: 20%;   
  16.         }   
  17.         .sex{   
  18.             width: 30%;   
  19.         }   
  20.         .addr{   
  21.             width: 40%;   
  22.         }   
  23.            
  24.     style>  
  25. head>  
  26. <body>  
  27.     <table border="1" cellspacing="0" cellpadding="0">  
  28.         <thead>  
  29.             <tr>  
  30.                 <th class="name">姓名th>  
  31.                 <th class="age">年龄th>  
  32.                 <th class="sex">性别th>  
  33.                 <th class="addr">地址th>  
  34.             tr>  
  35.         thead>  
  36.         <tbody>  
  37.             <tr>  
  38.                 <td>李四td>  
  39.                 <td>13td>  
  40.                 <td>男td>  
  41.                 <td>山东td>  
  42.             tr>  
  43.             <tr>  
  44.                 <td>李

    上一篇：PC端和移动端自适应问题的快速解决方法_心得技巧_网页制作_

    下一篇：决战喵星好玩吗 决战喵星玩法介绍_手机游戏_游戏攻略_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网