Сообщений в теме: 17

[Jp-autoparts]

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

[Сake]

Вы имеете в виду визуальную часть таблицы? Чтобы при наведении на стоку таблицы - та непосредственно подсвечивалась? Если да, то это реализуется простым правилом css вида

.content_body tr:hover {
   background-color: #ccc;
}

[Jp-autoparts]

И еще момент, как сделать каждую строку ссылкой?

[Сake]

Это можно реализовать только если в ячейку поместить ссылку и задать ей максимальный размер. Например

<table>
  <tr>
	<td>
   <a href="#">текст ссылки</a>
</td>
  </tr>
  <tr>
	<td>
   <a href="#">текст ссылки 2</a>
</td>
  </tr>
</table>

а стили будут такие

.content_body tr:hover {
   background-color: #ccc;
}
.content_body tr a {
   display: block;
   width: 100%;
   height: 100%;
}

[Jp-autoparts]

теперь у меня подсвечивается все что есть на странице, смотрится как-то не очень

[Taisia]

приведите пожалуйста пример таблицы (ссылку на страницу где вы это реализовали)

[Jp-autoparts]

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

[Сake]

Выше был дан лишь только пример. Если вам необходимо какую-то конкретно таблицу привести к подобному виду, то сообщите нам подробнее о какой таблице идет речь. Правилу необходим точный селектор в виде класса таблицы или идентификатора.

[Jp-autoparts]

вот ссылка на эту табличку: http://jp-autoparts....-Touring-Sports, такие таблицы у меня будут во всех категориях.
второй момент: необходимо установить шрифт как в верхнем блоке меню и сделать скругление таблицы по краям

[Сake]

Шрифт вы хотите задать для шапки таблицы? Вы можете использовать следующий каркас таблицы

<table class="utable">
  <thead>
	<tr>
	<td></td>
	<td>Модификация</td>
	<td>Модель двиг.</td>
	<td>Объем двиг. л</td>
	<td>Мощность, л.с.</td>
</tr>
  </thead>
  <tbody>
	<tr>
	<td><a href="#">></a></td>
	<td><a href="#">1.3</a></td>
	<td><a href="#">1NR-FE</a></td>
	<td><a href="#">1.3</a></td>
	<td><a href="#">99</a></td>
</tr>
<tr>
	<td><a href="#">></a></td>
	<td><a href="#">1.6</a></td>
	<td><a href="#">1ZR-FAE</a></td>
	<td><a href="#">1.6</a></td>
	<td><a href="#">132</a></td>
</tr>
  </tbody>
</table>

стили для данной таблицы будут следующие

.utable td:first-child {
	background: #FFFFFF !important;
	border: medium none;
}
.utable thead td:last-child {
	border-radius: 0 6px 0 0;
}
.utable thead td {
	background: #000000;
	border: medium none;
	color: #FFFFFF;
	padding: 0 15px;
	text-transform: uppercase;
}
.utable td {
	border: 1px solid #CCCCCC;
background: #E6E6FA;
font: bold 12px/40px Helvetica,Tahoma,Arial,sans-serif;
	vertical-align: middle;
}
.utable thead td:nth-child(2) {
	border-radius: 6px 0 0;
}
.utable tbody tr:nth-child(2n+1) td {
	background: #D4D3FF;
}
.utable td:first-child a {
	color: #40E0D0;
	font-size: 16px;
}

стили необходимо добавить в файл стилей main.css

[Jp-autoparts]

получилось очень даже симпатично, но еще нужен бегунок в эту табличку

[Taisia]

Добавьте в конец файла main.css код

.utable tbody tr td:hover {
	background: #CCCCCC !important;
}

[Jp-autoparts]

теперь он двигается только по ячейкам, как сделать по строчкам? и немного уменьшить высоту ячеек

[Сake]

Замените

.utable tbody tr td:hover {
		background: #CCCCCC !important;
}

на

.utable tbody tr:hover td {
		background: #CCCCCC !important;
}

Высоту ячеек можно изменить в классе

.utable td {
		border: 1px solid #CCCCCC;
		background: #E6E6FA;
		font: bold 12px/40px Helvetica,Tahoma,Arial,sans-serif;
		vertical-align: middle;
}

путем изменения значения 40px у свойства font

[Jp-autoparts]

и самый-самый последний вопрос: сменить цвет границ

[Сake]

Цвет границ задается в классе .utable td путем изменения цвета #CCCCCC у свойства

border: 1px solid #CCCCCC;

[Jp-autoparts]

всем привет! это снова я!   надеюсь, что самый последний вопрос - как сделать сслылки в данной таблице НЕ ЖИРНЫМИ и ЧЕРНЫМИ?

[Koderhan]

В конец файла "main.css".
Добавить код:

.utable tbody tr a:hover {
	color: gray;/* цвет при наведение */
}

В файле "main.css".
Найти код:

.utable tbody tr a {
   display: block;
   width: 100%;
   height: 100%;
}

Заменить:

.utable tbody tr a {
   display: block;
   width: 100%;
   height: 100%;
   color: black;
}