Стиль ячеек столбца таблицы

Webr · April 17, 2009

Существует ли в CSS возможность задать стиль ячеек определённой колонки таблицы так, чтобы не указывать class для каждой ячейки?

Justnewone · April 17, 2009

Существует ли в CSS возможность задать стиль ячеек определённой колонки таблицы так, чтобы не указывать class для каждой ячейки?

нет

Nekromancer · April 17, 2009

а через <col> не проканает?

или ваще table-layout: fixed;

и только для первой ячейки выставлять стиль..

Justnewone · April 17, 2009

а через <col> не проканает?
или ваще table-layout: fixed;
и только для первой ячейки выставлять стиль..

Покажите пример.

Nekromancer · April 17, 2009

я не говорю что сработает, это как вариант, сейчас попробую, если сработает то хорошо

Nekromancer · April 17, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Таблица</title>
<style type="text/css">
* {padding: 0; margin: 0; border: none;}
table, td, th {border-collapse: collapse; border: 2px solid #583914; padding: 0; border-spacing:0; text-align: center; vertical-align: middle;}
table {width: 99%; margin: 20px auto 0 auto;  font-weight: bold; table-layout: fixed;}
td, th { width:20%;}
.col1 {background: grey;}
.col2 {background: red;}
.col3 {background: blue;}
</style>
</head>
<body>

<table>
<col width="20%" valign="middle" style="background: grey;" />
<col width="20%" valign="middle" style="background: blue;" />
<col width="20%" valign="middle" class="col1" />
<col width="20%" valign="middle" class="col2" />
<col width="20%" valign="middle" class="col3" />
<tr>
<td>Уровень</td><td>Пункты / Эффект</td><td>Радиус</td><td>Мана</td><td>Маг. Способности</td>
</tr>
<tr>
<td>1.</td><td>1 / 60..300</td><td>N/A</td><td>15</td><td>5</td>
</tr>
<tr>
<td>2.</td><td>2 / 60..300</td><td>N/A</td><td>15</td><td>6</td>
</tr>
<tr>
<td>3.</td><td>3 / 60..300</td><td>N/A</td><td>15</td><td>7</td>
</tr>
<tr>
<td>4.</td><td>4 / 60..300</td><td>N/A</td><td>15</td><td>8</td>
</tr>
<tr>
<td>5.</td><td>5 / 60..300</td><td>N/A</td><td>15</td><td>9</td>
</tr>
</table>
</body>
</html>

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

http://htmlbook.ru/html/col.html

Edited April 17, 2009 by Nekromancer

Justnewone · April 17, 2009

Круто. Был не прав. Спасибо за пример. COL раньше никогда не использовал, надо будет приглядеца.

Nekromancer · April 17, 2009

s0rr0w · April 17, 2009

Круто. Был не прав. Спасибо за пример. COL раньше никогда не использовал, надо будет приглядеца.

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

Webr · April 17, 2009

<table>
<col width="20%" valign="middle" style="background: grey;" />
<col width="20%" valign="middle" style="background: blue;" />
<col width="20%" valign="middle" class="col1" />
<col width="20%" valign="middle" class="col2" />
<col width="20%" valign="middle" class="col3" />

Тестирование данной разметки в Opera 9.64 и MSIE 8 показало, что выставляемые в колонке значения (например, ширина) срабатывают только если они не определены в общем для всех ячеек таблицы стиле, в секции <style>. Иначе же параметры секции style перекрывают все попытки что-либо изменить.

Nekromancer · April 17, 2009

ну так выставляй либо в стлях либо в теге..

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

<col style="background: grey;" />
<col style="background: blue;" />
<col class="col1" />
<col class="col2" />
<col class="col3" />

ну и настраивай в стилях как хочешь..

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

что поделать...

Sign In

Стиль ячеек столбца таблицы

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information