Заполнение ячейки таблицы не работает, когда оно скрыто

Question

Я разработал таблицу со скрытой ячейкой. Когда текст ячейки будет переполнен, он будет скрыт без эллипсиса. Если я не использую text-overflow: ellipsis;, то заполнение ячейки времени не работает. Проблема изображена ниже, где отмечена желтая.

Sample code

Answer 1

Обновлено

Вот 2 варианта, псевдо-элемент или дополнительный Div.

Псевдо элемент (без изменений требуется в разметке)

Обновлено codepen: http://codepen.io/anon/pen/grmopw

CSS

.users td { 
    white-space: nowrap; 
    overflow: hidden; 
    position: relative;   /* added prop. */ 
    background: inherit;   /* added prop. */ 
} 
.users td:after {    /* added rule */ 
    content: ' '; 
    position: absolute; 
    top: 0; 
    right:0; 
    bottom: 0; 
    width: 5px; 
    background: inherit; 
} 

.users tr:nth-child(odd) {  /* added rule */ 
    background: white; 
} 

---

Extra ДИВ

Обновлены codepen: http://codepen.io/anon/pen/reyYEZ

CSS

.users td { 
    white-space: nowrap; 
} 
.users td div {    /* added rule */ 
    overflow: hidden; 
} 

HTML

<tr> 
    <td><div>00011111111111111111111</div></td> 
    <td>Johnny Five</td> 
    <td>Robotin'</td> 
    <td><div>need@input.com</div></td> 
    <td>0001</td> 
    <td>Johnny Five</td> 
    <td>Robotin'</td> 
    <td><div>need@input.com</div></td>  
    </tr> 
    <tr> 
    <td>0002</td> 
    <td><div>Super Superlonglastnamesmith</div></td> 
    <td>Doin' stuff</td> 
    <td><div>doing@stuff.com</div></td> 
    <td>0002</td> 
    <td><div>Super Superlonglastnamesmith</div></td> 
    <td>Doin' stuff</td> 
    <td><div>doing@stuff.com</div></td>   
    </tr> 

---

Примечание стороны

Свойство text-overflow фактически имеет опцию строку, хотя она по-прежнему поддерживается только Firefox

Изменено codepen: http://codepen.io/anon/pen/jqBYMz

CSS

.users td { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ''; 
} 

Src: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

Answer 2

Попробуйте переключая table-layout класса .user к auto. Это должно сделать прокладку работать по назначению.

Answer 3

Заполнение не имеет атрибута цвета, поэтому мы не можем скрыть его заполнением, но мы можем использовать границу для выполнения.

добавить этот код в CSS файл

.users tr:nth-child(odd) td:nth-of-type(4){ 
    border-right:15px solid #fff; 
} 
.users tr:nth-child(even) td:nth-of-type(4){ 
    border-right:15px solid lightblue; 
} 

enter image description here