html - 表格单元格中文本后的 float 图像

Question

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

还需要支持Internet Explorer 8。

HTML:

<table class="table">
<colgroup>
    <col width="200px">
    <col width="100px">
    <col width="100px">
    <col width="100px">
</colgroup>
 <tr class="table-row">
    <td class="table-cell">
        <div class="table-cell-table">
            <div class="table-cell-text">line 0 cell 1 text</div>
            <div class="table-cell-icon"></div>
        </div>
    </td>
    <td class="table-cell">line 0 cell 2</td>
    <td class="table-cell">line 0 cell 3</td>
    <td class="table-cell">line 0 cell 4</td>
</tr>
<tr class="table-row">
    <td class="table-cell">
        <div class="table-cell-table">
            <div class="table-cell-text">line 1 cell 1 long text</div>
            <div class="table-cell-icon"></div>
        </div>
    </td>
    <td class="table-cell">line 1 cell 2</td>
    <td class="table-cell">line 1 cell 3</td>
    <td class="table-cell">line 1 cell 4</td>
</tr>
<tr class="table-row">
    <td class="table-cell">
        <div class="table-cell-table">
            <div class="table-cell-text">line 2 cell 1 very very long text</div>
            <div class="table-cell-icon"></div>
        </div>
    </td>
    <td class="table-cell">line 2 cell 2</td>
    <td class="table-cell">line 2 cell 3</td>
    <td class="table-cell">line 2 cell 4</td>
</tr>
</table>

CSS

.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;
}

fiddle 是 here

我想要的是:

Answer 1

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

您也可以尝试在 .table-cell-text 和 .table-cell-icon 上设置 float: left 并取出display: table-cell 属性。这会产生稍微不同的效果。