表格單元格中的文字之後的浮動圖像

如何將圖像放置在表格單元格的文本後面？如果文字很長，則必須使圖像可見。如果文字很短，那麼圖片應該放在他後面。表格單元格中的文字之後的浮動圖像

這也是必要的支持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; 
}

小提琴是here

我要的是：

來源

2015-09-28 Саша Герасимов

如果元素的寬度不是動態的，那麼你可以只設置第一列到你所需要的寬度的寬度（例如， col width="250px";）。將.table-cell-text和.table-cell-icon上的display更改爲display: inline-block而不是table-cell。我已經更新了你的提琴： http://jsfiddle.net/vpwyddu8/1/

您也可以嘗試在.table-cell-text和.table-cell-icon設置float: left，並採取了display: table-cell財產了出來。這產生了稍微不同的效果。

來源

2015-09-28 09:01:48 Baki

表格單元格中的文字之後的浮動圖像

回答

相關問題