td的width可以设置固定值也可设置百分比，达到某些列宽度固定，某些列按比例自适应的效果。原文出自：www.hangge.com 转载请保留原文链接：ht...

最新推荐文章于 2022-03-21 15:48:50 发布

CHOUFENGDDDDDD

最新推荐文章于 2022-03-21 15:48:50 发布

阅读量819

点赞数

本文链接：https://blog.csdn.net/CHOUFENGDDDDDD/article/details/84747943

版权

 
   < 
   html 
   > 
  
 
   < 
   head 
   > 
  
 
   </ 
   head 
   > 
  
 
   < 
   body 
   > 
  
 
   < 
   style 
   > 
  
 
        
   table,table td,table th{border:1px solid #ff0000;border-collapse:collapse;} 
  
 
   </ 
   style 
   > 
  
 
   < 
   table 
   width 
   = 
   "50%" 
   style 
   = 
   "table-layout:fixed;word-break:break-all;background:#f2f2f2" 
   > 
  
 
        
   < 
   tr 
   > 
  
 
            
   < 
   td 
   width 
   = 
   "50" 
   >50px 
  
 
            
   </ 
   td 
   > 
  
 
            
   < 
   td 
   width 
   = 
   "50%" 
   >50% aaaaaaabbbbbbbccccccc 
  
 
            
   </ 
   td 
   > 
  
 
            
   < 
   td 
   width 
   = 
   "50%" 
   >50% aaaaaaabbbbbbbccccccc 
  
 
            
   </ 
   td 
   > 
  
 
            
   < 
   td 
   width 
   = 
   "50" 
   >50px 
  
 
            
   </ 
   td 
   > 
  
 
            
   < 
   td 
   width 
   = 
   "100" 
   >100px 
  
 
            
   </ 
   td 
   > 
  
 
        
   </ 
   tr 
   > 
  
 
        
   < 
   tr 
   > 
  
 
            
   < 
   td 
   >50px 
  
 
            
   </ 
   td 
   > 
  
 
            
   < 
   td 
   >50% aaaaaaabbbbbbbccccccc 
  
 
            
   </ 
   td 
   > 
  
 
            
   < 
   td 
   >50% aaaaaaabbbbbbbccccccc 
  
 
            
   </ 
   td 
   > 
  
 
            
   < 
   td 
   >50px 
  
 
            
   </ 
   td 
   > 
  
 
            
   < 
   td 
   >100px 
  
 
            
   </ 
   td 
   > 
  
 
        
   </ 
   tr 
   > 
  
 
   </ 
   table 
   > 
  
 
   </ 
   body 
   > 
  
 
   </ 
   html 
   > 
  

      
  
 
   table-layout:fixed; 
  

    解释： 
   固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。
在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。
通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。
 
列宽由表格宽度和列宽度设定。
 
<html>
<head>
<style type="text/css">
table.one
{
table-layout: automatic
}
table.two
{
table-layout: fixed
}
</style>
</head>
<body>

<table class="one" border="1" width="100%">
<tr>
<td width="20%">1000000000000000000000000000</td>//宽度会被内容挤开
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>

<br />

<table class="two" border="1" width="100%">
<tr>
<td width="20%">1000000000000000000000000000</td>//宽度不变但内容超出宽度 覆盖第二列内容
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>

</body>
</html>
效果：
 
word-break:break-all;
解释：
允许在单词内换行。
<!DOCTYPE html>
<html>
<head>
<style> 
p.test1
{
width:11em; 
border:1px solid #000000;
word-break:hyphenate;
}

p.test2
{
width:11em; 
border:1px solid #000000;
word-break:break-all;
}
</style>
</head>
<body>

<p class="test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<p class="test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>

<p><b>注释：</b>目前 Opera 不支持 word-break 属性。</p>

</body>
</html>
效果：

CHOUFENGDDDDDD

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
td的width可以设置固定值也可设置百分比，达到某些列宽度固定，某些列按比例自适应的效果。原文出自：www.hangge.com 转载请保留原文链接：ht...

&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;&lt;style&gt; table,table td,table th{border:1px solid #ff0000;border-collapse:collapse;}&lt;/style&gt;&lt;table widt...
复制链接

扫一扫