CODEWITHSUNDEEP
htmlcss
Sj03rs
Sj03rs

Reputation: 937

Cut off table content for the next cell CSS

I'm building a list by using a table:

table screenshot

As you can see, the long url, makes the table wider. This is what I want to prevent.

I've used a couple of things like

table { table-layout: fixed; width: 100%; }

and

td.title { white-space:nowrap;overflow: hidden; width: 200px; }

But this did not work.

Also, maybe I need to note that my table is dynamically being made. But this should not be a problem.

Any suggestions?

Upvotes: 0

Views: 869

Answers (2)

Daniel Apt
Daniel Apt

Reputation: 2648

This is default behaviour of a table cell. It will always stretch to fit the content's dimensions. width on a table cell tends to behave more like min-width

The fix is to not style the td, but instead its contents only.

Try something like:

td.title a {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    width: 200px;
}

Upvotes: 0

Velimir Tchatchevsky
Velimir Tchatchevsky

Reputation: 2815

Just cut the url text (not the href value) at a certain character. With JavaScript you can do that with str.substring(5, 0); where 5 is the number of characters you want left.

Upvotes: 1

Related Questions