Question

I would like to achieve effect visible on the screenshot below that is content of the table cell (that blue cell with Michal Aniol…) should be fully visible but cell’s width should stay the same.

How do I do that?

I am open for solutions requiring heavy use of javascript as the rest of the application and also table itself will be generated by dojo.

Having colspan > 1 is not an option because it will not work in other cases. I really want to use just single cells as this will help me with other functionality.

Screenshot http://uppix.net/4/d/9/8cfc6aba556405f910871598afa10.png

Markup and css: http://jsfiddle.net/sGkpq/
style.less http://pastebin.com/waXWDf4J

To make my question self-contained in case links die as @Sparky672 pointed:

I wanted to have table cells of same size and if content in a cell is bigger than the cell itself then content should still display and flow to the next cell. So text in a cell if longer than the cell then it should overflow to the next cell overlaying its content.

Answer 1

Just remove overflow-x: hidden from table.reservation-table td. The text will continue past the end of the cell.

Of course, if you want it to work when the name is longer than the cells behind it (eg, Michal only booked one day) that would be more complicated, but probably doable.