2017-03-19 206 views
1

我在使用我的桌子時遇到問題。這並不是我想要的,我想知道是否有人可以幫我解決我可能犯的錯誤。非常感謝!HTML/CSS表格樣式

下面是表的網站上的圖片

enter image description here

table.foodTable{ 
 
\t border:4px outset black; 
 
\t border-collapse:collapse; 
 
\t width: 100%; 
 
\t background-color:white; 
 
\t text-align:center; 
 
\t 
 
} 
 

 
table.foodTable caption{ 
 
\t font-weight:bold; 
 
} 
 

 

 
table.foodTable thead{ 
 
\t height:2.5em; 
 
\t font-size:1.1em; 
 
} 
 

 
table.foodTable thead tr th{ 
 
\t padding: 0.5em 1.5em; 
 
} 
 

 
table.foodTable tbody tr td{ 
 
    border: 4px solid black; 
 
    padding: 0.5em 1.5em; 
 
}
<table class = "foodTable"> 
 
\t <caption>Food</caption> 
 
\t <thead> 
 
\t <tr> 
 
\t \t <th colspan = "2" style = "border-top:none;border-left:none;">&nbsp;</th> 
 
\t \t <th>Hate</th> 
 
\t \t <th>Dislike</th> 
 
\t \t <th>Indifferent</th> 
 
\t \t <th>Like</th> 
 
\t \t <th>Love</th> 
 
\t </tr> 
 
\t </thead> 
 
\t 
 
\t <tbody> 
 
\t \t <tr> 
 
\t \t \t <th>Chocolate</th> 
 
\t \t \t <td> - </td> 
 
\t \t \t <td> - </td> 
 
\t \t \t <td> - </td> 
 
\t \t \t <td> - </td> 
 
\t \t \t <td>&#10004</td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <th>Ketchup</th> 
 
\t \t \t <td> &#10004</td> 
 
\t \t \t <td> - </td> 
 
\t \t \t <td> - </td> 
 
\t \t \t <td> - </td> 
 
\t \t \t <td> - </td> 
 
\t \t \t </tr> 
 
\t \t \t 
 
\t \t <tr> 
 
\t \t \t <th>Cheese</th> 
 
\t \t \t <td> - </td> 
 
\t \t \t <td> &#10004 </td> 
 
\t \t \t <td> - </td> 
 
\t \t \t <td> - </td> 
 
\t \t \t <td> - </td> 
 
\t \t </tr> 
 
\t </tbody> 
 
</table>

回答

2

你在桌子上THEAD th而不是在內部的th的有colspan ="2" TR的。將trsp添加到tr th將對齊列 - 但我不確定它是否是將th作爲該行的第一個td的最佳方法。將樣式應用到td會使其與列標題具有相同的樣式,但沒有該行內的th的語義定義會更好。

table.foodTable{ 
 
\t border:4px outset black; 
 
\t border-collapse:collapse; 
 
\t width: 100%; 
 
\t background-color:white; 
 
\t text-align:center; 
 
\t 
 
} 
 

 
table.foodTable caption{ 
 
\t font-weight:bold; 
 
} 
 

 

 
table.foodTable thead{ 
 
\t height:2.5em; 
 
\t font-size:1.1em; 
 
} 
 

 
table.foodTable thead tr th{ 
 
\t padding: 0.5em 1.5em; 
 
} 
 

 
table.foodTable tbody tr td{ 
 
    border: 4px solid black; 
 
    padding: 0.5em 1.5em; 
 
}
<table class = "foodTable"> 
 
\t <caption>Food</caption> 
 
\t <thead> 
 
\t <tr> 
 
\t \t <th colspan = "2" style = "border-top:none;border-left:none;">&nbsp;</th> 
 
\t \t <th>Hate</th> 
 
\t \t <th>Dislike</th> 
 
\t \t <th>Indifferent</th> 
 
\t \t <th>Like</th> 
 
\t \t <th>Love</th> 
 
\t </tr> 
 
\t </thead> 
 
\t 
 
\t <tbody> 
 
\t \t <tr> 
 
\t \t \t <th colspan = "2">Chocolate</th> 
 
\t \t \t <td> - </td> 
 
\t \t \t <td> - </td> 
 
\t \t \t <td> - </td> 
 
\t \t \t <td> - </td> 
 
\t \t \t <td>&#10004</td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <th colspan = "2">Ketchup</th> 
 
\t \t \t <td> &#10004</td> 
 
\t \t \t <td> - </td> 
 
\t \t \t <td> - </td> 
 
\t \t \t <td> - </td> 
 
\t \t \t <td> - </td> 
 
\t \t \t </tr> 
 
\t \t \t 
 
\t \t <tr> 
 
\t \t \t <th colspan = "2">Cheese</th> 
 
\t \t \t <td> - </td> 
 
\t \t \t <td> &#10004 </td> 
 
\t \t \t <td> - </td> 
 
\t \t \t <td> - </td> 
 
\t \t \t <td> - </td> 
 
\t \t </tr> 
 
\t </tbody> 
 
</table>