Css：如何格式化和删除表格左右两侧的大纲边框？
我想从我的表格中删除大纲边框，即顶部、底部、左侧和右侧边框，现在为黑色1px。我试图在css中进行更改，但它只会删除整个表格的边框。
另外，我想（悬停时）在左侧的单元格中添加一个粗体彩色边框。这有意义吗？如下所示：如果我在表中悬停一行（就像现在一样），它会按预期的方式着色。但我希望最外层的左侧单元格在其左侧也有一个粗体边框。此单元格：<代码>
这是我的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>✔</td>
<td>✔</td>
<td>✔</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>
<td class="rowTitle">TITLE</td>
<td>✔</td>
<td>✔</td>
<td>✔</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;
}
我很感谢你在这件事上的帮助，谢谢你！
共有2个答案
你好请使用/试试这个
border-left
border-right
border-top
border-bottom
检查此链接在此处输入链接描述
您可以修改所选行的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>✔</td>
<td>✔</td>
<td>✔</td>
</tr>
顶行和底行的CSS
#notop{
border:0px;
}
#last{
border-bottom:0px;
}
查看工作小提琴：http://jsfiddle.net/2o144n92/
-
我有一个使用制作的基于网页。问题是，我有那些额外的空格在divs的左侧和右侧。基本上内容都在中心。我怎么移除这个？ 我试着使用margin-top,margin-left,margin-right,bootstrap的pull-left和pull-right,margin和padding设置为0,width：100%等,没有任何效果。 这里有一张图片： 看左边和右边，这是我想要去掉的空白。我不知道
-
问题内容： 我有一个特殊而令人沮丧的问题。对于简单的标记： 我将不同的背景色值应用于 thead ， tr 和 tr 奇数元素。问题在于，在大多数浏览器中，每个单元格都有一个不需要的边框，该边框不是任何表行的颜色。仅在Firefox 3.5中，表格的任何单元格都没有边框。 我只想知道如何在其他主要浏览器中删除这些边框，以便表中唯一可见的是交替的行颜色。 问题答案： 您需要将此添加到CSS：
-
下面的图表显示了一些值。 我想隐藏/删除右侧的值，因为左侧就足够了。 请参见下图： 代码如下： 我试图在Github上留档搜索： https://github.com/PhilJay/MPAndroidChart/wiki/The-Axis 但是没有运气。 我怎样才能从右侧删除值？ 非常感谢您的建议。
-
初来乍到，我正在创建一个网站，似乎有一个问题，我做了一个表，以保存一个图像和一个表，我做了一个内容。左边的内容右边的图像。当我向右浮动图像表时，内容表将完全移动到图像表下面。当我浮动它离开有太多的空间之间的2。所讨论的代码是表和表3。我希望它在链接按钮旁边显示图像块，在按钮下面但在图像块旁边显示上下文块。 第二个问题是我的logo标题，这是一个图像正在删除背景图像。 HTML代码 CSS代码 图像
-
我试图使内容容器在中间旁边的左栏，但不能使它调整适当的窗口调整大小，仍然使整个内容容器不走出窗口的视图。 https://jsfidle.net/ptm7f6cl/ 如果我使用width：calc(100%-200px),这是可以的； 但当我调整它的大小，有这个差距：如何删除绿色的差距，仍然有容器调整适当的大小，而不丢失的200px在右侧。 null null 无位置：固定；在Html标记上 问候
-
本文向大家介绍javascript去除字符串左右两端的空格，包括了javascript去除字符串左右两端的空格的使用技巧和注意事项，需要的朋友参考一下 去除字符串左右两端的空格，在vbscript里面可以轻松地使用 trim、ltrim 或 rtrim，但在js中却没有这3个内置方法，需要手工编写。下面的实现方法是用到了正则表达式，效率不错，并把这三个方法加入String对象的内置方法中去。