Clipping content of cell in table - html

Question

I want to create a squared table 9x9, width and height should be 100%, and each cell should be 11.11% height and width. I could do it with below code but when the text inside the cell is too large the cell grows down with it. I don't want that. I just simply want the text to be hidden. Preserve the size of the table is my priority ;)
This is what I wrote:
<div class="full_screen">
<table border="1" class="full_width full_height">
<tr class="cell_row">
<td class="cell">long long long long long text</td>
<td class="cell">2</td>
<td class="cell">3</td>
<td class="cell">4</td>
<td class="cell">5</td>
<td class="cell">6</td>
<td class="cell">7</td>
<td class="cell">8</td>
<td class="cell">9</td>
</tr>
... other 8 rows and its cells are similar...
the CSS
body {
font-size: 9px;
font-family: Helvetica, Verdana, Arial, sans-serif;
background-color: rgba(0,0,0,0);
height: 100%;
}
div.full_screen {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.cell_row {
width: 100%;
height: 11%;
}
.cell {
width: 11%;
/*height:100%;*/ /*cell height should be always 11% the height of the hole table*/
margin: 0px;
padding: 0px;
word-break: break-all;
}
How can I clip the content of the cell so cell's height will be always 11% (100%/9 =11.11%) of the table?

Answer 1

You have several problem here.
First, tables are no designed to work that way, they expand horizontally, not vertically, so they will never respect a height:11% per row.
Second, TR styles are ignored, so you can safely remove them.
Third, TD's ignore height for the same reason explained on the first point.
BUT, there is a workaround to the third point, you can use line-height to force a TD height or a nested element (ie DIV) with proper height. But that stills leaves you with a problem, no way to get the height as a 11% of the total document/window height.
What you can do is use some JavaScript to update the TD height (using the workaround explained above) on page load (and update on resize).

Answer 2

You can add
table-layout:fixed;
word-wrap:break-word;
to your table class. It will ensure that your td width will not exceed given %. It will automatically wrap your content appropriately.

Answer 3

As per I can see it can be fixed using following two way:
You can add font-size: 11px; .cell class
Are you getting this data from back-end or if you are displaying text using JSP or something. If you know how many letters you have to display you can get substring and append ... (ellipse). Like you string will be long long long ...
If your application allows you.