Переполнение не работает для div внутри td

поэтому я пытаюсь, чтобы свойство переполнения работало для div внутри td. Однако я устанавливаю ширину td в процентах. Поэтому я не могу задать ширину div (внутри td) фиксированным числом пикселей, так как не буду знать ее заранее.

<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.net/2Sync/

Любые идеи?!

Большое спасибо!


person abisson    schedule 26.10.2012    source источник


Ответы (2)


Вы можете попробовать добавить следующие правила css:

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

Дополнительные сведения см. в этом сообщении.

person woodykiddy    schedule 26.10.2012

Неважно... Я использовал table-layout:fixed; и это сработало!

person abisson    schedule 26.10.2012