Удалить границу из ячейки таблицы

У меня есть структура таблицы, которая динамически генерируется. На столе есть сложный стиль.Удалить границу из ячейки таблицы

Я добавил границу сверху и справа на прямую таблицу, мне нужно удалить/манипулировать цветом границы для первого и последнего 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 +

источник

2013-12-20 Sowmya

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

источник

2013-12-20 09:59:22

К сожалению забыл упомянуть .. Я не могу использовать псевдо класс, так как он не широко не поддерживается версиями IE – Sowmya

Мне нужна эта структура будет поддерживаться IE7 + так .. – Sowmya

Да я могу добавить классы – Sowmya

Попробуйте это:

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

источник

2013-12-23 07:45:38

Добавить

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.

источник

2013-12-24 06:33:26

Demo первый (я проверил это в 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 белую тень.

Также предполагается, что вы можете изменить классы на своем столе, которые, я думаю, вы сказали, что можете сделать это в одном из своих комментариев выше.

В основном, использует 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>

Update: вот скриншоты из IE7 на Vista, IE8 на WinXP, и IE8 на Win7:

Screenshot from IE7 on Vista

Screenshot from IE8 on WinXP

enter image description here

источник

2013-12-24 12:49:40 myajouri

Это не принимает серые границы в ie7 и 8 – Sowmya

@Sowmya это странно. Я только что добавил скриншоты для IE7 и 8. Какие версии браузера/ОС вы тестируете? – myajouri

windows 7 ....... – Sowmya

Вы можете комбинировать решения, предлагаемые Morpheus и Suraj Naik.

IE 8 поддерживает первый ребенок, но он не поддерживает последний-ребенок, так что вы можете заменить

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

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

достичь последнюю ячейки.

Для IE7, вы можете добавить код, предоставленный Сурадж Наиком в условных комментариев:

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

источник

2013-12-26 13:01:47 mali303

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

источник

2013-12-26 13:06:40

Если вы можете изменить классы td далее удалите стиль оформления границы из таблицы {} и примените имя класса к элементам, которые вы хотите получить серой рамкой.

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

Затем добавьте еще один класс для правой границы стиля:

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

Убедитесь добавить оба названия класса в ячейке, содержащей «г».

источник

2013-12-28 09:23:02 Roleat

Удалить границу из ячейки таблицы

ответ

Смежные вопросы