Вёрстка таблицы CSS

K_V · July 5, 2011

Доброго времени суток!! Делаю первые шаги в html/css/ Столкнулся с такой проблемой. Порылся в нете, почитал. Но так и не нашел ответ на свой вопрос.

У меня есть таблица, которой задан CssClass main_table, для ячеек шапки таблицы задан класс table_head. В table_head указано, какие границы у ячеек должны быть, какого цвета. Но они перекрывают границы таблицы справа! Таким образом у правой ячейки шапки таблицы граница как у ячеек, а не как у таблицы! Как убрать перекрытие границ? border-collapse пробовал. Но ячейки продолжают перекрывать границы таблицы(((

Вот класс ячеек шапки и таблицы:

.table_head
{

    border-bottom: 1px solid #цвет1;
    border-right-style: solid;
    border-bottom-style: solid;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-bottom-color: #цвет2;
    border-right-color: #цвет2;

}

.main_table
{
    text-align: left;
    border: 1px solid #цвет1;
}

psywalker · July 5, 2011

Так не прокатит?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {}
table { border: 2px solid #000; border-collapse: collapse;}
	td { border: 1px solid red;}

</style>
</head>

<body>
<table>
	<tr><td>jdsjlksd dskdsjk</td><td>jdsjlksd dskdsjk</td></tr>
	<tr><td>jdsjlksd dskdsjk</td><td>jdsjlksd dskdsjk</td></tr>
</table>
</body>
</html>

K_V · July 5, 2011

Спасибо! Так пробовал - рулит) Просто интересно и хочется понять, почему бордер таблицы должен быть больше на 1px чем бордер ячейки таблицы))) А если значения ширины границ ячейки таблицы и самой таблицы равны, то отображается граница ячейки)

psywalker · July 5, 2011

Спасибо! Так пробовал - рулит) Просто интересно и хочется понять, почему бордер таблицы должен быть больше на 1px чем бордер ячейки таблицы))) А если значения ширины границ ячейки таблицы и самой таблицы равны, то отображается граница ячейки)

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

K_V · July 5, 2011

Понятно! Спасибо огромное за исчерпывающий ответ. Стало всё понятно хоть) Ну если так, значит обходные пути, чтобы сделать толщину в 1px везде кривые и скучные) Придётся скорее всего создавать стили крайних ячеек и писать border-right-color такой же, как у таблицы)))) Но лучше конечно вариант с 2px)))

psywalker · July 5, 2011

Понятно! Спасибо огромное за исчерпывающий ответ. Стало всё понятно хоть) Ну если так, значит обходные пути, чтобы сделать толщину в 1px везде кривые и скучные) Придётся скорее всего создавать стили крайних ячеек и писать border-right-color такой же, как у таблицы)))) Но лучше конечно вариант с 2px)))

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

K_V · July 5, 2011

Понятно! Спасибо огромное за исчерпывающий ответ. Стало всё понятно хоть) Ну если так, значит обходные пути, чтобы сделать толщину в 1px везде кривые и скучные) Придётся скорее всего создавать стили крайних ячеек и писать border-right-color такой же, как у таблицы)))) Но лучше конечно вариант с 2px)))
Нее, это плохой вариант, потому что никогда не знаешь, сколько точно ячеек у тебя будет. Лучше уж тогда обернуть таблицу в див и ему уже назначить бордер 1пк.

Ох, придётся подумать как лучше) Вопрос исчерпан. Тему считаю закрытой. Спасибо psywalkerу.

K_V · July 6, 2011

Снова возникла необходимость поднять тему) Снова вёрстка, снова таблица, снова граница в 1px

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

Внешние границы черного цвета толщиной 1px, внутренние серого толщиной 1px.. Умираю второй день) Кто-нибудь сталкивался?

вот способы, кому может помогут - создание таблицы с толщиной границ в 1 px, но цвет одинаковый:

