How to create an "overflow: hidden" table column [duplicate]

Question

I want my <table> to behave normally (height and width changes according to content) but I want a single column that behaves like a "overflow: hidden" column in a "table-layout:fixed;" table, that means it should have a fixed width and any overflowing content shold be cut off.

Obviously, because I cannot use table-layout-fixed because that would affect all columns and not just the one I need to have a fixed width.

Related Question

You can use table-layout: fixed, just use nth-child to apply the width and overflow properties to the table cells in one column like this example — misterManSam
– misterManSam, Commented Oct 14, 2015 at 22:57

Mark183 · Accepted Answer · 2015-10-14 23:02:50Z

-1

try using max width on a the column you want to hide overflow

<style>
    .hideOverflow {
        max-width: 10px;
        overflow: hidden;
    }
</style>

<table style="width:25%">
    <tr>
        <td class="hideOverflow">Jillsssssssssssssssssssssssssssssssssssssssssssss</td>
        <td>Smith</td>      
        <td>50</td>
    </tr>
<table>

Hope this helps

answered Oct 14, 2015 at 23:02

Mark183

1266 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

misterManSam Over a year ago

If you test this, it doesn't work. The cell stretches.

Mark183 Over a year ago

I just copy pasted that code into html file and ran it in chrome and worked fine.

Mark183 Over a year ago

If possible could you explain why its not working on your end? I would be interested to know so i dont make this potential error again. I am not seeing an issue on my side thats all :)

misterManSam Over a year ago

It looks like it works because of the small width. If you look at this example, with the table stretched at 100%, the cell stretches :)

Collectives™ on Stack Overflow

How to create an "overflow: hidden" table column [duplicate]

1 Answer 1

4 Comments

Linked

Hot Network Questions