|
 3.8 Кб |
|
| Пытаюсь одну из ячеек таблицы организовать таким образом, чтобы по середине было число, и в этой же ячейке был сдвинутый влево цветной блок заданной ширины.
Насколько я понимаю, для этого нужно использовать слои. В итоге получаем такой код:
<td style="text-align:center; margin:5px;">
<div style="background-color:#F96; width:10%; z-index: 1; position:absolute;"> </div>
<div style="text-align:center; z-index: 2; position:absolute;">75</div>
</td>
|
Но почему-то число не центрируется и вся эта конструкция проваливается вниз (скриншот).
Инспектором кода ничего выяснить не удалось.
В чем тут может быть дело и как исправить? | |
|
|
|
|
|
|
|
для: Владимир55
(26.05.2017 в 21:27)
| |
<table style="width: 500px; border: 1px solid #000">
<tr>
<td style="margin:5px;">
<div style="width: 80%; float: left;">75</div>
<div style="background-color:#F96; width:10%; float: right; text-aligh: right">sloy 1</div>
</td>
</tr>
</table>
|
| |
|
|
|
|
 3.7 Кб |
|
|
для: elenaki
(27.05.2017 в 12:58)
| | Результат в скриншоте. | |
|
|
|
|
|
|
|
для: Владимир55
(28.05.2017 в 00:13)
| |
<table style="width: 500px; border: 1px solid #000">
<tr>
<td style="margin:5px; text-align: center;">
75
<div style="background-color:#F96; float: left">sloy 2</div>
</td>
</tr>
</table>
|
| |
|
|
|
|
 4.2 Кб |
|
|
для: KPETuH
(31.05.2017 в 14:51)
| | К сожалению, это не срабатывает должным образом (скриншот).
Сработал вот такой код:
<td style="text-align:center; margin:5px; position: relative;">
<div style="background-color:#F96; width:16%; position: absolute;"> </div>
<div style="position: relative; text-align: center;">15</div>
</td>
|
Теперь проблема разрешилась, спасибо! | |
|
|
|
|
|
|
|
для: Владимир55
(31.05.2017 в 20:52)
| | Не знаю как вы делали я вижу совсем другую картину
https://jsfiddle.net/exjqv7kc/ | |
|
|
|