htmlcss

Why font-size is not applied to raw cell content

I have class definition:

.small, td.small, td.small > nobr, td.small > a
{
    font-size: 90%;
}

That makes text inside of anchor in the cell looking smaller.

But style is not applied if I put text in cell without anchor.

<table>
    <tbody>
        <tr>
            <td class="small">
                <a href="...">Small content</a>
            </td>
            <td>Should be smaller as well</td>
        </tr>
    </tbody>
</table>

Why? How to make raw text looking smaller without introducing another wrapper?

Solution

  • It looks to me like you forgot to put the class "small" on the second <td> element. It should look like this:

    <td class="small">
   <a href="...">Small content</a>
</td>
<td class="small">Should be smaller as well</td>