Fixed width of columns in html table

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.

Hmm, fixed widths should constrain any text in them - http://jsfiddle.net/8QkmD/. Please demo the problem by posting code and, ideally, a JSFiddle. — Mitya, Jul 16 '14 at 21:24
@Utkanos, I tried this with frameworks such as Bootstrap and with just plain simple CSS, no luck. Will try to post some redacted code soon. — AJU, Jul 16 '14 at 22:19

Lei-Lonnie · Answer 1 · 2014-07-22T18:56:11.750

6

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>

edited Jul 22 '14 at 18:56

answered Jul 16 '14 at 21:26

Lei-Lonnie

794
11
34

1

Checked this out. Found this works for textboxes, but not in tables. see code below – AJU Jul 17 '14 at 19:53
This div uses "text-overflow:ellipsis":

This is some long text that will not fit in the box

– AJU Jul 17 '14 at 19:56
You are right, I edited my answer to include a div inside the td. – Lei-Lonnie Jul 17 '14 at 20:22
Yes, thanks. Adding a div worked. Looks like width definitions only within a div. I have added the css settings I applied to the div as the solution. – AJU Jul 17 '14 at 23:41

score 0 · Answer 2 · edited May 23 '17 at 12:21

0

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

edited May 23 '17 at 12:21

Community

1
1

answered Jul 16 '14 at 21:26

Alex Ryan

2,427
2
18
15

I plan to dump a large amount of data to this table with many columns (in excess of 25), so planning to utilize the max width is not a feasible approach. I expect that the columns that are important will be displayed ahead with fixed widths that I will manually optimize as part of the initial setup. My user may further change column width at runtime. – AJU Jul 16 '14 at 22:21
Think of Excel columns, that is the behavior I am trying to mimic. – AJU Jul 16 '14 at 22:23

score 0 · Answer 3 · answered Jul 17 '14 at 06:09

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; }

Fixed width of columns in html table

3 Answers3