• ДОБРО ПОЖАЛОВАТЬ В КЛУБ ПО WORDPRESS

    Мы активно растущий клуб по WordPress и нам нужна помощь каждого человека, в том числе и Ваша! Не стесняйтесь и станьте частью большого сообщества.
    Мы делимся новостями, отытом и полезными советами! Пройдите простую регистрацию, чтобы пользоваться всеми возможностями нашего клуба.

    Присоединяйтесь к нам, вам обязательно понравится - Присоединится

Решено Не отображаются таблицы

Wsk

ПРОВЕРЕННЫЙ

Wsk

ПРОВЕРЕННЫЙ
Сообщения
139
При добавлении таблицы, границы таблицы, рамка таблицы это просто не отображается.
Тема: Pytheas

Каким образом можно сделать все границы таблицы? Заранее спасибо!
 

Вложения

Попай

АДМИНИСТРАТОР

Попай

АДМИНИСТРАТОР
Сообщения
3,247
Я обычно через FireBug настраиваю нужные стили. Находите нужный элемент и добавляете ему например свойства border:1px solid #000;
 
Последнее редактирование:

Wsk

ПРОВЕРЕННЫЙ

Wsk

ПРОВЕРЕННЫЙ
Сообщения
139
Пробовал данное свойство не помогло, границы по прежнему не работают.
 

Wsk

ПРОВЕРЕННЫЙ

Wsk

ПРОВЕРЕННЫЙ
Сообщения
139
Ну название шаблона я указал, сам сайт не ставил еще на хост, привел файл css, можешь сам шаблон установить себе и посмотреть ?
 

Попай

АДМИНИСТРАТОР

Попай

АДМИНИСТРАТОР
Сообщения
3,247
Хотел глянуть, установить, но его нет на сайте wordpress. А с других источников не качал шаблон.
 
Как у вас не получается, это обычные CSS свойства. Находите в стиле table вместе свойствами и меняете на
[CSS]table, tr, td { border-collapse: collapse; border-spacing: 0; border:1px solid #000; }[/CSS]
 
  • Нравится
Реакции: Wsk

Wsk

ПРОВЕРЕННЫЙ

Wsk

ПРОВЕРЕННЫЙ
Сообщения
139
Во спасибо большое!
А я не много по другому ставил свойство:
[CSS]table, tr, td { border:1px solid #000 }[/CSS]
 

Kapitan_Keks

НОВИЧОК

Kapitan_Keks

НОВИЧОК
Сообщения
4
столкнулся с такой же проблемой, ранее никогда не делал, сейчас же понадобилась таблица. Вставил код таблицы в админке, во вкладке визуально таблица видна, но в браузере ее нет. В файле Таблица стилей (style.css) нет поля Table вообще, кто подскажет где надо прописывать скажем код такого типа
Код:
table, tr, td { border-collapse: collapse; border-spacing: 0; border:1px solid #000; }
 

Kapitan_Keks

НОВИЧОК

Kapitan_Keks

НОВИЧОК
Сообщения
4
таблица отображается, все нормально, но почему то календарь становится тоже в виде таблицы, а мне бы это не хотелось
 

Wildcdu

ЭКСПЕРТ

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
таблица отображается, все нормально, но почему то календарь становится тоже в виде таблицы, а мне бы это не хотелось
если я правильно понял почти получилось но календарь стал как таблица. Значит на мой взгляд проблема в том что где то есть стиль заданный Вы его меняете принудительно и получаете календарь в виде таблицы решения на мой взгляд два: первое найти и переделать и вариант два изменить Вашу строчку например на
table1, tr, td { border-collapse: collapse; border-spacing: 0; border:1px solid #000; }
те добавить вариант1 для таблицы
 

Kapitan_Keks

НОВИЧОК

Kapitan_Keks

НОВИЧОК
Сообщения
4
вот html код
Код:
<table class="my-table" border="2" width="500px" cellspacing="2" cellpadding="2" align="center" bgcolor="#ffffff">
<tbody>
<tr align="center" valign="top">
<td></td>
<td></td>
</tr>
<tr align="center" valign="top">
<td></td>
<td></td>
</tr>
<tr align="center" valign="top">
<td></td>
<td></td>
</tr>
<tr align="center" valign="top">
<td></td>
<td></td>
</tr>
</tbody>
</table>
вот СSS код, встваляю в самый низ
Код:
.my-table tr, td { border-collapse: collapse; border-spacing: 0; border:1px solid #000; }
на выходе Для просмотра ссылки Войди или Зарегистрируйся

если же вставлять
Код:
.my-table{ border-collapse: collapse; border-spacing: 0; border:1px solid #000; }
т.е. без td и tr на выходе норм, колонок нет, просто прямоугольник, может кто подскажет как отдельно прописать?
 
Последнее редактирование:

Wildcdu

ЭКСПЕРТ

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
class="my-table" и .my-class как связанны? Вы ставите для всех tr td определенный параметр и результат на выходе,

вы объявите класс для таблицы.
как вариант я чего то не понимаю

как я уже писал, сделайте класс для таблицы и вставьте как my-table
 
Последнее редактирование:

Wildcdu

ЭКСПЕРТ

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
Границы таблицы задаются свойством border:
Код:
table {
border-collapse: collapse; /*убираем пустые промежутки между ячейками*/
border: 1px solid grey; /*устанавливаем для таблицы внешнюю границу серого цвета толщиной 1px*/
}
кусок для CSS:
Код:
.simple-little-table {
    font-family:Arial, Helvetica, sans-serif;
    color:#666;
    font-size:12px;
    text-shadow: 1px 1px 0px #fff;
    background:#eaebec;
    margin:20px;
    border:#ccc 1px solid;
    border-collapse:separate;
 
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
 
    -moz-box-shadow: 0 1px 2px #d1d1d1;
    -webkit-box-shadow: 0 1px 2px #d1d1d1;
    box-shadow: 0 1px 2px #d1d1d1;
}
 
.simple-little-table th {
    font-weight:bold;
    padding:21px 25px 22px 25px;
    border-top:1px solid #fafafa;
    border-bottom:1px solid #e0e0e0;
 
    background: #ededed;
    background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
    background: -moz-linear-gradient(top,  #ededed,  #ebebeb);
}
.simple-little-table th:first-child{
    text-align: left;
    padding-left:20px;
}
.simple-little-table tr:first-child th:first-child{
    -moz-border-radius-topleft:3px;
    -webkit-border-top-left-radius:3px;
    border-top-left-radius:3px;
}
.simple-little-table tr:first-child th:last-child{
    -moz-border-radius-topright:3px;
    -webkit-border-top-right-radius:3px;
    border-top-right-radius:3px;
}
.simple-little-table tr{
    text-align: center;
    padding-left:20px;
}
.simple-little-table tr td:first-child{
    text-align: left;
    padding-left:20px;
    border-left: 0;
}
.simple-little-table tr td {
    padding:18px;
    border-top: 1px solid #ffffff;
    border-bottom:1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
 
    background: #fafafa;
    background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
    background: -moz-linear-gradient(top,  #fbfbfb,  #fafafa);
}
.simple-little-table tr:nth-child(even) td{
    background: #f6f6f6;
    background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
    background: -moz-linear-gradient(top,  #f8f8f8,  #f6f6f6);
}
.simple-little-table tr:last-child td{
    border-bottom:0;
}
.simple-little-table tr:last-child td:first-child{
    -moz-border-radius-bottomleft:3px;
    -webkit-border-bottom-left-radius:3px;
    border-bottom-left-radius:3px;
}
.simple-little-table tr:last-child td:last-child{
    -moz-border-radius-bottomright:3px;
    -webkit-border-bottom-right-radius:3px;
    border-bottom-right-radius:3px;
}
.simple-little-table tr:hover td{
    background: #f2f2f2;
    background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
    background: -moz-linear-gradient(top,  #f2f2f2,  #f0f0f0);
}
 
.simple-little-table a:link {
    color: #666;
    font-weight: bold;
    text-decoration:none;
}
.simple-little-table a:visited {
    color: #999999;
    font-weight:bold;
    text-decoration:none;
}
.simple-little-table a:active,
.simple-little-table a:hover {
    color: #bd5a35;
    text-decoration:underline;
}
Пример таблицы:
HTML:
<table class="simple-little-table" cellspacing='0'>
    <tr>
        <th>фигня1 </th>
        <th>фигня2</th>
        <th>Фигня3</th>
    </tr><!-- Table Header -->
 
    <tr>
        <td>ф1</td>
        <td>ф11</td>
        <td>ф22</td>
    </tr><!-- Table Row -->
 
    <tr>
        <td>ф33</td>
        <td>ф444</td>
        <td>ф44</td>
    </tr><!-- Darker Table Row -->
 
    <tr>
        <td>ф555</td>
        <td>ф55</td>
                <td>ф5</td>
    </tr>
 
    <tr>
        <td>ф66</td>
        <td>ф6</td>
        <td>ф</td>
    </tr>
 
    <tr>
        <td>ф7</td>
        <td>ф77</td>
        <td>ф77</td>
    </tr>
 
    <tr>
        <td>ф8</td>
        <td>ф88</td>
        <td>ф888</td>
    </tr>
 
    <tr>
        <td><a href="#">ссылка</a></td>
        <td>ф9</td>
        <td><a href="#">ссыль2</a></td>
    </tr>
</table>
 
Последнее редактирование:

Wildcdu

ЭКСПЕРТ

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
Еще один вариант стиля крутого с градиентом (где то брал сохранил у себя простите авторы если вдруг)
Код:
.features-table
{
  width: 100%;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  border: 0;
  text-shadow: 0 1px 0 #fff;
  color: #2a2a2a;
  background: #fafafa;
  background-image: -moz-linear-gradient(top, #fff, #eaeaea, #fff); /* Firefox 3.6 */
  background-image: -webkit-gradient(linear,center bottom,center top,from(#fff),color-stop(0.5, #eaeaea),to(#fff));
  margin-top:20px;
  margin-bottom:20px;
}
 
.features-table td
{
  height: 50px;
  padding: 0 20px;
  border-bottom: 1px solid #cdcdcd;
  box-shadow: 0 1px 0 white;
  -moz-box-shadow: 0 1px 0 white;
  -webkit-box-shadow: 0 1px 0 white;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}
 
.features-table tbody td
{
  text-align: center;
  width: 150px;
}
 
 
.features-table td.grey
{
  background: #efefef;
  background: rgba(144,144,144,0.15);
  border-right: 1px solid white;
}
 
.features-table td.green
{
  background: #e7f3d4;
  background: rgba(184,243,85,0.3);
}
 
.features-table td:nowrap
{
  white-space: nowrap;
}
 
.features-table thead td
{
  font-size: 120%;
  font-weight: bold;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-topleft: 10px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border-top: 1px solid #eaeaea;
}
 
.features-table tfoot td
{
  font-size: 120%;
  font-weight: bold;
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom: 1px solid #dadada;
}
HTML:
<table class="features-table">
<thead>
    <tr>
        <td>111</td>
        <td class="grey">222</td>
        <td class="grey" nowrap>333</td>
        <td class="green">444</td>
    </tr>
</thead>
 
<tfoot>
    <tr>
        <td nowrap>555</td>
        <td class="grey">666</td>
        <td class="grey">777</td>
        <td class="green">888</td>
    </tr>
</tfoot>
 
<tbody>
    <tr>
        <td nowrap>1</td>
        <td class="grey">3</td>
        <td class="grey">6</td>
        <td class="green">16</td>
    </tr>
 
    <tr>
        <td nowrap>12121</td>
        <td class="grey"><img alt="check" src="путь до картинки" height="16" width="16"</td>
        <td class="grey"><img alt="check" src="путь до картинки" height="16" width="16"></td>
        <td class="green"><img alt="check" src="путь до картинки" height="16" width="16"></td>
    </tr>
 
    <tr>
        <td nowrap>32432</td>
        <td class="grey">5432543</td>
        <td class="grey">543543</td>
        <td class="green">23432432</td>
    </tr>
</tbody>
</table>
 

Kapitan_Keks

НОВИЧОК

Kapitan_Keks

НОВИЧОК
Сообщения
4
ура, спасибо тебе добрый человек, ща подредактирую и все норм будет, а так полезное выложил для многих
 

Wildcdu

ЭКСПЕРТ

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
т.е. без td и tr на выходе норм, колонок нет, просто прямоугольник, может кто подскажет как отдельно прописать?
в вашем варианте логичнее так:
Код:
table, th, td
{
border-style:solid;
border-width:1px;
border-collapse:collapse;
padding:2px;
}
th
{
height:28px;
background-color:#f892dc;
color:white;
border-color:black;
}
.ts1
{
background-color:#ffeffb;
}
 

Wildcdu

ЭКСПЕРТ

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
самое простое:
Код:
table, th, td
{
border-style:solid;
border-color:green;
border-width:1px;
}
Ширина и Высота таблицы так
Код:
.tab1
{
width:100%;
}
.tab2
{
width:70%;
}
.tab3
{
width:300px;
}
ширина устанавливается в пикселях или %

и простая совсем:
Код:
table, th, td
{
border-style:solid;
border-color:green;
border-width:1px;
border-collapse:collapse;
}
 

Попай

АДМИНИСТРАТОР

Попай

АДМИНИСТРАТОР
Сообщения
3,247

Wildcdu

ЭКСПЕРТ

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
в догонку анимашка для ссылок ищем меняем в CSS
Код:
a {
    line-height: 1;
    display: inline-block;
    color:#0085ba;
    text-decoration:none;
    cursor: pointer;
}
a:after {
    display: block;
    content: "";
    height: 2px;
    width: 0%;
    background-color: #0085ba;
    transition: width .3s ease-in-out;
}
a:hover:after,
a:focus:after {
    width: 100%;
}
расписывать не буду (думаю не сложно) но прикольно (цвет и другие параметры меняйте под свои нужды и ок)
 
Сверху