Hi,
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:
<body>
<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?