6

[CSS] Select First Column of Table

 2 years ago
source link: http://siongui.github.io/2017/04/09/css-select-first-column-of-table/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

[CSS] Select First Column of Table

Updated: April 10, 2017

See the demo below. The first column is selected and styled.

(1,1) (1,2) (1,3) (1,4) (2,1) (2,2) (2,3) (2,4) (3,1) (3,2) (3,3) (3,4)

HTML:

<table class="first-column">
 <tbody>
  <tr>
    <td>(1,1)</td>
    <td>(1,2)</td>
    <td>(1,3)</td>
    <td>(1,4)</td>
  </tr>
  <tr>
    <td>(2,1)</td>
    <td>(2,2)</td>
    <td>(2,3)</td>
    <td>(2,4)</td>
  </tr>
  <tr>
    <td>(3,1)</td>
    <td>(3,2)</td>
    <td>(3,3)</td>
    <td>(3,4)</td>
  </tr>
 </tbody>
</table>

CSS:

table.first-column > tbody > tr > td:nth-of-type(1) {
  font-size: larger;
  color: red;
}

We use nth-of-type CSS selector to select the first td of rach row. If you want to select n-th column, change the number from 1 to n.

You may also be interested in [CSS] Select First Row of Table

Tested on: Chromium Version 56.0.2924.76 Built on Ubuntu , running on Ubuntu 16.10 (64-bit)

Author: Siong-Ui Te ∈ Category: CSS

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK