VPF::Border in cells - Форум программистов

hunterman

Дата 6.1.2009, 14:47 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 36
Регистрация: 3.12.2008
Где: Херсон

Репутация: нет
Всего: нет

в общем есть табличка выделение ячеек которой делает эти ячейки определенного класса (.selected - меняет фон, шрифт, border) единсвенная загвоздка это рисование border-ов у выделеных ячеек. т.к. они могут находиться рядом то выглядит довольно не красиво, а если создавать на каждый вариант по классу и вычислять каким нужно закрашивать - то такое решение выглядитне очень прикольно :(

водводя итог что мне требуется - нужно чтобы рядом находящиеся ячейки с одинаковым классом удаляли смежный border.

может есть какие нибудь решения по подобной задаче. заранее спасибо.

WebMast

Дата 6.1.2009, 16:06 (ссылка)

(нет голосов)

Загрузка ...

Front-end developer

Профиль
Группа: Участник
Сообщений: 105
Регистрация: 1.1.2009
Где: Беларусь

Репутация: 2
Всего: 2

Дай html, посмотреть.. Может есть решение!

Это сообщение отредактировал(а) WebMast - 6.1.2009, 16:39

--------------------

Личный Блог Евгения ЖлобоРасширение vkleaner для Google Chrome

WebMast

Дата 6.1.2009, 16:42 (ссылка)

(нет голосов)

Загрузка ...

Front-end developer

Профиль
Группа: Участник
Сообщений: 105
Регистрация: 1.1.2009
Где: Беларусь

Репутация: 2
Всего: 2

Есть способ, с добавлением еще одного класса.
И еще один, который вы, видимо опустили. Зачем делать бордер к ячейкам, если <table border="1" ..> работает. На данный момент, все (зависит от вашего кода) не нужное в обводки таблицы можно убрать или привести в нормальный вид.

--------------------

Личный Блог Евгения ЖлобоРасширение vkleaner для Google Chrome

hunterman

Дата 6.1.2009, 18:29 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 36
Регистрация: 3.12.2008
Где: Херсон

Репутация: нет
Всего: нет

т.к. контент генерится динамически вот примерно что в итоге у меня выходит - text4 с text-style-3 обозначает выделеный фрагмент пользователем.

Код


<table class="main">
    <tr>
        <td align="left" style="vertical-align: top;">
            <table>
                <tr>
                    <td>
                        <div style="width: 100%; white-space: nowrap;">Caption</div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td align="left" style="vertical-align: top;">
            <table class="content" style="height: 100%;">
                <tr class="header-caption">
                    <td>Caption 1</td>
                    <td>Caption 2</td>
                    <td>Caption 3</td>
                    <td>Caption 4</td>

                </tr>
                <tr>
                    <td class="text-style-1"><div>text1</div></td>
                    <td class="text-style-1"><div>text1</div></td>
                    <td class="text-style-1"><div>text1</div></td>
                    <td><div>text2</div></td>
                    <td><div>text2</div></td>
                    <td><div>text2</div></td>
                    <td><div>text2</div></td>
                </tr>
                <tr>
                    <td><div>text2</div></td>
                    <td class="text-style-2"><div>text3</div></td>
                    <td><div>text2</div></td>
                    <td class="text-style-3"><div>text4</div></td>
                    <td class="text-style-3"><div>text4</div></td>
                    <td><div>text2</div></td>
                    <td><div>text2</div></td>
                </tr>
                <tr>
                    <td><div>text2</div></td>
                    <td><div>text2</div></td>
                    <td><div>text2</div></td>
                    <td><div>text2</div></td>
                    <td><div>text2</div></td>
                    <td><div>text2</div></td>
                    <td><div>text2</div></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

и вот как я оформляю эту табличку:

Код


.main {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.header-caption {
    background: #336699;
    color: blue;
    font: 14px;
    cursor: default;
}

.content {
    width: 100%;
    height: 100%;
    background: #fff;
    border-collapse: collapse;
    vertical-align: middle;
    color: #000;
    cursor: pointer;
}

.content, .header-caption {
    text-align: center;
}


.text-style-1 {
    color: gray;
}

.text-style-2 {
    border: 1px red solid;
    font-weight: bold;
}

.text-style-3 {
    border: 1px blue solid;
    background: skyblue;
}

bars80080

Дата 6.1.2009, 21:47 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

попробуй для таблицы задать

Код


.main { border-collapse: border; }

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

hunterman

Дата 7.1.2009, 17:55 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 36
Регистрация: 3.12.2008
Где: Херсон

Репутация: нет
Всего: нет

Цитата(bars80080 @ 6.1.2009, 21:47)

попробуй для таблицы задать

Код


.main { border-collapse: border; }

border-collapse может принимать значения либо collapse либо separate. пока не совсем понимаю что ты имел ввиду. если можно поподробнее. пока ячейки не перекрывают смежные бордюры :(

bars80080

Дата 8.1.2009, 00:20 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

да, мазанул. collapse конечно

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

webster

Дата 8.1.2009, 01:48 (ссылка)

(голосов:1)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34

Решение может быть таким:

Код


<table>
<tr class="adjacent_cells">
<td>Sample</td>
<td>Sample</td>
<td>Sample</td>
<td>Sample</td>
</tr>
<tr>
<td>Sample</td>
<td>Sample</td>
<td>Sample</td>
<td>Sample</td>
</tr>
</table>

Код


table {
border-collapse: collapse;
border-width: 0px 1px;
border-style: solid;
}
tr td {
border-width: 1px 1px;
border-style: solid;
}
tr.adjacent_cells td {
border-width: 1px 0px;
}

hunterman

Дата 8.1.2009, 15:25 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 36
Регистрация: 3.12.2008
Где: Херсон

Репутация: нет
Всего: нет

последние решение хорошее и почти подходит smile

вот только не учитывает что выделено несколько строк.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »