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 by putting a style for it ( width: 50px ), which has the class imgpadrao without affecting the other td . How can I do it?
You can use the pseudo-selector first-child which 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> You can use :first-child to get the first element within 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>You can define a class for your td.
<td class="exemplo"><img class="imgpadrao" src="xxxxx" alt=""></td>
And in css put the width in it.
.exemplo{
width: 50px;
}
Or you put the style inside your tag, thus:
<td style="width: 50px;"><img class="imgpadrao" src="xxxxx" alt=""></td>
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;
}