【发布时间】：2015-02-14 05:55:44
【问题描述】：
我几乎完成了我正在尝试创建的比较表的第一个大纲。我遇到了一些我无法解决的问题。而且我尝试了不同的类、id 和属性，但最终要么什么都不做，要么改变了一些非预期的东西。不过有些问题我自己解决了。
不要一一发布几个问题，而是发送垃圾邮件。我控制住自己，把我的问题组合在一起。就这样吧：
我的目标：
在最左边，我想创建一个首先为空白的列，然后包含每行的所有标题。
然后我希望包含产品的每一行都遵循以下下降顺序：
1. 产品图片
2. 公司名称
3.产品名称
4. 价格
5. 按钮
6. 这是一个空白行：带有类别标题（例如功能或兼容性）。
7. 左侧 td 中的第一个标题（例如音频、视频）。然后在每个单元格中使用复选标记或 x 标记继续下降序列，具体取决于该产品包括命名规范（音频..视频..等）
我的问题是：
如何让所有内容都居中？除了应该左对齐的左列标题。
如何在没有悬停效果的情况下使类别标题行上方的所有行？
如何使“类别标题”停留在 2px 纯灰色边框上？
如何让 Category Title 上方的所有行都变成白色？
有没有更好的方法以更有效的方式制作此边框？
/* thick border for the top row */
#borderbottom{
border-bottom: 2px solid gray;
}
我认为我应该为每个表创建两个单独的表 CSS，但是当我尝试时，这两个表没有相互对齐。
这是我的 HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Compare Table</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<br/>
<br/>
<table class="hoverTable">
<tr>
<td class="blankcell"></td>
<td>IMAGE</td>
<td>IMAGE</td>
<td>IMAGE</td>
</tr>
<tr>
<td class="blankcell"></td>
<td>Company Name<br/>Product Name</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td class="blankcell"></td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</table>
<table class="hoverTable">
<tr id="notop">
<td class="blankcell" id="borderbottom"><h3>Category Title</h3></td>
<td id="borderbottom"></td>
<td id="borderbottom"></td>
<td id="borderbottom"></td>
</tr>
<tr>
<td class="rowTitle" colspan="4">TITLE</td>
</tr>
<tr>
<td class="rowTitle">TITLE</td>
<td id="check">✔</td>
<td>✔</td>
<td>✔</td>
</tr>
<tr>
<td class="rowTitle">TITLE</td>
<td id="x01">✖</td>
<td>✖</td>
<td>✖</td>
</tr>
<tr id="nolast">
<td class="rowTitle">TITLE</td>
<td>✔</td>
<td>✔</td>
<td>✔</td>
</tr>
</table>
</body>
</html>
这是我的 CSS：
th,td {
padding: 15px;
text-align: center;
}
/* Row coloring */
.hoverTable tr:nth-child(even) {
background-color: #FAFAFA;
}
.hoverTable tr:nth-child(odd) {
background-color:#ffffff;
}
/* Upper left cell*/
.blankcell {
background: none!important;
text-align: left;
}
/*top and bottom border*/
#notop{
border:0px;
}
#nolast{
border-bottom:0px;
}
/* HOVER FUNCTION */
.hoverTable{
width:100%;
border-collapse:collapse;
}
.hoverTable td{
padding:4px;
border: #000000 0px solid;
}
/* Define the default color for all the table rows */
.hoverTable tr{
background: #ffffff;
border-bottom:1px solid #B5B3B3;
border-top:1px solid #B5B3B3;
}
/* Define the hover highlight color for the table row */
.hoverTable tr:not(:nth-child(1)):hover {
background-color: #FFF0E6;
border-left:5px solid #ff6600;
}
/* Check and X-Mark Coloring*/
#check {
color: #1CF200;
}
#x01 {
color: #ff6969;
}
/* Left-hand title */
.rowTitle {
font-weight: bold;
text-align: left;
}
/* thick border for the top row */
#borderbottom{
border-bottom: 2px solid gray;
}
JSFiddle
感谢您提供的任何帮助！
【问题讨论】：