Способ 1 - заливаем ячейку цветом, потом создаем в ней таблу, в которой раздвигаем ячейки, залитые другим цветом


<table border=0 cellpadding=0 cellspacing=0><tr><td bgcolor=black> 
<table border=0 cellpadding=4 cellspacing=1><tr bgcolor=white>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr></table>
</td></tr></table>

Способ 2 - использование border-collapse


<html>
<style>
    td {border:1px solid black; }
</style>

<body>

<table cellpadding=0 cellspacing=1 style="border-collapse:collapse;">
<tr cellpadding=0 cellspacing=0>
    <tr>
        <td>asd</td><td>asdf</td>

    </tr>
       <tr><td colspan=2>cap</td></tr>

</tr>
</table>
</body>
</html>

psywalker · July 6, 2011

K_V,

Дружище, смотри, а я чё-та не понял, тебе же нужна просто граница вокруг и внутри, да?

Вот такой вариант чем плох, например:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	* { margin: 0; padding: 0;}
	html,body { height: 100%;}
	table { border-collapse: collapse; margin: 1px;}
		table td { border: 1px solid #000;}

</style>
</head>

<body>

<table>
<tr cellpadding=0 cellspacing=0>
    <tr>
        <td>asd</td><td>asdf</td>

    </tr>
       <tr><td colspan=2>cap</td></tr>

</tr>
</table>

</body>
</html>

Кстати в своём примере ты забыл про доктайп :unsure:

K_V · July 6, 2011

Упс) Вариант отличный! Но границы одинакового цвета и у таблицы и у ячеек( А я хочу сделать бордер таблицы черный, а внутри все серые, как на этом рисунке - тут граница таблы черная, а внутри все границы серые)) И я уже на исходе :dash: просто не понимаю, как сделать))) и вариантов не нашел(

psywalker · July 6, 2011

Упс) Вариант отличный! Но границы одинакового цвета и у таблицы и у ячеек( А я хочу сделать бордер таблицы черный, а внутри все серые, как на этом рисунке - тут граница таблы черная, а внутри все границы серые)) И я уже на исходе просто не понимаю, как сделать))) и вариантов не нашел(

Да погоди ты волноваться так, мы же с тобой! Вот, проверька лучше:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
        * { margin: 0; padding: 0;}
        html,body {margin: 10px; }
        table { margin-left: -1px; margin-bottom: -1px; border-collapse: collapse; position: relative; right: -1px;}
                table td { border: 1px solid red;}
				div { overflow: hidden; float: left; border: 1px solid #000;}

</style>
</head>

<body>
<div>
<table>
<tr cellpadding=0 cellspacing=0>
    <tr>
        <td>asd</td><td>asdf</td>

    </tr>
       <tr><td colspan=2>cap</td></tr>

</tr>
</table>
</div>
</body>
</html>

Searcher · July 6, 2011

а margin ячейкам не помогает?

psywalker · July 6, 2011

а margin ячейкам не помогает?

Неа, чё-та я там покрутил-повертел, никак. Если не сложно, покажи вариантик.

K_V · July 6, 2011

А я сделал напрямую) Создал 100500 классов: для нижних ячеек, для крайних правых ячеек, и для нижней крайней правой ячейки с бордерами как у таблицы) Я сдался)))

psywalker · July 6, 2011

А я сделал напрямую) Создал 100500 классов: для нижних ячеек, для крайних правых ячеек, и для нижней крайней правой ячейки с бордерами как у таблицы) Я сдался)))

ууу, а чё это ты?

K_V · July 7, 2011

Выхода другого не нашел( И фантазии уже не было) Главное - работает)) Хотя, конечно, это плохой способ...

psywalker · July 7, 2011

Выхода другого не нашел( И фантазии уже не было) Главное - работает)) Хотя, конечно, это плохой способ...

Эхх...ясненько, жаль конеша, ну может оно и к лучшему

Sign In

Вёрстка таблицы CSS

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information