Search code examples
htmlcsshtml-tablealignment

Two block level elements 1 fixed width 1 stretch inside table

I have a table with multiple columns. In one of the column rows I want to add 2 elements which will be next to each other. One text element and one icon. The icon has a fixed with, the text element needs to be dynamic and has to be truncated with ... when the column cannot stretch anymore.

This is the HTML:

<table>
    <tr>
        <td>
        </td>
        <td>
            <span>Truncated text goes here</span>
            <i class="icn sprite icn-name></i>
        </td>
        <td>
        </td>
    </tr>
</table>

How do I do this? Using display: table; will make the HTML all buggy.

Solution

  • I added the <i> element in front of the <span> element and gave the <i> element a float: right; and the <span> element the truncate styles.

    Works fine now!