tags:

views:

35

answers:

3

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?

A: 

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.

Chinmayee
I tried that, but I didn't work. The problem is not the width of td is actually its height. I already could solve the width problem putting word-break:break-all; inside .cell class.
nacho4d
+3  A: 

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

xmarcos
This is part of an iPhone Application that requires too many views but it seems that HTML won't solve my problem. Using HTML+Javascript will make it slower. So I've come up with CALayers. It loads much faster than UIWebView and its HTML+CSS but thanks for pointing the problems.
nacho4d
That's one of the benefits of developing for the iPhone, you know exactly what is the user environment so you can hack accordingly.
xmarcos
A: 

Hi nacho4d,

As per I can see it can be fixed using following two way:

  1. You can add font-size: 11px; .cell class

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

Jprogyog