CODEWITHSUNDEEP
cssbordercss-tables
Sowmya
Sowmya

Reputation: 26989

Remove border from table cell

I have a table structure which is dynamically generated. There is a tricky styling to the table table.

I have added border top and right to the direct table, what I need is to remove/manipulate with border color for first and last td of the table.

If you can see my fiddle, I need to wrap the orange colored table with outline of grey color. At the same time the border of 1px to the td should remain the same.

If I try giving the border top to the cell then white border is collapsing.

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  
}

Please check the DEMO here

P.S - I dont want to change the structure of the html because it is auto generated table code. And no pseudo classes since it is not supported in IE8 and below. I need this to be proper in IE7+

Upvotes: 3

Views: 21127

Answers (7)

Mohsen Safari
Mohsen Safari

Reputation: 6805

DEMO

change your CSS classes like this:

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

and use this 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;
}

Upvotes: 3

Roleat
Roleat

Reputation: 61

If you can alter the td classes further remove the border styling from the table {} and apply a class name to the elements you wish to receive the grey border.

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

Then add another class for right border styling:

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

Make sure to add both class names to the cell that contains the 'g'.

Upvotes: 0

myajouri
myajouri

Reputation: 3124

Demo first (I've tested this in IE7,8,9,10 as well as latest Chrome and Firefox):

http://jsbin.com/ImEvAGoJ/5

I've used a combination of border and box-shadow to achieve the double border effect. Of course box-shadow is not supported in IE8 and lower, so I had to use the equivalent DropShadow filter (more info). Example:

.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');
}

Note that the grey box-shadow is 4px wide because it overlaps the 1px white shadow.

Also, this assumes that you can change the classes on your table which I think you said you can do in one of your comments above.

Basically, use outside class for all cells that are out side of your grey border, top, left, bottom, right classes for top row, left column, bottom row, and right column cells respectively. Your HTML should look like this:

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


Update: here are screenshots from IE7 on Vista, IE8 on WinXP, and IE8 on Win7:

Screenshot from IE7 on Vista

Screenshot from IE8 on WinXP

enter image description here

Upvotes: 0

Java Curious ღ
Java Curious ღ

Reputation: 3702

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

Upvotes: 0

mali303
mali303

Reputation: 605

You can combine solutions provided by Morpheus and Suraj Naik.

IE 8 supports first-child but it doesn't support last-child, so you can replace

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

with

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

to reach the last cell.

For IE7, you can add the code provided by Suraj Naik in conditional comments:

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

You can find full CSS below:

<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]-->

Upvotes: 0

Suraj Naik
Suraj Naik

Reputation: 505

Add

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

to the class .left

And

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

To the class .bottom

This should work in IE7.

Upvotes: 1

Leo Zhao
Leo Zhao

Reputation: 544

Try this:

<!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>

and with this 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; 
}

Upvotes: 0

Related Questions