Html tables size

Hello, here are my 2 tables https://jsfiddle.net/master1991/ww64ad94/

what i need is them to be equal no matter how content is long . I was looking on google for more then a hour and could not find a solution to keep lines one after other :frowning:

Any tip?

Can you describe the problem differently, as it’s not at all clear what kind of effect you’re looking for. Perhaps if you drew a picture of what you need and uploaded it, then it would be easier to assist.

@chrisofarabia see there is 5 colums in both tables. What i need is to make each column to be in same size! try to delete text from rows then there is 100% mach between them! But if larger text is inserted they do not match anymore :frowning:

You need the table-layout:fixed algorithm if you want cell sizes to honour the widths set on them.

That means that you have to control overflowing content better and make sure content fits inside the cell because it will overflow if it does not fit.

table { width: 100%;table-layout:fixed;word-wrap:break-word; }

1 Like

If you have very long strings in your content putting <wbr> tags (no hyphen) or &shy; (trailing hyphen) where you would prefer breaks to be could help.

2 Likes

Yeah this did he job! Once again :slight_smile: Thanks allot!

Ohhh i think this ruins it. …:frowning: there are rows where content must me in one line and should not brake line :frowning:
Is there a way to always fit them ? Maybe javascript?

Sure, if you’re willing to have horizontal scroll. Are you?

No :frowning:

That leaves overflow hidden. Personally, for text I would prefer breaks, but if the number of lines must be maintained and there’s not enough room for them something has to give somewhere. Maybe truncating with an ellipsis would be OK?

This will also not help! For now i will leave this question aside as it works on minimum need and will return if the number gets bigger! Thanks for interest to help!

I just thought of another approach that might help. eg.

This is one line with-one-very-long-word-that-must-be-displayed-in-it’s-entirety-without-a-break

1 Like

That makes no sense and I can’t think of a single example where that would be useful or feasible. You cannot let unbroken text go on forever as it would just stretch the whole page wide.

Unbroken text must break or be controlled at the boundaries of the container or there is no point in applying widths to them in the first place.

If you want columns that always react together then simply use one table and not two.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.