бордер строки

@pixel · Регистрация: 19.05.2009

Студворк — интернет-сервис помощи студентам

Приветствую.
Делаю таблицу на странице. Делаю на html со стилями. Получается, но есть ньюансы. Например, не пойму, почему у меня между ячейками есть промежутки? Я бордеры целиком не рисую, хочу что бы в ячейках были только нижний бордер и боковой. В итоге когда делаю одну ячейку, ставлю ей бордер справа, делаю вторую, ставлю бордер слева и справа, делаю третью, ставлю бордер слева в итоге получаю вот это:

@StopSmell · 25.02.2013, 17:45

CSS
1
table {border-collapse: collapse;}

@pixel · 25.02.2013, 17:51 **[ТС]**

у меня это уже и так выставлено, но не помогает:

CSS
1
2
3
4
.some_table table{
width:740px;
border-collapse: collapse;
}

@StopSmell · 25.02.2013, 17:54

Хмм

CSS
1
border-spacing: 0;

@pixel · 25.02.2013, 17:56 **[ТС]**

ни в table ни в td border-spacing: 0; ничего не меняет. (у меня)

@StopSmell · 25.02.2013, 17:57

Тогда давайте полностью код

@sleshiy · 25.02.2013, 18:06

в настройках самой таблицы проверте какой стиль

@Lovrentiy · 25.02.2013, 18:48

Браузер Опера?

@pixel · 25.02.2013, 18:52 **[ТС]**

браузер FF и IE
вот код CSS

Кликните здесь для просмотра всего текста

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.price_table table{
width:740px;
border-spacing: 0;
border-collapse: collapse;
}
 
.price_table td {  
 border-spacing: 0;
 border-bottom-color: #d3d3d3;
 border-bottom-style: dotted;
 border-bottom-width: 1px; 
}
 
.td_long_width {width: 440px;}
.td_short_width {width: 100px;}
.td_align_left {text-align: left;}
.td_align_center {text-align: center;}
.td_align_right {text-align: right;}
 
.td_border_line_left {
 border-left-color: #d3d3d3;
 border-left-style: solid;
 border-left-width: 1px;
}
 
.td_border_line_right {
 border-right-color: #d3d3d3;
 border-right-style: solid;
 border-right-width: 1px;
}
 
.td_border_line_both {
 border-right-color: #d3d3d3;
 border-right-style: solid;
 border-right-width: 1px;
 border-left-color: #d3d3d3;
 border-left-style: solid;
 border-left-width: 1px;
}

вот код HTML

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table class="price_table">
<tr>
 <td class="price_table td_long_width td_align_center td_border_line_right">SomeValue0</td>
 <td class="price_table td_short_width td_align_center td_border_line_both">SomeValue1</td>
 <td class="price_table td_short_width td_align_center td_border_line_both">SomeValue2</td>
 <td class="price_table td_short_width td_align_center td_border_line_left">SomeValue3</td>
</tr>
<tr>
 <td class="price_table td_long_width td_align_left td_border_line_right">SomeValue4</td>
 <td class="price_table td_short_width td_align_center td_border_line_both">SomeValue5</td>
 <td class="price_table td_short_width td_align_center td_border_line_both">SomeValue6</td>
 <td class="price_table td_short_width td_align_center td_border_line_left">SomeValue7</td>
</tr>
 
</table>

@StopSmell · 25.02.2013, 20:48

Ну так прально, не .price_table table, а table.price_table

@pixel · 25.02.2013, 21:36 **[ТС]**

мдя, ну а чего вы хотите, я вообще в первый раз со стилями начал работать вручную. кстати td.price_table - тоже нужно поменять? и кстати, не слишком громоздко получается с классами:

HTML5
1
<td class="price_table td_long_width td_align_center td_border_line_right">SomeValue0</td>

может как то оптимизировать можно?

@StopSmell · 25.02.2013, 22:42

Да конечно перегружен. То что сейчас у вас изображено в результате можно получить таким образом

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
table.price_table {
    width:740px;
    border-collapse: collapse;
} 
 
.price_table td {
    border-bottom: 1px dotted #d3d3d3;
    width: 100px;
    text-align: center;
} 
.price_table td.td_long_width {width: 440px;}
.price_table td.td_align_left {text-align: left;}
.price_table td.td_align_right {text-align: right;}
 
