Стилизация (фиксирование ширины) столбцов в определенной таблице без влияния на другие таблицы - PullRequest
Новая
       20

Стилизация (фиксирование ширины) столбцов в определенной таблице без влияния на другие таблицы

2 голосов
/ 03 ноября 2010

Я хочу исправить ширину (в пикселях) трех столбцов в таблице, не затрагивая другие таблицы стилем.Я могу добиться желаемого эффекта, стилизуя столбцы, см. Код ниже.Однако стиль в столбцах ниже не связан с конкретной таблицей.Я хочу использовать стили, чтобы мне не нужно было использовать строку <col ...> каждый раз, когда я использую указанную таблицу.т.е. что я хочу сделать, это связать фиксирование ширины столбца с конкретной таблицей.Код ниже не связывает col.tablerightcol1 с table.tableright, что я и хочу сделать.

<head>
<title> xxxxx </title>
<style type="text/css">

table.tableleft { 
          width: 140px ;
        align centre ; 
        }


table.tableright { 
          background-color: #E8E8E8 ; 
        width: 840px ; 
        height: 220px ;
         }

col.tablerightcol1 { 
          align: right ;
          width:220px ;
         }
col.tablerightcol2 { 
          align: center ;
          width:400px ;
         }
col.tablerightcol3 { 
          align: center ;
          width:220px ;
         }

</style>
</head>

<html>
<body >
<table border=2 class = "tableright" >
  <col class="tablerightcol1" />
  <col class="tablerightcol2" />
  <col class="tablerightcol3" />
    <tr>
        <td >
....

Ответы [ 2 ]

1 голос
/ 03 ноября 2010

Вы можете использовать селектор псевдокласса CSS3 nth-child, но он не поддерживается ни одной из версий IE до 8.0 (см. http://reference.sitepoint.com/css/pseudoclass-nthchild для получения подробной информации). 

table.tableright col:nth-child(1) { align: right; width:220px; }
0 голосов
/ 03 ноября 2010

Вы можете сделать так, чтобы селектор учел это, например: 

table.tableright col.col1 { align: right; width:220px; }
table.tableright col.col2 { align: center; width:400px; }
table.tableright col.col3 { align: center; width:220px; }

и соответствующая разметка: 

<table border="2" class="tableright" >
  <col class="col1" />
  <col class="col2" />
  <col class="col3" />

Таким образом, ваши стили воздействуют на элементы <col> с этим классом, только если они находятся внутри элемента <table class="tableright">.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...