如何讓表格根據其容器調整其大小

Question

我試圖調整其寬度和單元格的寬度，當它包含它的div它調整大小。所以當幀寬減小時，表格寬度減小，保持所有單元大小相同。

<div id="page"> 
    <table id="menubar"> 
     <tbody> 
      <tr> 
       <a href="somewhere1.html"><td class="menu">MenuItem1</td></a> 
       <a href="somewhere2.html"><td class="menu">MenuItem2</td></a> 
       <a href="somewhere3.html"><td class="menu">MenuItem3</td></a> 
      </tr> 
     </tbody> 
    </table> 
</div> 

我的CSS是這樣的：

#page { 
    background-color: #f0eae3; 
    max-width: 960px; 
    min-width: 450px; 
    margin: auto; 
} 

.menu { 
    background-color: #ffffff; 
    text-align: center; 
    width: 310px; 
} 
#menubar { 
    width: 960px 
} 

這可能真的很容易。

Answer 1

您需要更改#menubar小號width以100%確保表佔據了容器#page的100%。如果您不希望表格的尺寸大於960px，則可以將max-width設置爲960px以防止它擴大太多。

#page { 
 
    background-color: #f0eae3; 
 
    max-width: 960px; 
 
    min-width: 450px; 
 
    margin: auto; 
 
} 
 
#menubar { 
 
    max-width: 960px; 
 
    width: 100%; 
 
} 
 
.menu { 
 
    background-color: #ffffff; 
 
    text-align: center; 
 
    max-width: 310px; 
 
}

<div id="page"> 
 
    <table id="menubar"> 
 
     <tbody> 
 
      <tr> 
 
       <a href="somewhere1.html"><td class="menu">MenuItem1</td></a> 
 
       <a href="somewhere2.html"><td class="menu">MenuItem2</td></a> 
 
       <a href="somewhere3.html"><td class="menu">MenuItem3</td></a> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
</div>

Answer 2

你有這麼

<table> 
    <tr> 
    <a href=""><td>1</td></a> 
    <a href=""><td>2</td></a> 
    <a href=""><td>3</td></a> 
    <a href=""><td>4</td></a> 
    </tr> 
</table> 

這一定

<table> 
    <tr> 
    <td><a href="">1</a></td> 
    <td><a href="">2</a></td> 
    <td><a href="">3</a></td> 
    <td><a href="">4</a></td> 
    </tr> 
</table> 

http://jsfiddle.net/njhqfnut/

#page { 
 
    background-color: #f0eae3; 
 
    max-width: 960px; 
 
    min-width: 450px; 
 
    margin: auto; 
 
} 
 

 
.menu { 
 
    background-color: #ffffff; 
 
    text-align: center; 
 
    width: 310px; 
 
} 
 
#menubar { 
 
    max-width: 960px 
 
}

<div id="page"> 
 
    <table id="menubar"> 
 
     <tbody> 
 
      <tr> 
 
       <td class="menu"><a href="somewhere1.html">MenuItem1</a></td> 
 
       <td class="menu"><a href="somewhere2.html">MenuItem2</a></td> 
 
       <td class="menu"><a href="somewhere2.html">MenuItem3</a></td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
</div>