Adjust one td css only

Question

I have a table:

<table border="2">
    <tbody>
        <tr>
            <td><img class="imgpadrao" src="xxxxx" alt=""></td>
            <td> Recebido </td>
        </tr>
    </tbody>
</table>

I have many tables like this and I need to change only the first td putting a style to it (width: 50px), what has the class imgpadrao without affecting the other td. How can I do?

Answer 1

You can use the pseudo-selector first-child that will apply to all the first:

tr td:first-child {
  width: 50px;
  text-decoration: underline
}

<table border="2">
  <tbody>
    <tr>
      <td><img class="imgpadrao" src="xxxxx" alt="">Primeiro</td>
      <td> Recebido </td>
    </tr>
  </tbody>
</table>

<table border="2">
  <tbody>
    <tr>
      <td>Outra TD</td>
      <td> Recebido </td>
    </tr>
  </tbody>
</table>

Answer 2

You can use :first-child to take the first element inside the tr

td:first-child > img {
    width: 50px;
}

<table border="2">
    <tbody>
    <tr>
        <td><img class="imgpadrao" src="https://i.stack.imgur.com/xnyxp.jpg?s=32&g=1" alt=""></td>
        <td> Recebido </td>
    </tr>
</tbody>
</table>

Answer 3

You can set a class for your td.

  <td class="exemplo"><img class="imgpadrao" src="xxxxx" alt=""></td>

And in css put width in it.

  .exemplo{
     width: 50px;
  }

Or you put the style inside your tag, getting like this:

  <td style="width: 50px;"><img class="imgpadrao" src="xxxxx" alt=""></td>

Answer 4

You can use CSS selectors to do this. Two examples of how to do this is:

td:nth-child(1){
    width: 50px;
}

or else:

td:first-child{
    width: 50px;
}