在表格单元格中的文本后浮动图像

Question

如何将图像放在表格单元格中的文本后面？ 如果文本很长，则图像必须可见。如果文字很短，那么图像就应该跟在他后面。

还必须支持Internet Explorer 8。

HTML ：

.table {
table-layout: fixed;
width: 500px;
}
.table-cell {
border: 1px solid black;
overflow: hidden;
white-space: nowrap;
}
.table-cell-text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
}
.table-cell-icon {
width: 16px;
height: 16px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAAAzklEQVQ4T9XTMQ5EUBQF0DezJr09ieQTO5BYACXRWIKEJShpJRqdDZA3ftwhfx6TyUw1p3Fvc8XHjVf0gzuuX/toYFkWJGkfiOOYrp5mGAbKsgzthT6DJ9/3kaQ0TXkcR7SDMdD3PRdFgSYppZAOxoCWJAlP04RmmueZoyhC24gBLQgCJKmua26aBo359C1YlkVt26KZbNumqqrQVhjadV3HeZ6jSa7rIm2MAf3sYRiiSY7jIB2MAc/zkKSrc9kH3t25LMvTb0D7k5/pGtEDUrgBFbhxrJoAAAAASUVORK5CYII=');
display: table-cell;
}
.table-cell-table {
display: table;
table-layout: fixed;
width: 100%;
} 
.table-cell-table .table-cell-text,
.table-cell-table .table-cell-icon {
display: table-cell;
}

CSS

first

小提琴是here

我想要的是：

Answer 1

如果元素的宽度不是动态的，那么您只需将第一列的宽度设置为您需要的宽度（例如col width="250px";）。将display和.table-cell-text上的.table-cell-icon更改为display: inline-block而不是table-cell。我已经更新了你的小提琴： http://jsfiddle.net/vpwyddu8/1/

您还可以尝试在float: left和.table-cell-text上设置.table-cell-icon，然后从中取出display: table-cell媒体资源。这会产生略微不同的效果。