css 套用到html 的table 問題

請問CSS高手們

\

\

html

我現在不想在tr 及td 寫class=""

而是在table寫一個class=""

\

\

然後在css中的table{}裡

去控制table裡的tr 及td 做變化

這是可行的嗎?

\

\

因為我現在想做一個定義好的css table{}效果後

只要html裡有table

這個table的首列、首行都依我table{}中設定的做變化

\

\

當然也希望有更多的變化啦~~

像是首列下的內容,以單、偶做交替的變化

\

\

請問會CSS的高手們能給我指教嗎?

2 Answers

Rating
  • jeff
    Lv 5
    1 decade ago
    Favorite Answer

    其實我想原發問者的意思應該是,不用在每一個

    Td或Tr標籤裡明定class屬性,而是可以在Css裡

    定義一次之後,自動套用在表格裡..

    請見下面範例,我們定義一個Css類別名叫Table01

    ,並定義其子類別Tr,Td的樣式..

    <Style Rel=”StyleSheet” Type=”text/css”>

    .Table01 Tr

    {

    background-Color:#D1D1D1;

    }

    .Table01 Td

    {

    color:Red;

    }

    </Style>

    <Table class=”Table01” Width=”300px” Border=1>

    <Tr>

    <Td>1</Td>

    <Td>2</Td>

    </Tr>

    </Table>

    <Br>

    至於要做到單、偶列變化,目前小弟常用的方式是用

    javascript來做..請見下面範例..

    <Table id=”Table02” name=”Table02” Width=”300px” Border=1>

    <Tr>

    <Td>第1列</Td><Td>第1列</Td>

    </Tr>

    <Tr>

    <Td>第2列</Td><Td>第2列</Td>

    </Tr>

    </Table>

    <Br>

    <Script Language=”Javascript”>

    <!--

    //取回表格物件

    var oTable=document.getElementById(”Table02”)

    //迴遞該表格所有的列

    for(var i=0;i<oTable.rows.length;i++)

    {

    var oRow=oTable.rows[i]

    //判斷單、偶列

    if((oRow.rowIndex%2)==0)

    {

    oRow.style.backgroundColor=”#D1D1D1”

    }

    else

    {

    oRow.style.backgroundColor=”#FF9933”

    }

    }

    -->

    </Script>

    恩恩,就是這樣..

    註:因為知識+會把程式碼的雙引號,大於符號,小於符號予以編碼

    ,所以我在我的範例裡,都用(全形)代替(半形)的符號..請自行更

    換回來,以便正常執行..

    Source(s): 經驗
  • fufu
    Lv 5
    1 decade ago

    CSS無法寫table{}去控制<table>裡的<tr>及<td>做變化,

    這本來就是三個不同屬性的標籤,都要個別寫CSS。

    至於首列下的內容,以單、偶做交替的變化,也只能土法煉鋼。

    Source(s): 本身在m-plus擔任設計類軟體講師
Still have questions? Get your answers by asking now.