2008-10-01 15 views
18

Próbuję sformatować kolumnę w postaci <table/> przy użyciu elementu <col/>. Mogę ustawić background-color, width itd., Ale nie mogę ustawić wartości font-weight. Dlaczego to nie działa?Formatowanie kolumn tabeli

<table> 
    <col style="font-weight:bold; background-color:#CCC;"> 
    <col> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>4</td> 
    </tr> 
</table> 

Odpowiedz

35

O ile wiem, można tylko sformatować po użyciu CSS na elemencie <col>:

  • background-color
  • granica
  • szerokość
  • widoczność

Ta page ma więcej informacji.

Zioło ma rację - lepiej jest stylować bezpośrednio na <td>. Co mogę zrobić, to:

<style type="text/css"> 
    #mytable tr > td:first-child { color: red;} /* first column */ 
    #mytable tr > td:first-child + td { color: green;} /* second column */ 
    #mytable tr > td:first-child + td + td { color: blue;} /* third column */ 
    </style> 
    </head> 
    <body> 
    <table id="mytable"> 
    <tr> 
     <td>text 1</td> 
     <td>text 2</td> 
     <td>text 3</td> 
    </tr> 
    <tr> 
     <td>text 4</td> 
     <td>text 5</td> 
     <td>text 6</td> 
    </tr> 
    </table> 

To jednak nie zadziała w IE.

+0

Po prostu wygląda na to, że trochę nadwyrężasz problem. Dlaczego nie utworzyć klasy "czerwonej", "zielonej" i "niebieskiej"? To działałoby wszędzie i byłoby znacznie bardziej intuicyjne niż zaawansowane selektory CSS. –

+3

Tak, z prawej strony selektory CSS są brzydkie :) Ale ja osobiście wolałbym brzydkie selektory CSS niż dodawanie atrybutu klasy do każdej komórki tabeli, szczególnie jeśli masz tabelę statyczną (tzn. Bez pokolenia po stronie serwera), która ma wiele komórek. – Bill

+2

Niestety, będzie to przerwać semantycznie dla colspans. To jest cała kwestia elementów "col" i "colgroup", dlaczego do cholery nie możesz ustawić koloru za ich pomocą ?! –

-1

col tag muszą być wewnątrz colgroup tagu, może to być coś zrobić z tym problemem.

+1

Jak powiedział Andy, ale chcesz się upewnić, że jest on dołączony do oryginału (i nie może jeszcze komentować). col NIE musi być w colgroup. W3C Reference Mikezx6r

0

Czy próbowałeś zastosować styl za pomocą klasy CSS?

Poniższa wydaje się działać:

<style type="text/css"> 
    .xx { 
    background: yellow; 
    color: red; 
    font-weight: bold; 
    padding: 0 30px; 
    text-align: right; 
} 

<table border="1"> 
    <col width="150" /> 
    <col width="50" class="xx" /> 
    <col width="80" /> 
<thead> 
    <tr> 
    <th>1</th> 
    <th>2</th> 
    <th>3</th> 
    <th>4</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    </tr> 
</tbody> 
</table> 

Reference for the col element

+0

Ten sam wynik z klasą. – Andy

+0

Należy pamiętać, że tryb IE (tryb Quirks Mode) umożliwia działanie kolorów. Zobacz http://www.quirksmode.org/css/columns.html. Ale to niestety nie jest rozwiązanie. –

6

Najprościej jest, aby zastosować stylizacji bezpośrednio <td> tagów. Nigdy nie użyłem tagu <col>, ale większość przeglądarek umożliwia stosowanie formatowania na poziomie <table> i <td>/<th>, ale nie na poziomie pośrednim. Na przykład, jeśli masz

<table> 
    <tr class="Highlight"> 
     <td>One</td> 
     <td>Two</td> 
    </tr> 
    <tr> 
     <td>A</td> 
     <td>B</td> 
    </tr> 
</table> 

wówczas CSS nie będzie działać

tr.Highlight { background:yellow } 

ale to

tr.Highlight td { background:yellow } 

też: Zakładam, że Twój kod powyżej jest tylko do celów demonstracyjnych i ciebie "Nie zamierzam stosować stylów inline.

+0

Tak, kod służy wyłącznie do celów demonstracyjnych. – Andy

+1

Ta metoda działa dobrze. Po prostu starałem się uniknąć umieszczania atrybutu class dla każdej pierwszej kolumny td. – Andy

1

Przeczytałem to, próbując stworzyć styl tabeli, tak aby pierwsza kolumna była pogrubionym tekstem, a pozostałe cztery kolumny byłyby zwykłym tekstem. Używanie znacznika col wydawało się być sposobem na to, ale podczas gdy mogłem ustawić szerokość kolumn z atrybutem szerokości, waga czcionki: pogrubiona nie zadziałałaby Dzięki za wskazanie mnie w kierunku rozwiązania. Przez stylizacji wszystkich elementów td td {font-weight: bold;} a następnie za pomocą wybieraka sąsiadujący rodzeństwo aby wybrać kolumny 2-5 i projektować je z powrotem do normalnego td + td {font-weight: normal;} Voila, alls dobre :)

2

Może właśnie to potrzebne:

tr td:first-child label { 
    font-weight: bold; 
} 
Powiązane problemy