фон в ТД

Question

фон в ТД

0

это то, чего я хочу достичь:

Я работал с "position: absolute" и т.д., Но красная линия теперь скрывает числа

<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>

John Smith 13 апр. 2014, в 17:02

Источник

0

хорошо, вопрос был отредактирован
John Smith 13 апр. 2014, в 14:35
0

до тех пор, пока вы используете позицию, он будет перекрывать числа, потому что позиционированные элементы находятся вне документа
Karim AG 13 апр. 2014, в 14:41
0

тогда что я должен использовать вместо этого?
John Smith 13 апр. 2014, в 18:58
0

Проверьте мой ответ
Karim AG 13 апр. 2014, в 21:33

Показать ещё 2 комментария

Теги:

html

css

3 ответа

Ещё вопросы

хорошо, вопрос был отредактирован
до тех пор, пока вы используете позицию, он будет перекрывать числа, потому что позиционированные элементы находятся вне документа
тогда что я должен использовать вместо этого?

Karim AG · Answer 1 · 2014-04-13T17-55-00.000Z

Прежде всего, вы должны удалить позицию, попробуйте это решение:

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;
}

Рабочая скрипка.

AlieN · Answer 2 · 2014-04-13T12-54-00.000Z

Это hepls:

<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"

но я не хочу выровнять это правильно.

Itay Gal · Answer 3 · 2014-04-13T12-01-00.000Z

Вы можете попробовать следующее:

Пример JSFiddle

<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.

спасибо, но текст должен быть в центре