从表格单元格中删除边框答案

【问题标题】：Remove border from table cell从表格单元格中删除边框
【发布时间】：2018-02-03 16:23:49
【问题描述】：

我有一个动态生成的表结构。表格的样式很复杂。

我在直接表中添加了边框顶部和右侧，我需要删除/处理table 的第一个和最后一个td 的边框颜色。

如果你能看到我的小提琴，我需要用灰色的轮廓包裹橙色的桌子。同时td的1px边框应该保持不变。

如果我尝试将边框顶部给单元格，则白色边框正在折叠。

CSS：

.table_main {
    border-top: 3px solid #d6d6d6 !important; 
    border-right: 3px solid #d6d6d6 !important; 
}

.table_main td {
    background: #ff9d26;
    border-right: solid 1px #fff;
    border-bottom: 1px solid #fff;
    padding: 1px;
    text-align: center;
    width: 100px
}

.left {
    background: #fff !important;
    border-right: 3px solid #d6d6d6 !important; 
    border-bottom: 0 !important
}

.noborder {
    background: #fff !important;
}

.bottom{
    background: #fff !important;
    border-top: 3px solid #d6d6d6 !important; 
}

.top{
    border-top: 1px solid #fff  
}

请查看DEMO here

P.S - 我不想更改 html 的结构，因为它是自动生成的表格代码。并且没有伪类，因为 IE8 及更低版本不支持它。我需要这在 IE7+ 中是正确的

【问题讨论】：

标签： css border css-tables

【解决方案1】：

DEMO

像这样改变你的 CSS 类：

<table class="table_main" width="400" align="center" border="0" cellspacing="0" cellpadding="0">
    <tr class="top">
        <td class="left">x</td>
        <td>vb</td>
        <td>X</td>
        <td class="right">g</td>
    </tr>
    <tr>
        <td class="left">2</td>
        <td>z</td>
        <td>x</td>
        <td class="right">x</td>
    </tr>
    <tr>
        <td class="left">3</td>
        <td>v</td>
        <td>v</td>
        <td class="right">d</td>
    </tr>
    <tr class="bottom">
        <td class="left">4</td>
        <td>r</td>
        <td>r</td>
        <td class="right">x</td>
    </tr>
</table>

并使用这个 CSS：

.table_main {
}

.table_main td {
    background: #ff9d26;
    border-right: solid 1px #fff;
    border-bottom: 1px solid #fff;
    padding: 1px;
    text-align: center;
    width: 100px
}

.left, .bottom td {
    background: #fff !important;
}

.right, .left {
    border-right: 3px solid #d6d6d6 !important; 
}

.top td {
    border-top :3px solid #d6d6d6; 
}

.bottom td {
    border-top: 3px solid #d6d6d6;
}

.bottom .left {
    border-top: none;
    border-right: none !important
}

.top .left {
    border-top: none;
}

.bottom .right {
    border-right: none !important;
}

【讨论】：

抱歉忘了提.. 我不能使用伪类，因为 IE 版本没有广泛支持它
是的，我可以添加课程
第一行顶部的白色边框缺失。我也需要它，因为它在我的演示中
我认为你最好忘记这一点:)

【解决方案2】：

添加

position:relative; top:-3px; padding-top:3px; /* to adjust the nudge */

到班级.left

和

position:relative; right:-3px; padding-right:3px; /* to adjust the nudge */

致班级.bottom

这应该可以在 IE7 中使用。

【讨论】：

【解决方案3】：

试试这个：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <table class="table_main" width="400" align="center" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="left">how to remove top border from this cell?</td>
    <td class="top">vb</td>
    <td class="top">X</td>
    <td class="topRightCorner">g</td>
  </tr>
  <tr>
    <td class="left">2</td>
    <td>z</td>
    <td>x</td>
    <td class="right">x</td>
  </tr>
  <tr>
    <td class="left">3</td>
    <td>v</td>
    <td>v</td>
    <td class="right">d</td>
  </tr>
  <tr>
    <td class="noborder">4</td>
    <td class="bottom">r</td>
    <td class="bottom">r</td>
    <td class="bottom">how to remove right border from this cell?</td>
  </tr>
</table>

</body>
</html>

使用这个 CSS：

.table_main{

}
.table_main td{
    background:#ff9d26;
    border-right:solid 1px #fff;
    border-bottom:1px solid #fff;
    padding:1px;
    text-align:center;
    width:100px
}
.left{
    background:#fff !important;
    border-right:3px solid #d6d6d6 !important; 
    border-bottom:0 !important
}
.noborder{
    background:#fff !important;
}
.bottom{
    background:#fff !important;
    border-top:3px solid #d6d6d6 !important; 
}
.top{
    border-top:3px solid #d6d6d6 !important; 
}
.right{
  border-right:3px solid #d6d6d6 !important; 
}
.topRightCorner{
  border-top:3px solid #d6d6d6 !important;
  border-right:3px solid #d6d6d6 !important; 
}

【讨论】：

【解决方案4】：

您可以结合使用 Morpheus 和 Suraj Naik 提供的解决方案。

IE 8 支持 first-child 但不支持 last-child，所以你可以替换

table > tbody > tr:last-child > td:last-child

与

