CODEWITHSUNDEEP
cssreactjscss-selectorscss-modulesreact-css-modules
ccying
ccying

Reputation: 251

ReactJS select all similar tags for styling

I have a table with two columns, and I want to style them such that the first column is styled as text-align:left and the second as text-align:right.

I am declaring styles like this:

const styles = {
    table: {
      width: '100%',
    } 
}

And the table looks like this: 

<table style={styles.table}>   
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>   
  </tr>   
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>   
  </tr> 
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>   
  </tr> 
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>   
  </tr> 
</table>

A verbose way to do it would be to create a style for each column and include them on every <td>. Any ways to select all td's (of one single column) at once?

Upvotes: 2

Views: 116

Answers (1)

Wondergrauf
Wondergrauf

Reputation: 168

Just use pseudo-classes. For example:

td:first-child {
  text-align: left;
}
td:nth-chuld(2) {   //You can use :last-child instead of :nth-child(n) in your example
  text-align: right;
}

If it's not react-native just import './styles.css' in beginning of your component and use className for styling. Like this: <table className='table'>...</table>.

Upvotes: 1

Related Questions