Question

我差不多完成了我试图创建的比较表的第一个轮廓。虽然我无法解决，但我遇到了一些问题。我已经尝试过不同的类，id和属性，但它最终无所事事或改变了一些不合意的东西。我自己解决了一些问题。

不是逐个发布几个问题，而是垃圾邮件。我抓住了自己并将我的问题归为一类。所以这就是：

我的目标：

在最左边，我想创建一个首先为空的列，然后保存每行的所有标题。然后我想要包含产品的每一行遵循以下顺序：B1。产品图像
2.公司名称
3.产品名称
价格
5.按钮
6.这里是一个白色的空白行：带有类别标题（例如功能或可兼容性） 7.左td中的第一个标题（例如音频，视频）。然后在每个单元格中使用支票或x标记继续下降序列，具体取决于该产品包括命名规范（audio..video ..等）

我的问题是：

如何让一切都集中在一起？左列标题除外，它们应该是左对齐的如何在没有悬停效果的情况下将所有行设置在类别标题行之上？如何制作＆＃34;类别标题＆＃34;搁在2px纯灰色边框上？
如何使类别标题上的所有行变为白色？
有没有更好的方法以更有效的方式制作这个边界？

/* 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">&#x2714</td>
    <td>&#x2714</td> 
    <td>&#x2714</td>
  </tr>
  <tr>
  <td class="rowTitle">TITLE</td>
    <td id="x01">&#x2716</td>
    <td>&#x2716</td> 
    <td>&#x2716</td>
  </tr>
  <tr id="nolast">
  <td class="rowTitle">TITLE</td>
    <td>&#x2714</td>
    <td>&#x2714</td> 
    <td>&#x2714</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

感谢您提供的任何帮助！

Answer 1

如何让一切都集中在一起？左列标题除外，它们应该是左对齐的。

所有内容已经成为中心。您已经有了左对齐文本的代码。它被用在第一列的底部表格中。

.rowTitle {
    font-weight: bold;
    text-align: left !important;
}

如何制作＆＃34;类别标题＆＃34;停留在2px纯灰色边框上？在h3标签中添加类别

h3.category {
  margin-bottom: -8px;
}

如何在没有悬停效果的情况下将所有行设置在类别标题行之上？

您可以使用不使用悬停代码的单独代码。基本上用＆＃34; .hoverTable tr：not（：nth-child（1））复制hovertable：hover＆＃34;并将新课程称为toptable。（可能有一种更有效的方式。

如何使类别标题上的所有行变为白色？

如果您使用基本相同值的单独代码，则无法复制

.hoverTable tr:nth-child(even) {
    background-color: #FAFAFA;
}
.hoverTable tr:nth-child(odd) {
    background-color:#ffffff;
}

有更好的方法以更有效的方式制作此边框吗？我会使用分类标记。 colspan将跨越它下面的4列。

CSS

th {
  border-bottom: 2px solid grey;
}

HTML

<thead>
  <tr>
     <th colspan="4">Category Title</th>
  </tr>
</thead>

请参阅其中一些适用于此jsfiddle http://jsfiddle.net/x6co362t/

的内容

是的，您应该制作两组不同的代码，因为这样可以解决您的大部分问题。他们如何不协调？你应该应该对齐什么？

CSS的几个表格格式问题

JSFiddle

1 个答案: