2016-07-26 20 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