Как убрать границы ячеек таблицы в шаблоне?

  • 15 Ответов
  • 779 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

Deonisiy

  • Захожу иногда
  • **
  • 22
  • 0
Здравствуйте, уважаемые коллеги!   ^-^
Прошу помощи и поддержки.

Я уже в ступоре от этой проблемы)
А дело вот в чём(см. скрин): http://prntscr.com/9haa35
Ни как не удаётся убрать полосы между ячейками, хоть тресни   >:(
Полосы по периметру душевно исчезают когда устанавливаю параметр frame="vodi"
А полосы между ячейками ни как.

Помогите пожалуйста разобраться в этой проблеме)

Код таблицы:

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table style="height: 140px; width: 100%;" frame="vodi">
   <tbody>
      <tr>
         <td>&nbsp;<img src="images/318dcd2a18fd2ef0a6c44aa0330b7fbc_full.jpg" alt="" width="200" height="142" /></td>
         <td>&nbsp;<img src="images/318dcd2a18fd2ef0a6c44aa0330b7fbc_full.jpg" alt="" width="200" height="142" /></td>
         <td>&nbsp;<img src="images/318dcd2a18fd2ef0a6c44aa0330b7fbc_full.jpg" alt="" width="200" height="142" /></td>
      </tr>
   </tbody>
</table>

*

Shustry

  • Moderator
  • *****
  • 6426
  • 733
  • Рисую дизайны
<table class="mytable"

Код: css
.mytable, .mytable * {
margin:0 !important;
padding:0 !important;
border:none !important;
outline:none !important;
font-size:0 !important;
line-height:0 !important;
}
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

Deonisiy

  • Захожу иногда
  • **
  • 22
  • 0
<table class="mytable"

Код: css
.mytable, .mytable * {
margin:0 !important;
padding:0 !important;
border:none !important;
outline:none !important;
font-size:0 !important;
line-height:0 !important;
}

Простите, я ещё новичок, по этому прошу Вас уточнить, где необходимо разместить этот код?
Вернее в какой части кода таблицы, которую я выложил в теме?
Или Ваш код необходимо разместить где то в ином месте?)
Жду Ваш ответ, спасибо )

*

beliyadm

  • Профи
  • ********
  • 8359
  • 1527
  • Севастополь == Россия
1 - сделать так, вместо вашего безобразия "height: 140px; width: 100%;" frame="vodi" ))
Код: html4strict
<table class="mytable">
2 - в файле стилей CSS вашего шаблона добавить указанный код (можно в конце)
Код: css
.mytable, .mytable * {
margin:0 !important;
padding:0 !important;
border:none !important;
outline:none !important;
font-size:0 !important;
line-height:0 !important;
}
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb

*

Deonisiy

  • Захожу иногда
  • **
  • 22
  • 0
По пункту 2) я всё понял
А можно немного по подробнее по пункту 1)
<table class="mytable">

Этот код полностью, какой он есть, необходимо разместить в какой части кода HTML, который я указал в теме?))
Или он тоже размещается в файле шаблона как и пункт №2?)

Прошу извинить, понимаю что туплю жутко, но как Вы поняли я ещё только учусь))
Спасибо за Ваше терпение)

*

beliyadm

  • Профи
  • ********
  • 8359
  • 1527
  • Севастополь == Россия
1 код надо размещать там же, где вы пишите это
Код: html4strict
<table style="height: 140px; width: 100%;" frame="vodi">
вместо этой строки писать
Код: html4strict
<table class="mytable">

краткая суть - для таблицы задается класс стилей CSS (тавтология, но что поделать), который определяет внешний вид таблицы.  В дальнейшем для других таблиц достаточно прописать этот класс и стили применятся (это все описано в предисловии к любому учебнику CSS, что такое классы и зачем они нужны)
Так же можно задавать стили и для элементов TH TR TD
К примеру ссылки раз два
в Google по запросу вроде "css beauty table" еще много разных примеров и онлайн генераторов стилей
« Последнее редактирование: 22.12.2015, 22:41:58 от beliyadm »
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb

*

Deonisiy

  • Захожу иногда
  • **
  • 22
  • 0
Скажите пожалуйста, в каком из этих файлов необходимо разместить данный код?))
custom.css
editor.css
print.css
template.css
template.ie7.css
template.responsive.css

