CODEWITHSUNDEEP
htmlcsshtml-table
nacho4d
nacho4d

Reputation: 45128

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?

Upvotes: 3

Views: 7115

Answers (4)

fruitloaf
fruitloaf

Reputation: 2920

here is Material UI example:

Table MUST BE: tableLayout: fixed...

<Table sx={{tableLayout: 'fixed'}}>

then in Table Cells, under TableRow:

<TableRow key={row.name} className='drr'>
          <TableCell className='dbb' sx={{whiteSpace: 'nowrap', overflow: 
          'hidden', textOverflow: 'ellipsis'}} title={row.name}>
                                {row.name}
                            </TableCell>

basically: Table Fixed layout will make Cells respect WIDTH and I think height... then Cells will behave like DIVS, so you apply standard ellipsis or clip and it will work

if your table is NOT respecting width or height... you MUST make it FIXED LAYOUT... otherwise giga fail!

Upvotes: 0

jaxb
jaxb

Reputation: 2077

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.

Upvotes: 0

xmarcos
xmarcos

Reputation: 3368

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

Upvotes: 5

Chinmayee G
Chinmayee G

Reputation: 8117

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.

Upvotes: 4

Related Questions