отзывчивый вертикальный разделитель css

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

CSS это

.divider{
position: absolute;
left:30.5%;
top:6%;
bottom:25%;
border-left:2px solid #333;
overflow:hidden;
}

и соответствующий html

<table width="100%">
<tr> 
<td>
this is test
</td>
<td><div class="divider"></div></td>
<td>
This is test2
</td>
</tr>
</table>

Проблема в том, что когда я меняю позицию с абсолютной на любую другую в css, она скрывает разделитель.


css divider
person Bangash    schedule 07.01.2014    source источник

Ответы (1)


arrow_upward
3
arrow_downward

В вашем случае .... это происходит, потому что я чувствую, что вы даете позицию только div, а не содержащему <td> .... сначала дайте этому родителю td позицию

добавьте высоту, ширину к html,body и все готово...

решение

CSS

html, body {
    height:100%; /* added */
    width:100%;/* added */
}
.divider {
    position: relative; /* changed*/
    left:30.5%;
    top:6%;
    bottom:25%;
    border-left:2px solid #333;
    overflow:hidden;
}
td.r {
    position:absolute;/* added */
    height:100%;/* added */
    width:100%;/* added */
}

HTML

<table width="100%" border=1>
    <tr>
        <td>this is test</td>
        <td class="r">       <!-- notice the added class-->
            <div class="divider"></div>
        </td>
        <td>This is test2</td>
    </tr>
</table>

ИЗМЕНИТЬ

Гораздо более простой и понятный способ создать разделитель — использовать td только для разделителя, а не div....проверьте эту демонстрацию

Удалите div, создающий разделитель, и вместо этого добавьте класс divider к самому td!

<table width="100%" border=0>
    <tr>
        <td>this is test</td>
        <td class="divider"></td>
        <td>This is test2</td>
    </tr>
</table>

CSS

td {
    text-align:center
}
td.divider {
    position:absolute;
    height:100%;
    width:1px;
    border:1px solid #000;
    background:#000;
}
person NoobEditor    schedule 07.01.2014
comment
Извини, брат, это не сработало. Я уже пробовал. Когда я меняю положение делителя, он полностью исчезает. - person Bangash; 07.01.2014
comment
Вы пытались передать position содержащему td... в моей демонстрации это работает!! - person NoobEditor; 07.01.2014
comment
Спасибо за быстрые ответы бро. Это тоже не сработало. Пожалуйста, проверьте ссылку предварительного просмотра, которой я поделился в основной теме. - person Bangash; 07.01.2014
comment
давайте продолжим это обсуждение в чате - person NoobEditor; 07.01.2014