Что то их много для одного шаблона, я в них заблудился)))

*

Deonisiy

  • Захожу иногда
  • **
  • 22
  • 0
1 код надо размещать там же, где вы пишите это
Код: html4strict
<table style="height: 140px; width: 100%;" frame="vodi">
вместо этой строки писать
Код: html4strict
<table class="mytable">

краткая суть - для таблицы задается класс стилей CSS (тавтология, но что поделать), который определяет внешний вид таблицы.  В дальнейшем для других таблиц достаточно прописать этот класс и стили применятся (это все описано в предисловии к любому учебнику CSS, что такое классы и зачем они нужны)
Так же можно задавать стили и для элементов TH TR TD
К примеру ссылки раз два
в Google по запросу вроде "css beauty table" еще много разных примеров и онлайн генераторов стилей

Сделал как Вы сказали, но теперь к полосам между ячейками, которые так хотел убрать, теперь ещё стала видна вся рамка по периметру)))
что совсем не хорошо)

*

beliyadm

  • Профи
  • ********
  • 8359
  • 1527
  • Севастополь == Россия
зависит от шаблона, обычно (ну обычно но не факт) основные стили элементов описаны в template.css, судя по этим файлам так и есть, остальные для сугубо кастомных целей (поддержка старого ИЕ, для респонсивл, для стилей принт и редактора и тд)
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb

*

beliyadm

  • Профи
  • ********
  • 8359
  • 1527
  • Севастополь == Россия
дайте ссылку на сайт (если в сети)
если нет - примените полностью готовый код стилей (я правда не очень понимаю что вам нужно убрать)

вот еще ссылки для помощи
http://www.textfixer.com/tutorials/css-tables.php
http://webtricksandtreats.com/table-style-css/
http://www.csstablegenerator.com/ - онлайн генератор стилей
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb

*

Deonisiy

  • Захожу иногда
  • **
  • 22
  • 0
Ой, прошу прощения, это я сам накосячил, и приписал стили в файл, который верхний в списке, потому ничего не получилось.
Поправил, сделал как Вы сказали, внёс стиль в файл template.css и всё прекрасно, все ненужные полосы исчезли)))

Огромное Вам спасибо за терпение и помощь  ^-^ *DRINK*

И прощу подсказать ещё, как между картинками сделать пробелы?), а то они теперь слились как сиамские близнецы))) вот скрин: http://prntscr.com/9hb4mp

*

Shustry

  • Moderator
  • *****
  • 6426
  • 733
  • Рисую дизайны
Код: css
.mytable img {
margin:10px !important;
}
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

beliyadm

  • Профи
  • ********
  • 8359
  • 1527
  • Севастополь == Россия
я правильно понимаю что у вас в таблице в строке 3 ячейки и там по картинке?
Ну допишите такие вот стили, к примеру
Код: css
.mytable td {padding: 5px;}
в итоге будут отступы не от картинок а от границ ячеек
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb

*

Deonisiy

  • Захожу иногда
  • **
  • 22
  • 0
я правильно понимаю что у вас в таблице в строке 3 ячейки и там по картинке?
Ну допишите такие вот стили, к примеру
Код: css
.mytable td {padding: 5px;}
в итоге будут отступы не от картинок а от границ ячеек

Ураааа) всё получилось, ОГРОМНОЕ СПАСИБО ВАМ ЗА ПОМОЩЬ  *DRINK* *DRINK* *DRINK*

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

*

Deonisiy

  • Захожу иногда
  • **
  • 22
  • 0
Код: css
.mytable img {
margin:10px !important;
}

В этом случае все картинки сдвинулись в право)
Буду знать. тоже пригодится))

*

beliyadm

  • Профи
  • ********
  • 8359
  • 1527
  • Севастополь == Россия
И всё таки хочется понять, почему полосы между ячейками отображались, когда по идее этого не должно было быть, раз я всю таблицу в инвиз отправил, значит вся она и должна была стать невидимой))
а вот этого не видя полного кода или примера на живом сайте сказать трудно
Все истины, которые я хочу вам изложить, — бесстыдная ложь.
Записки нетрезвого кодера || -=Joomla FAQ=- || -=все плохо=- || skype: beliyadm_pb