固定html表中列的宽度

Question

I am trying to use a table where I will define fixed width columns. Each column width is pre-defined and applied to a 'th' element in the table header via: ng-style='{"width":get_width[i]+"px"}', where the get_width function returns a number.

This works just fine as long as the text does not exceed the column width specified. If it does, the width changes to accommodate the entire text.

Question, how can I use CSS to force the column width to my specification? The text may be truncated if longer.

Thx in advance.

Answer 1

You can truncate text using css: FIDDLE

CSS

.div1 {
    white-space:nowrap;
    width:12em;
    overflow:hidden;
    text-overflow:ellipsis;
    border:1px solid #000000;
}

HTML

<p>This div uses "text-overflow:ellipsis":</p>
<table>
    <tr>
        <td><div class="div1">This is some long text that will not fit in the box.</div></td>
    </tr>
</table>

Answer 2

If you can, set the width of the table as a whole by styling the <table> element. Evidently a lot of implementations of CSS expand the columns to fit text until they bump up against the maximum width of the table.

Source

Answer 3

you need to set table layout fixed and set overflow hidden for cells and you have to use

<table class="fixed-table">
    <col width="20px" />
    <col width="30px" />
    <col width="40px" />
    <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
</table>

.fixed-table{ table-layout:fixed; word-break: break-all;}
.fixed-tabletd { overflow: hidden; }