Сделайте так, чтобы несколько ячеек таблицы HTML казались объединенными без - PullRequest
Новая
       38

Сделайте так, чтобы несколько ячеек таблицы HTML казались объединенными без

1 голос
/ 10 июля 2011

У меня есть таблица в формате html, и мне нужно сделать так, чтобы несколько ячеек выглядели соединенными, но при этом фактически не объединялись.Это потому, что у каждой ячейки должен быть свой фон.

Поэтому мне нужно убрать правую границу из самой левой ячейки;уберите левую границу от самой правой клетки;уберите обе границы из центральных ячеек.

Вот пример, где у меня есть таблица с двумя строками и 7 ячейками.Во втором ряду ячейки должны отображаться как только 2 ячейки.Один охватывает 5 столбцов, а другой - 7. 

<table>
<tr>
<td>foo</td>
<td>foo</td>
<td>foo</td>
<td>foo</td>
<td>foo</td>
<td>foo</td>
<td>foo</td>
</tr>
<tr>
<td style="background-color:white; border-right: blank; border-left: solid;"  >foo</td>
<td style="background-color:green; border-right: blank; border-left: blank;"  ></td>
<td style="background-color:black; border-right: blank; border-left: blank;"  ></td>
<td style="background-color:yellow; border-right: blank; border-left: blank;"  ></td>
<td style="background-color:blue; border-right: solid; border-left: blank;"  ></td>

<td style="background-color:red; border-right: blank; border-left: solid;"  >foo</td>
<td style="background-color:pink; border-right: solid; border-left: blank;"  ></td>

</tr>
</table>

Но тогда этого все еще недостаточно, поскольку между ячейками все еще есть некоторый фон таблицы.Как мне взять это?

Ответы [ 3 ]

2 голосов
/ 10 июля 2011

Дайте вашему столу класс 

<table class="myTable">
    <!-- Your Rows/Cells -->
</table>

Затем с помощью CSS выполните следующее: 

.myTable { 
    border: none;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0; 
    padding: 0; 
}

Также border:blank неверно, используйте border:none вместо.

1 голос
/ 10 июля 2011 
<style type='text/css'>
#left{
border-left:none;
}
#right{
border-right:none;
}
#both{
border-left:none;
border-right:none;
}
</style>

включает эти идентификаторы CSS в <td> элементы таблицы. пример: <table border=1> <tr> <td>1111</td> <td id='right'>2222</td> <td id='both'>3333</td> <td id='left'>4444</td> </tr> </table>

0 голосов
/ 10 июля 2011 
<td colspan="5" style="background-color:white; border-right: none; border-left: solid;">foo</td>
<td colspan="2"  style="background-color:red; border-right: solid; border-left: none;">foo</td>

Демо "

...