CODEWITHSUNDEEP
htmlcssreactjshtml-table
SM079
SM079

Reputation: 713

How to add CSS to a particular row in a table

I have a table as below

<table className="TableClass">
  <tbody>
    <tr row="0">
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr row="1">
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tbody>
</table>

I just need to add CSS to the <tr row="0"> only. will that be possible ?

Upvotes: 1

Views: 49

Answers (2)

Pythonista
Pythonista

Reputation: 195

To apply styling on elements with certain attributes in CSS you can use the attribute selector. The syntax for attribute selector is

elementName [attribute = value]

So, you can just apply styling to the row 1 like this:

tr[row="0"]{
/*all styles here*/
}

Upvotes: 0

Haim Abeles
Haim Abeles

Reputation: 1021

You can use the [attribute=value] selector

tr[row="0"] { 
  background-color: yellow;
}
<table className="TableClass">
<tbody>
<tr row="0">
  <td>Data</td>
  <td>Data</td>
</tr>
<tr row="1">
  <td>Data</td>
  <td>Data</td>
</tr>
</tbody>
</table>

Upvotes: 2

Related Questions