moderne CSS3-Selektoren an einer Tabelle angewendet

Es soll nicht die erste und nicht die letzte Tabellenzelle selektiert werden. Offenbar gilt das aber pro Zeile, nicht pro Tabelle.

by Jens Grochtdreis

HTML

<table>
          <thead>
              <tr>
                <th>Entry Header 1</th>
                <th>Entry Header 2</th>
                <th>Entry Header 3</th>
                <th>Entry Header 4</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                <td>Entry First Line 1</td>
                <td>Entry First Line 2</td>
                <td>Entry First Line 3</td>
                <td>Entry First Line 4</td>
              </tr>
              <tr>
                <td>Entry Line 1</td>
                <td>Entry Line 2</td>
                <td>Entry Line 3</td>
                <td>Entry Line 4</td>
              </tr>
              <tr>
                <td>Entry Last Line 1</td>
                <td>Entry Last Line 2</td>
                <td>Entry Last Line 3</td>
                <td>Entry Last Line 4</td>
              </tr>
          </tbody>
      </table>

CSS

td:not(:first-of-type):not(:last-of-type){background: yellow}


// Einfach mal hübsch machen mit einem YAML4-Standard-Style

  body {font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;padding: 20px;}

    table{width:100%;border-collapse:collapse;margin:1.3571em 0 0 0;color:#333;border-top:1px #ccc solid;border-bottom:1px #ccc solid;}
    table caption{font-variant:small-caps;}
    th,td{line-height:1.5em;vertical-align:top;padding:0.7143em 0.5em;}
    th *:first-child,
    td *:first-child{margin-top:0;}

    th.nowrap,
    td.nowrap{white-space:nowrap;}
    thead th{text-align:left;color:#000;border-bottom:2px #000 solid;}
    tbody th{text-align:left;border-top:1px solid #ccc;text-align:left;}
    tbody td{text-align:left;border-top:1px solid #ccc;}
    tbody tr:hover th,
    tbody tr:hover td{background:#f8f8f8;color: #000;font-weight: normal;}

JavaScript

//Es soll "nicht die erste und nicht die letzte Tabellenzelle" selektiert werden. 
// Offenbar gilt das aber pro Zeile, nicht pro Tabelle.