Elektroda.pl
Elektroda.pl
X
SterControlSterControl
Proszę, dodaj wyjątek dla www.elektroda.pl do Adblock.
Dzięki temu, że oglądasz reklamy, wspierasz portal i użytkowników.

[HTML/CSS] Style.css tylko dla jednej konretnej tabeli

22 Cze 2011 07:26 3874 6
  • Poziom 15  
    Witam, wiem że takie śmieszne coś jak HTML czy CSS nie zalicza się do programowania, jednak nie mogę sobie poradzić z tym problemem.

    Mianowicie ściągnąłem sobie styl tabeli i chciałbym go wypróbować na swojej stronie, jednak że cała moja strona jest zrobiona na tabelach to łatwo można się domyślić jak działa style.css na całość.

    Czy jest możliwość zrobienia by dany styl działał tylko i wyłącznie na tą jedną konkretną tabelę?

    Oto kod tabelki:

    Code:

    <style type="text/css">
    @import url("style.css");
    </style>
    <table class="td1" summary="Employee Pay Sheet" >
        <thead>
           <tr>
               <th scope="col">Employee</th>
                <th scope="col">Salary</th>
                <th scope="col">Bonus</th>
                <th scope="col">Supervisor</th>
            </tr>
        </thead>
        <tbody>
           <tr>
               <td>ZZZZZZZ</td>
                <td>$300</td>
                <td>$50</td>
                <td>Bob</td>
            </tr>
            <tr>
               <td>BBBBBBB</td>
                <td>$150</td>
                <td>-</td>
                <td>Annie</td>
            </tr>
            <tr>
               <td>EEEEEEEEE</td>
                <td>$200</td>
                <td>$35</td>
                <td>Andy</td>
            </tr>
            <tr>
               <td>AAAAAAAA</td>
                <td>$175</td>
                <td>$25</td>
                <td>Annie</td>
            </tr>
        </tbody>
    </table>


    Oto style.css:

    Code:
    table {
    
      border-collapse: collapse;
      border: 1px solid #38160C;
      font: normal 11px verdana, arial, helvetica, sans-serif;
      color: #F6ECF0;
      background: #641B35;
      }
    caption {
      text-align: left;
      font: normal 11px verdana, arial, helvetica, sans-serif;
      background: transparent;
      }
    td, th {
      border: 1px dashed #B85A7C;
      padding: .8em;
      color: #F6ECF0;
      }
    thead th, tfoot th {
      font: bold 11px verdana, arial, helvetica, sans-serif;
      border: 1px solid #A85070;;
      text-align: left;
      background: #38160C;
      color: #F6ECF0;
      padding-top:6px;
      }
    tbody td a {
      background: transparent;
      text-decoration: none;
      color: #F6ECF0;
      }
    tbody td a:hover {
      background: transparent;
      color: #FFFFFF;
      }
    tbody th a {
      font: normal 11px verdana, arial, helvetica, sans-serif;
      background: transparent;
      text-decoration: none;
      font-weight:normal;
      color: #F6ECF0;
      }
    tbody th a:hover {
      background: transparent;
      color: #FFFFFF;
      }
    tbody th, tbody td {
      vertical-align: top;
      text-align: left;
      }
    tfoot td {
      border: 1px solid #38160C;
      background: #38160C;
      padding-top:6px;
      }
    .odd {
      background: #7B2342;
      }
    tbody tr:hover {
      background: #51152A;
      }
    tbody tr:hover th,
    tbody tr.odd:hover th {
      background: #51152A;
      }


    Warto dodać że tabelkę mam w osobnym pliku (include)
  • SterControlSterControl
  • Pomocny post
    Poziom 22  
    Oczywiście że się da. Wykorzystaj atrybuty id lub class w ten sposób:
    Kod: html4strict
    Zaloguj się, aby zobaczyć kod

    W CSS robisz tak:
    Kod: css
    Zaloguj się, aby zobaczyć kod
  • SterControlSterControl
  • Poziom 15  
    Cool, a jak mam w CSS:

    Code:
    tbody th a:hover 


    albo

    Code:
    thead th, tfoot th


    to gdzie wstawic id ?
  • Pomocny post
    Poziom 16  
    Użyj następującego kodu CSS:

    Kod: css
    Zaloguj się, aby zobaczyć kod
  • Poziom 15  
    Nie chce działać... :/ Nie wiem... nie ładuje się w ogóle styl do tabeli, ani nigdzie indziej, tak jakby go w ogóle nie było. W czołówce próbowałem:
    Code:

    <style type="text/css">
    <!--
    @import url("style.css");
    -->
    </style>
    <table id="td1" summary="txt1">


    oraz
    Code:

    <style type="text/css">
    @import url("style.css");
    </style>
    <table id="table.td1" summary="txt1">


    oraz pochodne. Something is wrong :(
  • Pomocny post
    Poziom 16  
    wklej poniższy kod w sekcji head pliku html:

    Kod: html4strict
    Zaloguj się, aby zobaczyć kod
  • Poziom 15  
    Ok wiem gdzie tkwił błąd. Zamiast
    Code:

    <table id="td1" summary="txt1">

    dałem
    Code:

    <table class="td1" summary="txt">


    I działa malinowo :D Wielkie dzięki