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>
O ile wiem, można tylko sformatować po użyciu CSS na elemencie <col>:
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.
col tag muszą być wewnątrz colgroup tagu, może to być coś zrobić z tym problemem.
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
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>
Ten sam wynik z klasą. – Andy
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. –
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.
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 :)
Może właśnie to potrzebne:
tr td:first-child label {
font-weight: bold;
}
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. –
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
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ą ?! –