tr+tr+tr+tr td+td+td+td.bottom {

到达最后一个单元格。

对于IE7，可以在条件cmets中添加Suraj Naik提供的代码：

<!--[if lt IE 8]>
...
<![endif]-->

您可以在下面找到完整的 CSS：

<style>
.table_main{
        border-top:3px solid #d6d6d6 !important; 
        border-right:3px solid #d6d6d6 !important;
}
.table_main td{
    background:#ff9d26;
    border-right:solid 1px #fff;
    border-bottom:1px solid #fff;
    padding:1px;
    text-align:center;
    width:100px
}
.left{
    background:#fff !important;
    border-right:3px solid #d6d6d6 !important; 
    border-bottom:0 !important;
}
.noborder{
    background:#fff !important;
}
.bottom{
    background:#fff !important;
    border-top:3px solid #d6d6d6 !important;
}
.top{
    border-top:1px solid #fff;
}
table > tbody > tr:first-child > td:first-child
{
  margin-top: -3px;
  float: left;
}

tr+tr+tr+tr td+td+td+td.bottom {
  margin-right: -3px;
  float: right;
  padding-left: 4px;
}
</style>
<!--[if lt IE 8]>
<style>
.left{
    position:relative; top:-3px; padding-top:3px; /* to adjust the nudge */
}
.bottom{
    position:relative; right:-3px; padding-right:3px; /* to adjust the nudge */
}
</style>
<![endif]-->

【讨论】：

【解决方案5】：

CSS：

.table_main{
}
.table_main td{
    background:#ff9d26;
    border-right:solid 1px #fff;
    border-bottom:1px solid #fff;
    padding:1px;
    text-align:center;
    width:100px
}
.left, .bottom td{
    background:#fff !important;
}
.right, .left{
  border-right:3px solid #d6d6d6 !important; 
}
.top td{
  border-top:3px solid #d6d6d6; 
}
.bottom td{
  border-top:3px solid #d6d6d6;
}
.bottom .left{
  border-top:none;
  border-right:none !important
}
.top .left{
  border-top:none;
}
.bottom .right{
  border-right:none !important;
}

【讨论】：

【解决方案6】：

先演示（我已经在 IE7、8、9、10 以及最新的 Chrome 和 Firefox 中测试过）：

http://jsbin.com/ImEvAGoJ/5

我使用了border 和box-shadow 的组合来实现双边框效果。当然box-shadow在IE8及更低版本中是不支持的，所以我不得不使用等效的DropShadow过滤器（more info）。示例：

.table_main .top.right {
  box-shadow: 1px 0 white, 4px 0 #d6d6d6, 
              0 -1px white, 0 -4px #d6d6d6,
              1px -1px white, 4px -4px #d6d6d6;
  filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1, Color='#00ffffff', Positive='true'),
          progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color='#00ffffff', Positive='true'),
          progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0, Color='#00ffffff', Positive='true'),
          progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0, Color='#00ffffff', Positive='true'),
          progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-3, Color='#00d6d6d6', Positive='true'),
          progid:DXImageTransform.Microsoft.dropshadow(OffX=3, OffY=0, Color='#00d6d6d6', Positive='true');
}

请注意，灰色 box-shadow 的宽度为 4px，因为它与 1px 白色阴影重叠。

此外，这假设您可以更改桌子上的课程，我认为您说过您可以在上面的其中一个 cmets 中执行此操作。

基本上，将outside 类用于灰色边框之外的所有单元格，top、left、bottom、right 类用于顶行、左列、底行和右侧列单元格分别。您的 HTML 应如下所示：

<table class="table_main" width="400" align="center" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="outside">how to remove top border from this cell?</td>
    <td class="top left">vb</td>
    <td class="top">X</td>
    <td class="top right">g</td>
  </tr>
  <tr>
    <td class="outside">2</td>
    <td class="left">z</td>
    <td>x</td>
    <td class="right">x</td>
  </tr>
  <tr>
    <td class="outside">3</td>
    <td class="left bottom">v</td>
    <td class="bottom">v</td>
    <td class="bottom right">d</td>
  </tr>
  <tr>
    <td class="outside">4</td>
    <td class="outside">r</td>
    <td class="outside">r</td>
    <td class="outside">how to remove right border from this cell?</td>
  </tr>
</table>

更新：以下是 Vista 上的 IE7、WinXP 上的 IE8 和 Win7 上的 IE8 的屏幕截图：

【讨论】：

这在 ie7 和 8 中没有采用灰色边框
@Sowmya 这很奇怪。我刚刚添加了 IE7 和 8 的屏幕截图。您正在测试哪些浏览器/操作系统版本？
@Sowmya 你能告诉我更多吗？所以我可以帮忙:) 这可能是解决您的要求的唯一方法，它应该/确实在 IE7,8 中工作。你用的是IE兼容模式吗？或者您是否在同一版本的 Windows 上安装了多个 IE 版本？无论哪种方式，我都会考虑在每个操作系统具有单个/完整浏览器版本的机器上进行测试（而不是像 multipleIE 这样的东西）。
我刚刚在 Windows 7 上添加了 IE8 的屏幕截图。如您所见，那里有灰色边框。对于 IE 测试，我建议使用modern.ie/en-us/virtualization-tools#downloads 上提供的免费 VM。

【解决方案7】：

如果您可以进一步更改 td 类从表格中移除边框样式{}，并将类名应用于您希望接收灰色边框的元素。

td.top { border-top: 3px solid #D6D6D6; }

然后为右边框样式添加另一个类：

td.rightBorder { border-right: 3px solid #D6D6D6; }

确保将两个类名都添加到包含“g”的单元格中。

【讨论】：