กดถูกใจ เป็นกำลังใจให้เรา 😍

VIR9.COM

ขอบคุณน๊าา 🥰

Close

  • color table columns using CSS without coloring individual cells

    October 12, 2020

    1.using the <col> element
    You can use the span attribute to make the col definition apply to more than one column.
    See also: <colgroup>

    .grey { background-color: rgba(128,128,128,.25); }
.red { background-color: rgba(255,0,0,.25); }
.blue { background-color: rgba(0,0,255,.25); }
    <table>
<colgroup>
<col class="grey" />
<col class="red" span="3" />
<col class="blue" />
</colgroup>

<thead>
<tr> <th>#</th> <th colspan="3">color 1</th> <th>color 2</th> </tr>
</thead>

<tbody> <tr>
<th>1</th> <td>red</td> <td>red</td> <td>red</td> <td>blue</td> </tr> <tr> <th>2</th> <td>red</td> <td>red</td> <td>red</td> <td>blue</td>
</tr>
</tbody>
</table>

    2.You can use the nth-child selector for that:

    tr td:nth-child(2), tr td:nth-child(3) { background: #ccc; }
    <table>
<tr> <th colspan="2">headline 1</th> <th>headline 2</th> </tr> <tr> <td>column 1</td> <td>column 2</td> <td>column 3</td> </tr> <tr> <td>column 1</td> <td>column 2</td> <td>column 3</td> </tr> <tr> <td>column 1</td> <td>column 2</td> <td>column 3</td> </tr> </table>

    3. You can use CSS3: http://jsfiddle.net/snuggles08/bm98g8v8/

    <style> .table td:nth-of-type(1) { background: red; } .table td:nth-of-type(5) { background: blue; } .table td:nth-of-type(3) { background: green; } .table td:nth-of-type(7) { background: lime; } .table td:nth-of-type(2) { background: skyblue; } .table td:nth-of-type(4) { background: darkred; } .table td:nth-of-type(6) { background: navy; } </style>
Styled table:
<table border="1" class="table"> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> <tr> <td>7</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> </tbody> </table> <hr>Unstyled table: <table border="1" class="table2"> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> <tr> <td>7</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> </tbody> </table>
    4.ใช้อันนี้
    <style type="text/css"> th:nth-child(2), th:nth-child(4) { background-color: rgba(255, 0, 0, 1.0); } td:nth-child(2), td:nth-child(3), td:nth-child(4), td:nth-child(6), td:nth-child(7) { background-color: rgba(255, 0, 0, 0.5); } </style>

    5.ใช้อันนี้

    <style type="text/css"> /* colored */ td:nth-child(n+2) { background-color: #ddd } /* uncolored */ td:nth-child(5) { background-color: transparent } </style>
<table border="1"> <tr> <th>Motor</th> <th colspan="3">Engine</th> <th>Car</th> <th colspan="2">Body</th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> <tr> <td>7</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> </table>

    6. but may not know the number of columns prior to styling, or have multiple tables with varying widths

    /* Select the first two */ table tr td:nth-child(-n + 2) { background-color: lightblue; } /* Select all but the first two */ table tr td:not(:nth-child(-n + 2)) { background-color:lightgreen; } /* Select last two only */ table tr td:nth-last-child(-n + 2) { background-color:mistyrose; } /* Select all but the last two */ table tr td:not(:nth-last-child(-n + 2)) { background-color:yellow; }
    <table id="t1">
<tr>
  <td>One</td>
  <td>Two</td>
  <td>Three</td>
  <td>Four</td>
  <td>Five</td>
</tr>
<tr>
  <td>Apple</td>
  <td>Banana</td>
  <td>Cherry</td>
  <td>Date</td>
  <td>Elderberry</td>
</tr>
</table>
<br>
<table id="t2">
<tr>
  <td>One</td>
  <td>Two</td>
  <td>Three</td>
  <td>Four</td>
  <td>Five</td>
</tr>
<tr>
  <td>Apple</td>
  <td>Banana</td>
  <td>Cherry</td>
  <td>Date</td>
  <td>Elderberry</td>
</tr>
</table>
<br>
<table id="t3">
<tr>
  <td>One</td>
  <td>Two</td>
  <td>Three</td>
  <td>Four</td>
  <td>Five</td>
</tr>
<tr>
  <td>Apple</td>
  <td>Banana</td>
  <td>Cherry</td>
  <td>Date</td>
  <td>Elderberry</td>
</tr>
</table>
<br>
<table id="t4">
<tr>
  <td>One</td>
  <td>Two</td>
  <td>Three</td>
  <td>Four</td>
  <td>Five</td>
</tr>
<tr>
  <td>Apple</td>
  <td>Banana</td>
  <td>Cherry</td>
  <td>Date</td>
  <td>Elderberry</td>
</tr>
</table>
    jsFiddle: https://jsfiddle.net/3rpf5oht/2/

    https://stackoverflow.com/questions/42346107/color-td-in-tables-with-rowspan-and-colspan

    https://stackoverflow.com/questions/15819260/change-color-for-second-column


เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!

เวอไนน์เว็บไซต์⚡️
สร้างเว็บไซต์ ดูแลเว็บไซต์

Categories

Uncategorized