靜態進度條作爲表格單元格的背景

Question

有誰知道將行或單元格的背景設置爲「進度條」的最佳方法。例如，如果「％的人使用」單元格的值是50%酒吧填充行或單元格的一半背景：

╔══════════════════════════════════════════════════════════╗ 
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░78%░░░░░░░░░░░░░░░   ║ 
╚══════════════════════════════════════════════════════════╝ 

我使用PHP生成表，所以也許我可以用一個單一的彩色圖像單元格並設置img的寬度。我將如何讓單元格的文本位於頂部？我怎麼知道文本是否使列更寬......我是否必須使用固定列寬？

Javascript會更好，因爲它將能夠檢測列的呈現方式有多寬？

編輯： 只是爲了澄清，進展並沒有改變生活...只是當頁面加載。

Answer 1

這應該是很容易做到無javascript，由於寬度設置爲百分比，它不會不管你有什麼表格的寬度：

<table style="width:200px; border: #777 2px solid;"> 
<tr> 
    <td style="background-color:#f00; height: 10px; width: <?php echo $_GET['percent'] . "%"; ?>;"></td> 
    <td style="background-color:#555;"></td> 
</tr> 
</table> 

Answer 2

我想你可以在td上設置一個背景顏色和背景圖像，其中background-color是你想要的顏色，用於進度條的「填充」部分，圖像是1x1像素圖像用你想要的非填充部分的顏色。設置背景圖像重複並將其位置設置爲0 xx％，其中xx表示您希望填充進度條的次數。

td { 
    background-color: #f00; 
    background-image: url('images/1pxwhite.gif'); 
    background-repeat: repeat; 
    background-position: 0 50%; 
} 

Answer 3

如果CSS是可以接受的，Ben Ogle有一個很好的解決方案：Simple CSS shiny progress bar technique。

Answer 4

現在我們有了CSS3：

td { 
    background-image: url('images/1pxGreen.png'); 
    background-repeat: no-repeat; 
    background-size:50% 100%; 
} 

Answer 5

在HTML（我用樹枝，但你可以得到的想法）：

<td class="text-right pie-progress pie-progress-share{{ (count/totalCount)|round }}">{{ count }}</td> 

在CSS：

td.pie-progress { 
    position: relative; 
} 
td.pie-progress::before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 0; 
    height: 100%; 
    background-color: #66afe9; 
    z-index: -1; 
} 
td.pie-progress-green::before { 
    /* example of other color */ 
    background-color: #66af66; 
} 
td.pie-progress.pie-progress-share1::before {width: 1%;} 
td.pie-progress.pie-progress-share2::before {width: 2%;} 
... 
td.pie-progress.pie-progress-share100::before {width: 100%;}