2016-07-26 16 views
0

我遇到了这个模板以获得流畅的时事通讯模板。 我可以理解它的工作方式:它是一个100%全宽的桌子,有三个'td'。第一个和第三个'td'环绕第二个'td',并且可以在使浏览器窗口变小时看到它们的功能。令我困惑的是第二个'td'的固定宽度。 这是如何响应<table>?

<html> 
 
<head> 
 
    <title>Title</title> 
 
</head> 
 
<body> 
 

 
<table width="100%"> 
 
    <tr> 
 
     \t <td bgcolor="#ff0000">&nbsp;</td> 
 
     \t <td width="600" bgcolor="#ffffff"> 
 
      
 
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 

 
     </td> 
 
     <td bgcolor="#ff0000">&nbsp;</td> 
 
    </tr> 
 
</table> 
 
</body> 
 
</html>

正如你可以看到它有600px的定义静态的宽度,但是当窗口比600px的小,这也它旁边变得越来越小,就像其他两个“TD的indead给你一个水平滚动条。是不是一个静态宽度定义“非流体”?这个怎么用?

回答

0

默认情况下表格有table-layout:auto;这就是为什么它正在调整手机。 如果它被设置为table-layout:fixed;那么它会打破。 检查链接 table-layout

+0

哦,我不知道这是在背后的一切行为!我觉得有点惭愧,我忽略了这些信息。谢谢你教我! – Rawfish