HTML Fixed Container

Question

I have created a spreadsheet like web app and now need to have cell size fix so that text inside the cell shouldn't increase the width or height of the cell.

You can view it here http://i56.tinypic.com/4rw948.png.

The cells are basically elements having two columns as and needs to be fixed so that every cell is of equal size. I don't care if the text is cut off due to large number of alphabets.

Update: http://partydesigners.site50.net/Excel%20Like%20App/Index.html

Answer 1

Maybe try overflow: hidden on the cells.

Answer 2

There is max-width and max-height to limit size of elements in CSS. You might also want to have a look at overflow: hidden;

Answer 3

You can try the following CSS on the cell:

width: 100px;
max-width: 100px;
min-width: 100px;
overflow: hidden;  // Or scroll if you want the content to be scrollable

Answer 4

Thats about the border I think. At the runtime, when a cell is selected you are creating a black border. All borders have padding effect. I suggest you to set height and width of selected cells's row minus your border width.

For example;

Think about a 100px wide square. If you add a 2 px width border to this square, it's width will be 104px automaticly. If you want a fixed view of 100px wide square, you need to set it's width 96px and add 2 px width border.

I hope it helps.

Answer 5

Okay I solved the problem myself by putting div inside each td and applying following CSS.

height: 40px;
min-height: 40px;
max-height: 40px;
overflow: hidden;

Anyways, Thanks a ton for your guys responses.