0

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

Community
  • 1
  • 1
Robby75
  • 3,285
  • 6
  • 33
  • 52
  • Isn't it answered there? http://stackoverflow.com/a/509740/483779 – Stickers Oct 14 '15 at 22:50
  • 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](https://jsbin.com/mefego/edit?css,output) – misterManSam Oct 14 '15 at 22:57

1 Answers1

-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

Mark183
  • 126
  • 6
  • If you test this, it doesn't work. The cell stretches. – misterManSam Oct 14 '15 at 23:15
  • I just copy pasted that code into html file and ran it in chrome and worked fine. – Mark183 Oct 14 '15 at 23:21
  • 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 :) – Mark183 Oct 14 '15 at 23:23
  • It *looks* like it works because of the small width. [If you look at this example, with the table stretched at 100%](https://jsbin.com/picudob/edit?html,css,output), the cell stretches :) – misterManSam Oct 14 '15 at 23:23