Question

我有一个动态生成的表结构。桌子上有一种棘手的造型。

我在直接表格的顶部和右边添加了边框，我需要的是使用边框颜色删除/操作td的第一个和最后一个table。

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

如果我尝试将边框顶部放入单元格，则白色边框会折叠。

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 +

中使用它

Answer 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;
}

Answer 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。

Answer 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; 
}

Answer 4

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

http://jsbin.com/ImEvAGoJ/5

我使用了border和box-shadow的组合来实现双边框效果。当然，IE8及更低版本不支持box-shadow，因此我必须使用等效的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白色阴影重叠。

此外，这假设你可以在上面的一条评论中更改你认为你可以做的表上的课程。

基本上，对于灰色边框外的所有单元格使用outside类，top，left，bottom，right类为top分别为行，左列，底行和右列单元格。您的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的截图：

Screenshot from IE7 on Vista

Screenshot from IE8 on WinXP

enter image description here

Answer 5

您可以结合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，您可以在条件注释中添加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]-->

Answer 6

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;
}

Answer 7

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

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

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

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

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

从表格单元格中删除边框

7 个答案: