table <tr> stylen

Status
Niet open voor verdere reacties.
W

whitetigerck

Gebruiker
Lid geworden
8 aug 2008
Berichten
196
hey

Ik probeer een tabel te stylen met css, dat lukt aardig goed alleen ik wil de bovenste rij anders hebben dus dan denk ik dan maak ik een class voor de eerste rij, maar dan pakt hij dat niet:confused:

Als ik alle <td> style voor de eerste rij dan werkt het wel maar dat vind ik te veel werk, als het ook makkelijker kan:p, dus wat doe ik verkeerd?
Als het mogelijk is zou ik ook graag de laatste kolom een ander uiterlijk willen geven, maar dan wel zo dat de rij effect de kolomwaarde overruled.

Hier is de code in elkaar geplakt:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
table
{text-align: center;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif ;
font-weight: normal;
font-size: 11px;
color: #fff;
width: 280px;
background-color: #666;
border: 0px;
border-collapse: collapse;
border-spacing: 0px;}

table td
{background-color: #CCC;
color: #000;
padding: 4px;
text-align: left;
border: 1px #fff solid;}

table .hed
{background-color: #99FF00;
color: #fff;
padding: 4px;
text-align: left;
border-bottom: 2px #fff solid;
font-size: 12px;
font-weight: bold;} 
</style>
</head>

<body>
<table class="stats" cellspacing="0">
<tr>
<td class="hed" colspan="4">These stats here are good</td>
</tr>
<tr>
<td>The thing</td>
<td>10.0</td>
<td>9.8</td>
<td>6.7</td>
</tr>
<tr>
<td>Other thing</td>
<td>6.5</td>
<td>8.9</td>
<td>9.9</td>
</tr>
</table>


<p>&nbsp;</p>
<table border="0" cellspacing="0" cellpadding="0">
  <tr class="hed">
    <td width="47" valign="top"></td>
    <td width="180" valign="top"><p>Top</p></td>
    <td width="60" valign="top"><p>&nbsp;</p></td>
    <td width="180" valign="top"><p>Top</p></td>
    <td width="60" valign="top"><p>&nbsp;</p></td>
    <td width="67" valign="top"><p>5 - 1</p></td>
  </tr>
  <tr>
    <td width="47" valign="top"><p><strong><em>1</em></strong></p></td>
    <td width="180" valign="top"><p>&nbsp;No1</p></td>
    <td width="60" valign="top"><p>1982</p></td>
    <td width="180" valign="top"><p>No1</p></td>
    <td width="60" valign="top"><p>1438</p></td>
    <td width="67" valign="top"><p>&nbsp;1-0</p></td>
  </tr>
  <tr>
    <td width="47" valign="top"><p><strong><em>2</em></strong></p></td>
    <td width="180" valign="top"><p>No1</p></td>
    <td width="60" valign="top"><p>1641</p></td>
    <td width="180" valign="top"><p>No1</p></td>
    <td width="60" valign="top"><p>1614</p></td>
    <td width="67" valign="top"><p>&nbsp;0-1</p></td>
  </tr>
  <tr>
    <td width="47" valign="top"><p><strong><em>3</em></strong></p></td>
    <td width="180" valign="top"><p>No1</p></td>
    <td width="60" valign="top">1355</td>
    <td width="180" valign="top"><p>No1</p></td>
    <td width="60" valign="top"><p>1538</p></td>
    <td width="67" valign="top"><p>&nbsp;1-0</p></td>
  </tr>
  <tr>
    <td width="47" valign="top"><p><strong><em>4</em></strong></p></td>
    <td width="180" valign="top"><p>No1</p></td>
    <td width="60" valign="top"><p>1666</p></td>
    <td width="180" valign="top"><p>No1</p></td>
    <td width="60" valign="top"><p>1659</p></td>
    <td width="67" valign="top"><p>&nbsp;1-0</p></td>
  </tr>
  <tr>
    <td width="47" valign="top"><p><strong><em>5</em></strong></p></td>
    <td width="180" valign="top"><p>No1</p></td>
    <td width="60" valign="top"><p>1724</p></td>
    <td width="180" valign="top"><p>No1</p></td>
    <td width="60" valign="top"><p>1595</p></td>
    <td width="67" valign="top"><p>&nbsp;1-0</p></td>
  </tr>
  <tr>
    <td width="47" valign="top"><p><strong><em>6</em></strong></p></td>
    <td width="180" valign="top"><p>No1</p></td>
    <td width="60" valign="top"><p>1508</p></td>
    <td width="180" valign="top"><p>No1</p></td>
    <td width="60" valign="top"><p>1365</p></td>
    <td width="67" valign="top"><p>&nbsp;1-0</p></td>
  </tr>
</table>
<p>&nbsp;</p>
</body>
</html>

Alvast bedankt:thumb:
 
Laatst bewerkt:
Verander de css eens zo:

Code: 
table
{text-align: center;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif ;
font-weight: normal;
font-size: 11px;
color: #fff;
width: 280px;
background-color: #666;
border: 0px;
border-collapse: collapse;
border-spacing: 0px;}

td
{background-color: #CCC;
color: #000;
padding: 4px;
text-align: left;
border: 1px #fff solid;
vertical-align: top;}

.hed
{background-color: #99FF00;
color: #fff;
padding: 4px;
text-align: left;
border-bottom: 2px #fff solid;
font-size: 12px;
font-weight: bold;}

Je kan ook td.hed gebruiken, maar table.hed of table hed is logisch dat het niet wordt herkent, omdat je de class in een td gebruikt. Als je de table class op hed zou zetten, kon je wel table.hed gebruiken

P.S. Nu hoef je ook niet meer steeds "valign=top" bij elke td te zetten
 
dat werkt ook niet helaas, dat ik had al geprobeerd en nu ik het copy, paste werkt het ook niet:confused:
 
Dit zou moeten werken:

Code: 
table tr.hed td
{
background-color: #99FF00;
color: #fff;
padding: 4px;
text-align: left;
border-bottom: 2px #fff solid;
font-size: 12px;
font-weight: bold;
}

met de clas op het tr element
 
cool het werkt:D

thx:thumb:


is er ook een manier om de laatste kolom aan te passen? Ik wil deze namelijk een andere achtergrondkleur geven.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan