當<tbody>被顯示時，保持表​​不變：

Question

我想爲SMF設計一個主題，這些表是一個真正的頭痛。我有一個例子HTML代碼如下所示：

<div id="wrapper"> 
    <table class="table_list"> 
     <tbody class="header"> 
      <tr> 
       <td colspan="4"> 
        <h3>TESTING</h3> 
       <td> 
      </tr> 
     </tbody> 

     <tbody class="content"> 
      <tr class="window"> 
       <td class="as"> 
        <a href="">12</a> 
       <td> 
       <td class="bs"> 
        <a href="">23</a> 
       <td> 
       <td class="cs"> 
        <a href="">34</a> 
       <td> 
       <td class="ds"> 
        <a href="">45</a> 
       <td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

而且它的CSS：

#wrapper { 
width:500px; 
margin:0 auto; 
} 
* 
{ 
    margin: 0; 
    padding: 0; 
    border-spacing: 0px; 
    border-collapse: separate; 
} 
table.table_list { 
    background:#16A085; 
    width:100%; 
} 
tbody.header {background:#2980B9} 
tbody.content { 
    display:block; 
} 
td.as {background:#E74C3C} 
td.bs {background:#8E44AD} 
td.cs {background:#E74C3C} 
td.ds {background:#8E44AD} 

如果測試代碼，如果CSS是沒有改變爲display：block，在TD保留在其小區位置桌子。但是如果它變成了塊，單元就像內聯元素一樣行動！我很確定我做錯了什麼。

p.s.我需要做出阻止來設置它的樣式，即添加圓形邊框。

JS Fiddle

Answer 1

首先，你需要關閉標籤。

其次，因爲你正在改變表身的顯示類型，從而改變了瀏覽器calculatyes的單元格寬度的方式，你可以嘗試專門設置寬度：

tr { 
    display:block; 
    width:100%; 
    clear:left; 
} 
td { 
    float:left; 
    width:25%; 
    box-sizing:border-box; 
}