CODEWITHSUNDEEP
htmlcss
Jesse
Jesse

Reputation: 1225

Keep table cell width from growing larger than content

I can't seem to find a way to do this without using Javascript.

Let's say I have a <table>, and I don't know the potential width of the content that populates the first column. The <table> has width:100% so that the rest of the columns can resize as neccssary, but I'd like to keep the first column with a fixed width so that it doesn't grow larger than the content.

Is this possible without Javascript?

<table>
    <tr>
        <th>Dynamic content column of unknown width</th>
        <th>Some other column that is allowed to grow/shrink</th>
    </tr>
    <tr>
        <td>Lorem ipsum ...</td>
        <td>195383 ...</td>
    </tr>
</table>

Upvotes: 3

Views: 3981

Answers (2)

Jesse
Jesse

Reputation: 1225

It seems that by setting the width of the dynamic content column to 1px, the column width will be fixed to the width of the content in the column, and still allow the other column to grow/shrink with the table.

Upvotes: 4

Andy G
Andy G

Reputation: 19367

To set a fixed width for the first column:

tr th:first-child, tr td:first-child {
    width: 200px;
}

Upvotes: 0

Related Questions