Изменить цвет границы ячейки таблицы

Я хочу, чтобы иметь возможность изменять цвет любой границы ячейки таблицы. Я решил не использовать border-left, border-right и т. Д., Потому что невозможно сделать пиксель идеальным. Различные браузеры делают это по-другому. Особенно в зоне пересечения границ. я придумал подход, но он не работает в IE, как я ожидал:Изменить цвет границы ячейки таблицы

HTML:

<table> 
    <tr> 
     <td> 
      line 1 
      <div class="left-border"></div> 
     </td> 
     <td> 
      line 1<br> 
      line 2 
     </td> 
    <tr> 
</table>

CSS:

table { 
    border-collapse: collapse; 
} 

table, th, td { 
    border: 1px solid #ccc; 
} 

tr { 
    vertical-align: top; 
} 

td { 
    position: relative; 
    padding: 5px; 
} 

.left-border { 
    position: absolute; 
    top: -1px; 
    bottom: -1px; 
    left: -1px; 
    width: 1px; 
    background-color: #000; 
}

JSFIDDLE: http://jsfiddle.net/dv1oqopL/5/

источник

2015-11-10 user1561346

вы можете установить переполнение: скрыть до td и установить высоту div вручную больше высоты td, например, 100px. он отобразит всю высоту границы, как в другом браузере. –

@ Граница DeepakSharma станет невидимой, если вы установите 'overflow: hidden;'. – user1561346

вы хотите изменить 'border-color' каждого' '? –

хорошо IE является B *** ч, как всегда, он просто вычисляет высоту TD на основании его собственного содержание, так что я не имею чистое исправления для вас, но хак, который может решить проблему, чтобы добавить

border-left:1px solid #000;

на этом TD, это наполнит границы под вашим div и посмотрите на часть всех браузеров.

источник

2015-11-10 15:35:18

Изменить цвет границы ячейки таблицы

ответ

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