Jump to content
  • 0

Помогите с border'om


Motoko Kusanagi
 Share

Question

test.jpg

Это часть таблицы, мне нужно сделать двойной бордер, как на картинке. Не могу разобраться. Заднее затемнение задается посредством pngшки на классе .dark

Если ставлю border на tr и td они перекрывают друг друга.

<table>
<tr class="dark">
<td></td>
</tr>
</table>

Как это реализовать так же, как на картинке?

Edited by Motoko Kusanagi
Link to comment
Share on other sites

20 answers to this question

Recommended Posts

  • 0

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

Ага, а елси ты не знаешь высоту ячейки?

Я бы короче делал так http://jsfiddle.net/A3MyY/2/

Link to comment
Share on other sites

  • 0

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

Ага, а елси ты не знаешь высоту ячейки?

Ну не знаешь и не знаешь :)

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

И вообще, завтра мы с тобой рубимся в шахматы :)

Link to comment
Share on other sites

  • 0

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

Ага, а елси ты не знаешь высоту ячейки?

Ну не знаешь и не знаешь :)

Хаа, ну ты приколист)) http://jsfiddle.net/A3MyY/4/

С бордерами у таблицы вариант не самый удачный. Т.к. вдруг будет border-spacing выставлен или еще что.

Сомневаюсь, на скрине этого нет, да и в коде тоже.

И вообще, завтра мы с тобой рубимся в шахматы :)

А вот это уже реально)

Link to comment
Share on other sites

  • 0

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

Ага, а елси ты не знаешь высоту ячейки?

Ну не знаешь и не знаешь :)

Хаа, ну ты приколист)) http://jsfiddle.net/A3MyY/4/

Да, так смотрится весьма уныло, я что-то совсем упустил этот момент)) В общем, нужно смотреть по ситуации :)

Link to comment
Share on other sites

  • 0

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

Ага, а елси ты не знаешь высоту ячейки?

Ну не знаешь и не знаешь :)

Хаа, ну ты приколист)) http://jsfiddle.net/A3MyY/4/

Да, так смотрится весьма уныло, я что-то совсем упустил этот момент)) В общем, нужно смотреть по ситуации :)

Нет, ты ничего не упустил, просто у тебя в голове CSS3 ;)

Link to comment
Share on other sites

  • 0

Погоди, ты меня не путай. Я же помню, что где-то делал уже подобное.

Пусть у тебя нет у ячеек высоты, но ты же можешь и наверняка задаешь ее таблице. Ведь почти в любом случае, она либо займет весь блок(что равносильно height:100%), либо тебе надо ее ограничивать высотой. И ты уже можешь смело пользоваться вложенным блоком. Так что вот так. http://jsfiddle.net/A3MyY/5/

Хоть это и ближе к частному случаю, но в то же время и более частому.

Link to comment
Share on other sites

  • 0

Погоди, ты меня не путай. Я же помню, что где-то делал уже подобное.

Пусть у тебя нет у ячеек высоты, но ты же можешь и наверняка задаешь ее таблице. Ведь почти в любом случае, она либо займет весь блок(что равносильно height:100%), либо тебе надо ее ограничивать высотой. И ты уже можешь смело пользоваться вложенным блоком. Так что вот так. http://jsfiddle.net/A3MyY/5/

Хоть это и ближе к частному случаю, но в то же время и более частому.

Бред. Никто никогда почти не ограничивает высоту таблицы, а даже и если так (что редко), то в любом случае высота ячеек не фиксируется, чтобы ты не делал. Таков закон. Если текста будет чуть больше, чем строка или какой нибудь шрифт станет больше, то всё, пиши пропало. Считаю это очень плохим и некачественным решением.

Link to comment
Share on other sites

  • 0

Да не видится мне пока универсального решения. Твое решение хорошо тем, что не надо ограничивать высоту и кода меньше. Но если надо делать отступы между ячейками, то все, оно уже не годится. У меня работает с отступами, но нужны размеры хотя бы height:100% для самой таблицы, а блоку, в который ты вкладываешь ее, можно уже задавать нужные.

Да и вообще, что стоит задать ячейке таблицы высоту в 1 пиксель. Контент ее растянет и будет все ок.

Link to comment
Share on other sites

  • 0

Softlink,

У меня работает с отступами, но нужны размеры хотя бы height:100% для самой таблицы, а блоку, в который ты вкладываешь ее, можно уже задавать нужные.

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

http://jsfiddle.net/A3MyY/7/

Твое решение хорошо тем, что не надо ограничивать высоту и кода меньше. Но если надо делать отступы между ячейками, то все, оно уже не годится.

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

У меня в ФФ жесть. http://jsfiddle.net/A3MyY/6/

Link to comment
Share on other sites

  • 0

У меня в ФФ жесть. http://jsfiddle.net/A3MyY/6/

Точно, лажа получается. Вот вредный фф какой. Все время че-нибудь да запоганит с таблицами. Точнее, он вроде бы как правильно работает, но не на руку совсем. Ладно, варианты выложили, плюсы с минусами расписали, пусть ТС разбирается.

Link to comment
Share on other sites

  • 0

Да нет, это не фф вредный, а кое-кто увлекается только CSS3 ;)

Если я и перестану увлекаться CSS3, то ФФ в мгновенье ока не начнет понимать position в таблице и вот такие фокусы с высотой, которые откровенно достают, ок? ;)

Link to comment
Share on other sites

  • 0

Да нет, это не фф вредный, а кое-кто увлекается только CSS3 ;)

Если я и перестану увлекаться CSS3, то ФФ в мгновенье ока не начнет понимать position в таблице и вот такие фокусы с высотой, которые откровенно достают, ок? ;)

Да, не спорю, но зато ты уже сразу будешь видеть, что ты делаешь и насколько это непрактично, а не спорить до последнего ;)

Link to comment
Share on other sites

  • 0

Да, не спорю, но зато ты уже сразу будешь видеть, что ты делаешь и насколько это непрактично, а не спорить до последнего ;)

Да кто ж спорил-то?))) Ты сделал одно решение, я другое. Одно работает с такими условиями, другое с другими. Делов-то. Просто я пытался его унифицировать, но не вышло, что ж поделаешь. С таким приколом с высотой в ФФ, честно сказать, столкнулся первый раз, буду знать теперь. И хоть тыщу лет бы я еще не знал этот css3, но при этом не пользовался бы табличной версткой, выдвинул бы точно такое же решение))

Link to comment
Share on other sites

  • 0

Softlink,

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

Советую тебе почаще прислушиваться, а то ты вот например говоришь:

Одно работает с такими условиями, другое с другими.

Другое вообще НЕ имеет право на существование, мой совет, просто выкинь его из головы и никогда, никогда так не делай.

Link to comment
Share on other sites

  • 0

Другое вообще НЕ имеет право на существование.

НЕ согласен :lol: Ладно, надо завязывать. Почисти лучше тему от флуда.

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

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