TD的背景

Question

这就是我想要实现的目标：

我在＆＃34;位置：绝对＆＃34;等等，但红线现在隐藏了数字

<td class="centerText">
    <div class="relative">
    <div style="position: absolute; z-index: 0; background-color: red; width: 
        <?php echo rand(1,100); ?>%;">&nbsp;</div>
    </div>
    <?php echo $rec['VOTENUM']; ?>
</td>

Answer 1

你可以试试这个：

JSFiddle example

<table>
   <tr>
       <td><div style="background-color: red; width: 30%">5</div></td>
   </tr>
   <tr>
       <td><div style="background-color: red; width: 50%">4</div></td>
   </tr>
</table>

在每个单元格内创建一个div并设置其宽度。文本将在div中。

Answer 2

这是否解释：

<td class="centerText">
    <div class="relative" style="text-align:right">
    <div style="position: absolute; z-index: 0; background-color: red; width: 
        <?php echo rand(1,100); ?>%;">&nbsp;</div>
    </div>
    <?php echo $rec['VOTENUM']; ?>
</td>

我添加了style="text-align:right"

Answer 3

首先，您必须删除该位置，尝试此解决方案：

<强> HTML：

<table>
<tr>
    <td>
        <div class="bar" style="width:<?php echo rand(1,100); ?>%;">
        </div> <?php echo $rec['VOTENUM']; ?>
    </td>
</tr>
<tr>
    <td>
        <div class="bar" style="width:<?php echo rand(1,100); ?>%;">
        </div> <?php echo $rec['VOTENUM']; ?>
    </td>
</tr>
</table>

<强> CSS：

td {
height:25px;
border:1px solid #000;
width:300px;
}
.bar {
display:inline-block;
background:red;
height:20px;
}

<强> Working fiddle