CODEWITHSUNDEEP
htmlcss
Nulik
Nulik

Reputation: 7380

cut text in td element on overflow

I have this table:

<table>
<tr>
    <td style="white-space: nowrap; overflow: hidden;">
         item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1
    </td>
    <td style="white-space: nowrap" >
         item 2 item 2 item 2 item 2 item 2 item 2 item 2 item 2
    </td>
</tr>
</table>

What I want to do is: the right item must get all the space. If there is space left on the left side, the left item should be cut to available length.

I have tried overflow: hidden attribute but it doesn't work.

P.S.

I don't need elipsis

I can not use max-width on item 1 because I want the item 2 to use as much space as possible

Upvotes: 0

Views: 4000

Answers (4)

user5860299
user5860299

Reputation:

This might help you..

 <table>
    <tr>
        <td id='first'>
             item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1
        </td>
        <td id='second>
             item 2 item 2 item 2 item 2 item 2 item 2 item 2 item 2
        </td>
    </tr>
    </table>

    #first{
      display:inline;
      overflow: hidden;
      width:30%;
    }
    #second{
      width:70%;
      }

Upvotes: 2

Shashikala
Shashikala

Reputation: 457

Write CSS styling as

<style>
table{
    table-layout: fixed;
}
td{
    word-wrap:break-word;
}
</style>

Upvotes: 0

Squivo
Squivo

Reputation: 927

There is also the table style table-layout:fixed; , which is extremely helpful when trying to force cell widths...

css tricks: https://css-tricks.com/fixing-tables-long-strings/

fiddle: https://jsfiddle.net/prn2tkx6/

Upvotes: 0

Riken Shah
Riken Shah

Reputation: 3154

Try using media query, Put this in your css code.

@media only screen and (max-width: 500px) {
    #someid {
        display:none;
    }
}

And give same id in your html to item1

<td id="someid">
         item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1
</td>

Also you can change max-width as per whatever screen size you want instead of 500px.

Upvotes: 0

Related Questions