如何在一個div使用「相對」位置時在我的td中刪除div後的空格？

Question

如何在我的td中刪除我的div後的空間？

以下是我的HTML和CSS。我試過在堆棧溢出中搜索其他解決方案，但在這種情況下它們似乎不起作用 - 可能是因爲第二個div的「相對」位置。

<table> 
    <tr> 
     <td> 
     <div class="progressBar"></div>  //Updated dynamically using js 
     <div class="numericProgress>0%</div> //Updated dynamically using js 
     </td> 
    </tr> 
</table> 

CSS：

table 
{ 
table-layout:fixed; 
width:100%; 
} 

table,td,th 
{ 
overflow:auto; 
border-collapse:collapse; 
text-align:center; 
} 

.progressBar 
{ 
    width:1%; 
    height:30px; 
    background: #A8E6F5; 
} 
.numericProgress 
{ 
    color: #123123; 
    font-size: 30px; 
    position: relative; 
    top: -31px; 
} 

Answer 1

我能夠去除多餘的線;然而，我還沒有找到一種方法來保持中心的價值，而不會隨着價格上漲而上漲（我假設您在.progressBar標記中使用width:來「填充」欄）。在我提供的解決方案中，隨着條從0％移動到100％，數字將移動並位於填充區域的中心。

HTML

<table> 
<tr> 
    <td> 
    <div class="progressBar"> 
     <div class="numericProgress">0%</div> 
    </div>  

    </td> 
</tr> 
</table> 

CSS

table 
{ 
    table-layout:fixed; 
    width:100%; 
} 

table,td,th 
{ 
    overflow:auto; 
    border-collapse:collapse; 
    text-align:center; 
} 

.progressBar 
{ 
    width:1%; 
    height:30px; 
    background: #A8E6F5; 
} 

.numericProgress 
{ 
    color: #123123; 
    font-size: 30px; 
    position: absolute; 
    left: 50%; 
} 

查看JSFiddle這裏。

如果我遇到一個解決方案，保持以％爲中心，我將編輯我的答案以反映新的發現。

編輯：更新CSS塊應該現在工作:)。感謝@badAdviceGuy的評論！