.price_table td + td {
    border-left: 1px solid #d3d3d3;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table class="price_table">
    <tr>
        <td class="td_long_width td_align_center">SomeValue0</td>
        <td>SomeValue1</td>
        <td>SomeValue2</td>
        <td>SomeValue3</td>
    </tr>
    <tr>
        <td class="td_long_width td_align_left">SomeValue4</td>
        <td>SomeValue5</td>
        <td>SomeValue6</td>
    <td>SomeValue7</td>
    </tr> 
</table>

@pixel · 26.02.2013, 12:17 **[ТС]**

Сообщение от StopSmell

Да конечно перегружен. То что сейчас у вас изображено в результате можно получить таким образом

CSS
1
2
3
.price_table td + td {
    border-left: 1px solid #d3d3d3;
}

Подскажите, а что значит td + td?

@StopSmell · 26.02.2013, 12:29

Это значит две рядом стоящие td'эшки. Cоседи короче.

@pixel · 26.02.2013, 12:46 **[ТС]**

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

@StopSmell · 26.02.2013, 13:08

Строки заголовков тогда правильней будет вообще по-другому обозначить тегами th. Только они будут иметь определенные стили (жирный и по центру), но и в случае чего можно переопределить.

CSS
1
th {font-weight: 400; text-align: left;}

Что касается последней строки, то ставьте класс строке tr (например tr class="last_row") и ставьте фон этой строке

HTML5
1
<tr class="last_row"></tr>

CSS
1
tr.last-row {background: url(путь до картинки);}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table class="price_table">
    <tr>
        <th class="td_long_width td_align_center">SomeValue0</th>
        <th>SomeValue1</th>
        <th>SomeValue2</th>
        <th>SomeValue3</th>
    </tr>
    <tr>
        <td class="td_long_width td_align_left">SomeValue4</td>
        <td>SomeValue5</td>
        <td>SomeValue6</td>
    <td>SomeValue7</td>
    </tr> 
</table>

@pixel · 26.02.2013, 14:50 **[ТС]**

Сообщение от StopSmell

CSS
1
tr.last-row {background: url(путь до картинки);}

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

Добавлено через 1 час 4 минуты
еще один глупый вопрос. вот если у меня стилем задано размещение картинки внутри ячейки в качестве фона - возможно ли на этот фон повесить a href?

@pixel · 03.03.2013, 21:52 **[ТС]**

Сообщение от StopSmell

Это значит две рядом стоящие td'эшки. Cоседи короче.

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

@StopSmell · 03.03.2013, 22:29

Замените

CSS
1
2
3
.price_table td + td {
    border-left: 1px solid #d3d3d3;
}

на

CSS
1
2
3
.price_table > tr > td + td {
    border-left: 1px solid #d3d3d3;
}

@pixel · 04.03.2013, 09:06 **[ТС]**

Заменю, вот только подскажите как это читается на русском?

Новые блоги и статьи Все статьи Все блоги /
Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .
Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .

@pixel 26 / 19 / 5 Регистрация: 19.05.2009 Сообщений: 2,290

	бордер строки 25.02.2013, 17:18. Показов 2976. Ответов 23 Метки нет (Все метки) Приветствую. Делаю таблицу на странице. Делаю на html со стилями. Получается, но есть ньюансы. Например, не пойму, почему у меня между ячейками есть промежутки? Я бордеры целиком не рисую, хочу что бы в ячейках были только нижний бордер и боковой. В итоге когда делаю одну ячейку, ставлю ей бордер справа, делаю вторую, ставлю бордер слева и справа, делаю третью, ставлю бордер слева в итоге получаю вот это: Изображения 0

@pixel 26 / 19 / 5 Регистрация: 19.05.2009 Сообщений: 2,290
	25.02.2013, 17:56 [ТС]
	ни в table ни в td border-spacing: 0; ничего не меняет. (у меня) 0

@StopSmell 293 / 169 / 29 Регистрация: 16.09.2012 Сообщений: 370
	25.02.2013, 17:57
	Тогда давайте полностью код 0

@sleshiy 237 / 214 / 43 Регистрация: 12.12.2011 Сообщений: 917
	25.02.2013, 18:06
	в настройках самой таблицы проверте какой стиль 0

@Lovrentiy 162 / 162 / 11 Регистрация: 07.09.2011 Сообщений: 995
	25.02.2013, 18:48
	Браузер Опера? 0

@StopSmell 293 / 169 / 29 Регистрация: 16.09.2012 Сообщений: 370
	25.02.2013, 20:48
	Ну так прально, не .price_table table, а table.price_table 1

@StopSmell 293 / 169 / 29 Регистрация: 16.09.2012 Сообщений: 370
	26.02.2013, 12:29
	Это значит две рядом стоящие td'эшки. Cоседи короче. 1

@pixel 26 / 19 / 5 Регистрация: 19.05.2009 Сообщений: 2,290
	26.02.2013, 12:46 [ТС]
	сорри, подскажите, а как в ваш код css добавить еще пару правил: нужно первую строку выделить другим цветом (хидер будет) а в нижней строке в качестве фона картинки разместить. Просто я сейчас опять по-своему сделаю громоздко, а у вас все так культурно получилось - тоже так хочу научиться. 0

@pixel 26 / 19 / 5 Регистрация: 19.05.2009 Сообщений: 2,290
	04.03.2013, 09:06 [ТС]
	Заменю, вот только подскажите как это читается на русском? 0