CSS HTML таблицы слева и справа от границы - PullRequest
Новая
       8

CSS HTML таблицы слева и справа от границы

3 голосов
/ 15 марта 2012

Я пытаюсь написать какой-нибудь CSS, который сделает так, чтобы моя HTML-таблица имела границы только по горизонтали, а не по вертикали между столбцами.

Вот что у меня есть: 

@charset "utf-8";
/* CSS Document */

<style type="text/css">

box-table-a{
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    margin: 45px;
    width: 480px;
    text-align: left;
    /*border-width: 0px;
    border-left: 0px;
    border-right: 0px;*/
    border-collapse: collapse;
}

#box-table-a th{
    font-size: 13px;
    font-weight: normal;
    padding: 8px;
    background: #b9c9fe;
    border-right:1px solid #b9c9fe;
    border-left:1px solid #b9c9fe;
    border-top: 4px solid #aabcfe;
    border-bottom: 1px solid #fff;
    color: #039;
}
#box-table-a td{
    padding: 8px;
    background: #e8edff; 
    border-bottom: 1px solid #fff;
    color: #669;
    border-top: 1px solid transparent;
}
#box-table-a tr:hover td{
    background: #d0dafd;
    color: #339;
}
</style>

В результате получается таблица с белыми рамками со всех сторон.Любые идеи, что я делаю не так?

РЕДАКТИРОВАТЬ Я могу заставить его делать то, что я хочу здесь: http://jsfiddle.net/QZwt5/26/ но когда я беру эту точную таблицу и точный CSSв Dreamweaver и затем FTP на моем сервере, я все еще получаю тонкие белые линии между каждой ячейкой. image http://img267.imageshack.us/img267/9135/temppb.jpg

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

Все работает на сервере Ubuntu, я создаю его вwinXP, а затем ftp к Apache, так что могут возникнуть проблемы с правами, мешающими работе CSS?

Ответы [ 4 ]

3 голосов
/ 15 марта 2012

Это может быть достигнуто просто с помощью CSS

HTML 

<table border="1" id="table">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>

<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
</tr>

<tr>
<td>Row 3, cell 1</td>
<td>Row 3, cell 2</td>
</tr>
</table>​

CSS 

tr {
    border: 1px solid black;
}
td {
    border: 0;
    width: 100px;
}​

Live пример

1 голос
/ 15 марта 2012

Я могу ошибаться, но, просто посмотрев на ваш код, вы никогда не "удалите" границы слева и справа. Попробуйте добавить 

#box-table-a td{
    padding: 8px;
    background: #e8edff; 
    border-bottom: 1px solid #fff;
    border-left: none;
    border-right: none;
    color: #669;
    border-top: 1px solid transparent;
}
0 голосов
/ 15 марта 2012

Я думаю, этого достаточно 

table tr { border: 1px #000 solid; }

Демо

0 голосов
/ 15 марта 2012

Попробуйте удалить левую и правую границы из ячеек th и посмотрите, решит ли это проблему.

Если это так, установите border-left и border-right в ячейках td того же цвета, что и фон, чтобы "скрыть" их.

...