HTML/CSS 表格样式答案

【问题标题】：HTML/CSS Table styleHTML/CSS 表格样式
【发布时间】：2017-03-24 03:29:11
【问题描述】：

我的桌子有问题。它看起来不像我想要的那样，我想知道是否有人可以帮助我纠正我可能犯的任何错误。非常感谢！

这是网站上的桌子图片

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

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


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

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

table.foodTable tbody tr td{
    border: 4px solid black;
    padding: 0.5em 1.5em;
}

<table class = "foodTable">
	<caption>Food</caption>
	<thead>
	<tr>
		<th colspan = "2" style = "border-top:none;border-left:none;">&nbsp;</th>
		<th>Hate</th>
		<th>Dislike</th>
		<th>Indifferent</th>
		<th>Like</th>
		<th>Love</th>
	</tr>
	</thead>
	
	<tbody>
		<tr>
			<th>Chocolate</th>
			<td> - </td>
			<td> - </td>
			<td> - </td>
			<td> - </td>
			<td>&#10004</td>
		</tr>
		<tr>
			<th>Ketchup</th>
			<td> &#10004</td>
			<td> - </td>
			<td> - </td>
			<td> - </td>
			<td> - </td>
			</tr>
			
		<tr>
			<th>Cheese</th>
			<td> - </td>
			<td> &#10004 </td>
			<td> - </td>
			<td> - </td>
			<td> - </td>
		</tr>
	</tbody>
</table>

【问题讨论】：

标签： html css html-table

【解决方案1】：

您的桌子上有一个colspan ="2"，th，但在 tr 内的 th 上没有。将 colspan 添加到 tr th 对齐列 - 但是我不确定将 th 作为行的第一个 td 的最佳方法。最好对 td 应用样式，使其具有与列标题相同的样式，但在行内没有 th 的语义定义。

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

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


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

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

table.foodTable tbody tr td{
    border: 4px solid black;
    padding: 0.5em 1.5em;
}

<table class = "foodTable">
	<caption>Food</caption>
	<thead>
	<tr>
		<th colspan = "2" style = "border-top:none;border-left:none;">&nbsp;</th>
		<th>Hate</th>
		<th>Dislike</th>
		<th>Indifferent</th>
		<th>Like</th>
		<th>Love</th>
	</tr>
	</thead>
	
	<tbody>
		<tr>
			<th colspan = "2">Chocolate</th>
			<td> - </td>
			<td> - </td>
			<td> - </td>
			<td> - </td>
			<td>&#10004</td>
		</tr>
		<tr>
			<th colspan = "2">Ketchup</th>
			<td> &#10004</td>
			<td> - </td>
			<td> - </td>
			<td> - </td>
			<td> - </td>
			</tr>
			
		<tr>
			<th colspan = "2">Cheese</th>
			<td> - </td>
			<td> &#10004 </td>
			<td> - </td>
			<td> - </td>
			<td> - </td>
		</tr>
	</tbody>
</table>

【讨论】：