javascript - Overflow not working for div inside a td - Stack Overflow

admin管理员组

文章数量:1336633

so I am trying to have the overflow property working for a div inside a td. However, I am setting the width of the td in terms of percentages. Therefore, I can't set the width of the div (inside the td) with a fix number of pixels, since I will not know it in advance.

<table id="table">
<thead>
    <tr> 
        <th>column 1</th>
        <th>column 2</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><div class="cell">Aaaaaaaaaaaaaabbbbbbbbba</div></td>
        <td><div class="cell">bbbbbbbbbbbbbaaaaaaaaaaabb</div></td>
    </tr>
 </tbody>
</table>​


#table {
     width:100px !important;
}

th {
   width:16% !important;
   border: 1px solid black;
}

.cell{
    width:100%;
     overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    white-space: nowrap;
   }

​

/

Any ideas?!

Thanks a lot!

so I am trying to have the overflow property working for a div inside a td. However, I am setting the width of the td in terms of percentages. Therefore, I can't set the width of the div (inside the td) with a fix number of pixels, since I will not know it in advance.

<table id="table">
<thead>
    <tr> 
        <th>column 1</th>
        <th>column 2</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><div class="cell">Aaaaaaaaaaaaaabbbbbbbbba</div></td>
        <td><div class="cell">bbbbbbbbbbbbbaaaaaaaaaaabb</div></td>
    </tr>
 </tbody>
</table>​


#table {
     width:100px !important;
}

th {
   width:16% !important;
   border: 1px solid black;
}

.cell{
    width:100%;
     overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    white-space: nowrap;
   }

​

http://jsfiddle/2Sync/

Any ideas?!

Thanks a lot!

• javascript
• jquery
• css
• css-tables

Share Improve this question Follow asked Oct 26, 2012 at 1:25 abissonabisson 4,4251010 gold badges4848 silver badges7272 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You may want to try adding following css rules:

#table{
    table-layout:fixed;
    overflow:hidden; 
    white-space: nowrap; 
}

Please check more in this post.

Nevermind... I used table-layout:fixed; and it worked!

本文标签： javascriptOverflow not working for div inside a tdStack Overflow