Tabellenzellenauffüllung funktioniert nicht, wenn sie ausgeblendet wird

Question

Ich habe eine Tabelle mit versteckter Zelle entworfen. Wenn Zellentext überläuft, wird es ohne Ellipsen ausgeblendet. Wenn ich text-overflow: ellipsis; nicht benutze, funktioniert die Zellenfüllung nicht. Das Problem ist unten gelb markiert.

Sample code

Answer 1

Aktualisiert

Hier sind zwei Optionen, Pseudoelement oder ein extra div.

Pseudo-Element (keine Änderung in Markup erforderlich)

Aktualisiert 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 div

Aktualisiert 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> 

---

Exkurs

Die text-overflow Eigenschaft hat tatsächlich eine Zeichenfolge Option, obwohl es nach wie vor nur von Firefox

Aktualisiert codepen unterstützt: 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

Versuchen die table-layout der Klasse .userauto zu schalten. Das sollte das Padding wie vorgesehen funktionieren lassen.

Answer 3

Polsterung haben keine Farbe Attribut, so dass wir es nicht durch Auffüllen verstecken können, aber wir können Grenze verwenden, um auszuführen.

fügen Sie diesen Code in die CSS-Datei

.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