如何將表格單元格中的跨度與其單元格中的跨度對齊？

Question

我有一個要求，我要在表格單元格中顯示圖標，文本和另一個圖標。爲了創建這個，我在td中構建了跨度。類似這樣的：

<table> 
    <tr> 
    <td> 
     <span>ICON 1</span> 
     <span>Some Value</span> 
     <span>ICON 2</span> 
    <td> 
    </tr> 
    <tr> 
    <td> 
     <span>ICON 3</span> 
     <span>Some big big value</span> 
     <span>ICON 4</span> 
    <td> 
    </tr> 
</table> 

該方法的問題是跨度沒有得到正確對齊。圖標的大小始終相同，但中間跨度（文本）的長度會有所不同。對於例如上面的代碼將顯示爲：

但是，我想是這樣的：

無論是圖標和文本必須是單細胞的一部分。爲文本和圖標創建不同的列會爲我打破別的東西。

關於如何做到這一點的任何建議？

更新： 如何讓文本右對齊？

Answer 1

您的td已丟失。你可以看看float。（假設圖標大小相同）的中間跨度

td span { 
 
    float:left; 
 
    margin:0.25em; 
 
} 
 
td span:last-of-type { 
 
    float:right; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <span>ICON 1</span> 
 
     <span>Some Value</span> 
 
     <span>ICON 2</span> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <span>ICON 3</span> 
 
     <span>Some big big value</span> 
 
     <span>ICON 4</span> 
 
    </td> 
 
    </tr> 
 
</table>

右對齊ň

tr { 
 
    display:table; 
 
    width:100%; 
 
    white-space:nowrap; 
 
    } 
 
td { 
 
    display:table-row; 
 
    } 
 
td span { 
 
    display:table-cell; 
 
    padding:0.25em; 
 
} 
 
td span:nth-child(2) { 
 
    text-align:right; 
 
    width:100%; 
 
    
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <span>ICON 1</span> 
 
     <span>Some Value</span> 
 
     <span>ICON 2</span> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <span>ICON 3</span> 
 
     <span>Some big big value</span> 
 
     <span>ICON 4</span> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

你可以做到這一點

.table { 
 
    display: table; 
 
} 
 

 
.row { 
 
    display: table-row; 
 
} 
 

 
span { 
 
    display: table-cell; 
 
    padding: 0 5px; 
 
}

<div class="table"> 
 
    <div class="row"> 
 
    <span>ICON 1</span> 
 
    <span>Some Value</span> 
 
    <span>ICON 2</span> 
 
    </div> 
 
    <div class="row"> 
 
    <span>ICON 1</span> 
 
    <span>Some Value lorem ipsum</span> 
 
    <span>ICON 2</span> 
 
    </div> 
 
</div>

Answer 3

你缺少td標籤。

此設置列在您的表中，不需要CSS。

https://jsfiddle.net/Lnynfv9t/

<table> 
 
    <tr> 
 
    <td>ICON 1</td> 
 
    <td>Some Value</td> 
 
    <td>ICON 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>ICON 3</td> 
 
    <td>Some big big value</td> 
 
    <td>ICON 4</td> 
 
    </tr> 
 
</table>

Answer 4

我假定你忘了你的包裹中跨度表列。

無論如何，在你的CSS設置你的跨度顯示：塊。然後給出所有相同的寬度，像素或百分比。爲一個圖標添加背景圖像並將其設置爲左上角。將另一個圖標作爲背景圖像添加到右上角，並將跨距左側的填充放置在圖標右側。