преобразование 6 строк таблицы в 2 строки и 3 столбца с использованием существующего класса

#javascript #jquery #css

#javascript #jquery #css

Вопрос:

Есть ли способ преобразовать существующую таблицу из 6 строк в 2 строки и 3 столбца, используя существующий класс. У меня нет доступа к файлам html. Можно добавить таблицу стилей только к существующим классам

 <table cellspacing="0">
        <tbody><tr>
              <td class="class1"><label for="radio0">
                <input type="radio" checked="" value="1" name="name" id="radio0">1
                </label></td>
            </tr>
        <tr>
              <td class="class2"><label for="radio1">
                <input type="radio" value="8" name="name" id="radio1">2
                </label></td>
            </tr>
        <tr>
              <td class="class3"><label for="radio2">
                <input type="radio" value="12" name="name" id="radio2">3
                </label></td>
            </tr>
        <tr>
              <td class="class4"><label for="radio3">
                <input type="radio" value="4" name="name" id="radio3">4
                </label></td>
            </tr>
        <tr>
              <td class="class5"><label for="radio4">
                <input type="radio" value="7" name="name" id="radio4">5
                </label></td>
            </tr>
        <tr>
              <td class="class6"><label for="radio5">
                <input type="radio" value="5" name="name" id="radio5">6
                </label></td>
            </tr>

        </tbody></table>
  

Комментарии:

1. Я думаю, вам нужно использовать JS для решения этой проблемы.

Ответ №1:

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

CSS:

 .class3{
    position:absolute;
        margin-left: 40px;
    top: 9px;
}
.class4{
    position:absolute;
    margin-left: 40px;
    top: 30px;
}
.class5{
    position:absolute;
        margin-left: 80px;
    top: 9px;
}
.class6{
    position:absolute;
    margin-left: 80px;
    top: 30px;
}
  

Комментарии:

1. Я также рад, что это сработало 🙂 Возможно, вы обнаружите, что решение на JS будет работать лучше в будущем, если у вас есть к нему доступ!