Clipping content of cell in table

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?

Solution

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).