css3偽類別

by cactus77kiki

HTML

<table class="bgtable2">
  <tbody>
    <tr>
      <td class="bgtd">Name</td>
      <td>Product 1</td>
    </tr>
    <tr>
      <td class="bgtd">Price</td>
      <td>30</td>
    </tr>
    <tr>
      <td class="bgtd">Quantity</td>
      <td>100</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td class="bgtd">Name</td>
      <td>Product 2</td>
    </tr>
    <tr>
      <td class="bgtd">Price</td>
      <td>38</td>
    </tr>
    <tr>
      <td class="bgtd">Quantity</td>
      <td>150</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td class="bgtd">Name</td>
      <td>Product 3</td>
    </tr>
    <tr>
      <td class="bgtd">Price</td>
      <td>40</td>
    </tr>
    <tr>
      <td class="bgtd">Quantity</td>
      <td>80</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Quantity</th>
      <th>Month</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Product 1</td>
      <td>50</td>
      <td>Jan.</td>
    </tr>
    <tr>
      <td>Product 2</td>
      <td>30</td>
      <td>Jan</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Product 1</td>
      <td>40</td>
      <td>Feb</td>
    </tr>
    <tr>
      <td>Product 2</td>
      <td>45</td>
      <td>Feb</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Product 1</td>
      <td>35</td>
      <td>Mar</td>
    </tr>
    <tr>
      <td>Product 2</td>
      <td>38</td>
      <td>Mar</td>
    </tr>
  </tbody>
</table>

<table class="bgtable">
    <thead>
        <tr><th>Customer</th><th>Order</th><th>Month</th></tr>
    </thead>
    <tbody>
        <tr><td>Customer 1</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 1</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 1</td><td>#3</td><td>March</td></tr>
    </tbody>
    <tbody>
        <tr><td>Customer 2</td><td>#1</td><td>January</td></tr>
        <tr><td>Customer 2</td><td>#2</td><td>April</td></tr>
        <tr><td>Customer 2</td><td>#3</td><td>March</td></tr>
    </tbody>
    <tbody>
     ...

CSS

thead th { width: 100px; border-bottom: solid 1px #ddd; font-weight: bold; }
/*單數*/
table.bgtable tbody:nth-child(odd) { background: #f5f5f5;  border: solid 1px #ddd; }
/*偶數*/
table.bgtable tbody:nth-child(even) { background: #e5e5e5;  border: solid 1px #ddd; }

/*table.bgtable2 tbody > tr > td.bgtd:nth-child(1) { background: blue;  border: solid 1px #ddd; }*/
td.bgtd{
  background: pink;  border: solid 1px #ddd;
}

JavaScript

/*css3偽類別
ref1: https://stackoverflow.com/questions/3076708/can-we-have-multiple-tbody-in-same-table
ref2:
http://csscoke.com/2013/09/21/%E4%BD%BF%E7%94%A8css3-nth-childn-%E9%81%B8%E5%8F%96%E5%99%A8%E8%A9%B3%E8%A7%A3/
ref3:
https://ithelp.ithome.com.tw/articles/10191141
ref4:
https://footmark.info/web-design/css/css-pseudo-class-selectors/#sj_chapter-3-4-6
ref5:(有列出多種類型)
https://footmark.com.tw/news/web-design/css/css-pseudo-class-selectors/
*/