表未正常工作

Question

CSS

table { 
    width: 100%; 
    height: 310px; 
    margin: 10px; 
} 

.tabledata { 
    background-color: #123456; 
    color: white; 
    font-size: 15px; 
    text-align: center; 
    padding: 2px; 
} 

HTML

<table class="allmenus"> 
    <tr> 
     <td class="tabledata" colspan="5" rowspan="2">general<br>information</td> 
     <td class="tabledata" colspan="3" rowspan="2">unit</td> 
     <td class="tabledata" colspan="2" rowspan="2">location</td> 
    </tr> 
    <tr> 
    </tr> 
    <tr> 
     <td class="tabledata" colspan="3" rowspan="2">activities</td> 
     <td class="tabledata" colspan="4" rowspan="2">future events</td> 
     <td class="tabledata" colspan="3" rowspan="4">contact<br>us</td> 
    </tr> 
    <tr> 
    </tr> 
    <tr> 
     <td class="tabledata" colspan="4">gallery</td> 
     <td class="tabledata" colspan="3" rowspan="2">Donate Blood</td> 
    </tr> 
    <tr> 
     <td class="tabledata" colspan="4">volunteer</td> 
    </tr> 
</table> 

你好，我想產生類似下面的表格：

我寫了上面的代碼來創建這個表。

我不明白哪裏出了問題！看看桌子，一切都搞砸了。任何人都可以告訴我這裏有什麼問題，我該怎麼辦？請忽略顏色。提前致謝。

Answer 1

問題是表列將收縮到它們中的數據大小。在列號爲4 & 5的情況下，幾乎沒有任何結果。表格單元格不會平均分配，這是您似乎想要做的。

那麼你有什麼選擇？你可以放一個表頭，併爲每個單元指定一個最小寬度。例如 <tr><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr>

th { 
width:10%; 
} 

可能是一個更好的選擇，但是，是不是使用表都沒有。您可以使用div和css更好地分配內容。

Answer 2

的問題是，瀏覽器不能計算的合併單元格和行跨度，因爲沒有大小要挺住。因此可以在開始時設置10 <td>，併爲它們設置visiblity: hidden。然後你有一個空間，但它的作品。 （Display: none不能正常工作。）並給每個<td>一個寬度和一個高度！

如果將同一類有很多次在HTML中，使用CSS來代替：

table td { 
    ... 
} 

，那麼你就不必重複它在HTML！

的單位必須是2並且的單位必須是3。

HTML

<table class="allmenus"> 
    <tr class="hidden"> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td colspan="5" rowspan="2">general 
      <br>information</td> 
     <td colspan="2" rowspan="2">unit</td> 
     <td colspan="3" rowspan="2">location</td> 
    </tr> 
    <tr></tr> 
    <tr> 
     <td colspan="3" rowspan="2">activities</td> 
     <td colspan="4" rowspan="2">future events</td> 
     <td colspan="3" rowspan="4">contact 
      <br>us</td> 
    </tr> 
    <tr></tr> 
    <tr> 
     <td colspan="4">gallery</td> 
     <td colspan="3" rowspan="2">Donate Blood</td> 
    </tr> 
    <tr> 
     <td colspan="4">volunteer</td> 
    </tr> 
</table> 

CSS

.allmenus { 
    width: 100%; 
    height: 310px; 
    margin: 10px; 
} 

.allmenus td { 
    background-color: #123456; 
    color: white; 
    font-size: 15px; 
    text-align: center; 
    padding: 2px; 
    width: 20px; 
    height: 20px; 
} 

.hidden td { 
    visibility: hidden; 
} 

Demo