Jump to content
  • 0

организовать одну табличку


nickflip
 Share

Question

на странице должна быть такая же табличка, как на этой картинке http://img.sknt.ru/2501/f91ecee8c9.jpg

подскажите пожалуйста, как ее можно сделать ?

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

проблемы в этих бордер топах райтах лефтах и боттомах ) то они отображаются, то нет, хотя ширина 0px.

вот пока, что есть: http://www.sharemania.ru/0150914

:)

Edited by nickflip
Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

Whatsup :

я так и начал делать. для всей таблицы задал бодрер-коллапс: коллапс а у крайних начал бордерам ненужным приписывать 0пх.

#cost{

background: url('ftop.png') no-repeat #eaebef;

border-left: 0px;

border-right: 0px;

}

<td id="cost" >Цена</td>

тут некоторые бордеры не хотят становиться нулевыми. напр хочу, чтобы тут был бордер-топ 0пх(для id="cost"), задаю, нифига. мне кажется, что бордер-топом тут не получится..

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

Edited by nickflip
Link to comment
Share on other sites

  • 0

Посмотри пример, эт не сложно. Только тебе + к самой левой колонке и шапке нужно будет еще по классу. а в остальном ctrl + C, ctrl + V

<table cellspacing="0" cellpadding="0" align="center" class="over" >
<tr>
<td class="in3">
наименования</td>
<td class="in3">
цена руб/шт</td>
<td class="in3">
габариты мм</td>
<td class="in3">
вес, т</td>
</tr>
<tr>
<td class="in2">
ПДГ 60х20 (6х2) Н30</td>
<td class="in2">
17 900р.</td>
<td class="in2">
6000х2000х140</td>
<td class="in2">
4.2
</td>
</tr>
<tr>
<td class="in1">
2П30-20.30 (3х2) Н30</td>
<td class="in1">
9 150р.</td>
<td class="in1">
3000х2000х160</td>
<td class="in1">
2.4</td>
</tr>
<tr>
<td class="in2">
2П30-20.30 (3х2) Н30</td>
<td class="in2">
10 300р.</td>
<td class="in2">
3000х2000х180</td>
<td class="in2">
2.7</td>
</tr>
<tr>
<td class="in1">
2П30-18.30 (3х1,75) Н30</td>
<td class="in1">
6 700р.</td>
<td class="in1">
3000х1750х170</td>
<td class="in1">
2.2</td>
</tr>
<tr>
<td class="in2">
2П30-18.30 (3х1,75) Н10</td>
<td class="in2">
6 500р.</td>
<td class="in2">
3000х1750х160</td>
<td class="in2">
2.1</td>
</tr>
<tr>
<td class="in1">
1П30-15.30 (3х1,5) Н30</td>
<td class="in1">
7 450р.</td>
<td class="in1">
3000х1500х180</td>
<td class="in1">
2</td>
</tr>
<tr>
<td class="in2">
ПДП 3х1,5 Н30</td>
<td class="in2">
6 600р.</td>
<td class="in2">
3000х2000х160
</td>
<td class="in2">
1.8</td>
</tr>
<tr>
<td class="in1">
ПДП 3х1,2 Н30</td>
<td class="in1">
5 200р.</td>
<td class="in1">
3000х1200х160
</td>
<td class="in1">
1.4</td>
</tr>
</table>

.over
{
border: 1px solid #fff;
text-align: center;
width: 470px;
}

.in1
{
border-right: 1px solid #fff;
padding: 0px;
margin: 0px;
background: #dce5ec;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
padding-bottom: 5px;
padding-top: 5px;

}

.in2
{
border-right: 1px solid #fff;
padding: 0px;
margin: 0px;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
padding-bottom: 5px;
padding-top: 5px;
text-align: center;
}

.in3
{
border-right: 1px solid #fff;
padding: 5px;
margin: 0px;
background: #0C70DF;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFF;
font-weight: bold;
text-align: center;
}

И общий стиль для всех тд и табле

td
{
vertical-align: top;
font-size: 12px;
font-family: Tahoma;
color: #3a3a3a;
}

table
{
border-spacing: 0;
border-collapse: collapse;
border: 0;
font-size: 12px;
font-family: Tahoma;
color: #3a3a3a;
}

Edited by Anami
Link to comment
Share on other sites

  • 0

я упростил твой код.. суть осталась та же. убрал только всякие шрифты выравнивания и цвет текста.

.over

{

border: 1px solid #fff;

text-align: center;

width: 570px;

}

.in1

{

border-right: 1px solid #fff;

background: #dce5ec;

}

.in2

{

border-right: 1px solid #fff;

background: #cecece;

}

.in3

{

border-right: 1px solid #fff;

background: #0C70DF;

color: #FFF;

}

td{

color: #3a3a3a;

}

table

{

border-spacing: 0;

border-collapse: collapse;

border: 0;

color: #3a3a3a;

}

для

<table cellspacing="0" cellpadding="0" align="center" class="over" >

<tr><td class="in3">наименования</td><td class="in3">цена руб/шт</td><td class="in3">габариты мм</td><td class="in3">вес, т</td></tr>

<tr><td class="in2">ПДГ 60х20 (6х2) Н30</td><td class="in2">17 900р.</td><td class="in2">6000х2000х140</td><td class="in2">4.2</td></tr>

<tr><td class="in1">2П30-20.30 (3х2) Н30</td><td class="in1">9 150р.</td><td class="in1">3000х2000х160</td><td class="in1">2.4</td></tr>

<tr><td class="in2">2П30-20.30 (3х2) Н30</td><td class="in2">10 300р.</td><td class="in2">3000х2000х180</td><td class="in2">2.7</td></tr>

<tr><td class="in1">2П30-18.30 (3х1,75) Н30</td><td class="in1">6 700р.</td><td class="in1">3000х1750х170</td><td class="in1">2.2</td></tr>

<tr><td class="in2">2П30-18.30 (3х1,75) Н10</td><td class="in2">6 500р.</td><td class="in2">3000х1750х160</td><td class="in2">2.1</td></tr>

<tr><td class="in1">1П30-15.30 (3х1,5) Н30</td><td class="in1">7 450р.</td><td class="in1">3000х1500х180</td><td class="in1">2</td></tr>

<tr><td class="in2">ПДП 3х1,5 Н30</td><td class="in2">6 600р.</td><td class="in2">3000х2000х160</td><td class="in2">1.8</td></tr>

<tr><td class="in1">ПДП 3х1,2 Н30</td><td class="in1">5 200р.</td><td class="in1">3000х1200х160</td><td class="in1">1.4</td></tr>

</table>

вопрос в том, как в этой таблице убрать правый и верхний бордер ?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy