Css：如何格式化和删除左右两侧表格的轮廓边框？答案

【问题标题】：Css: How to format and remove outlining borders of table on left and right side?Css：如何格式化和删除左右两侧表格的轮廓边框？
【发布时间】：2015-02-13 06:19:35
【问题描述】：

我想从我的表格中删除轮廓边框，即现在为黑色 1px 的顶部、底部、左侧和右侧边框。我试图改变我的 css，但它只会消除整个表格的边框。

我还想（悬停）在左侧的单元格中添加一个左粗体彩色边框。如果这有意义吗？像这样：如果我在表格中悬停一行（就像现在一样），它会按预期着色。但我希望最左边的单元格在其左侧也有一个粗边框。此单元格：<td class="rowTitle">TITLE</td>

这是我的html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Compare Table</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>

<table style="width:100%" class="hoverTable">
  <tr>
  <td class="blankcell"></td>
    <td id="check">Image</td>
    <td>Image</td> 
    <td>Image</td>
  </tr>
  <tr>
   <td class="rowTitle">TITLE</td>
    <td>&#x2714</td>
    <td>&#x2714</td> 
    <td>&#x2714</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>
  <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;
}
.hoverTable tr:nth-child(even) {
    background-color: #eee;
}
.hoverTable tr:nth-child(odd) {
    background-color:#fff;
}
/* Upper left cell*/
.blankcell {
    background: none!important; 
    border: none!important;
}
/* HOVER FUNCTION */
.hoverTable{
        width:100%; 
        border-collapse:collapse; 
    }
    .hoverTable td{ 
        padding:7px; 
        border: #000000 0px solid;
    }
    /* Define the default color for all the table rows */
    .hoverTable tr{
        background: #ffffff;
        border: 1px solid black;
    }
    /* Define the hover highlight color for the table row */
    .hoverTable tr:not(:nth-child(1)):hover {
        background-color: #86D694;
    }
/* Check and X-Mark Coloring*/
#check {
    color: #1CF200;
}
#x01 {
    color: #ff6969;
}

感谢您对此事的任何帮助，谢谢！

【问题讨论】：

标签： html css

【解决方案1】：

您可以修改所选行的css。

这将是您的默认 css（设置边框）

.hoverTable tr{
    background: #ffffff;
    border-bottom: 1px solid black;
    border-top:1px solid black;
}

这将是您悬停时的 CSS

.hoverTable tr:not(:nth-child(1)):hover {
    border-left:5px solid black;
}

我为顶部和底部行添加了一个 ID，名为 notop 和 last

更新的 HTML：

  <tr id = "notop">
  <td  class="blankcell"></td>
    <td id="check">Image</td>
    <td>Image</td> 
    <td>Image</td>
  </tr>


<tr  id = "last">
  <td class="rowTitle">TITLE</td>
    <td>&#x2714</td>
    <td>&#x2714</td> 
    <td>&#x2714</td>
  </tr>

顶行和底行的 CSS

#notop{
    border:0px;
}
#last{
    border-bottom:0px;
}

查看工作小提琴：http://jsfiddle.net/2o144n92/

【讨论】：

【解决方案2】：

你好，请使用/试试这个

CSS

border-left
border-right
border-top
border-bottom

查看此链接enter link description here

【讨论】：