CSS / Query: Помещение кликабельной иконки между th и td таблицы, без использования второй таблицы - PullRequest
0 голосов
/ 07 марта 2019

У меня есть стандартная таблица, которая выглядит следующим образом:

<table>
    <thead>
        <tr>
            <th>column1</th>
            <th>column2</th>
            <th>column3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data1</td>
            <td>data2</td>
            <td>data3</td>
        </tr>
        <tr>
            <td>data1</td>
            <td>data2</td>
            <td>data3</td>
        </tr>
        <tr>
            <td>data1</td>
            <td>data2</td>
            <td>data3</td>
        </tr>
    </tbody>
</table>

Я хотел бы добавить перекрывающуюся кликабельную иконку, которая бы сидела между каждым th и td прямо под ним.

Вот изображение:

enter image description here

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

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

Чтобы преодолеть это, мне пришлосьсоздайте еще одну невидимую таблицу + thead + th в верхней части исходной таблицы, с иконками в них, и заставьте вторую таблицу двигаться и реагировать точно так же, как и первая.Но это чертовски утомительно и просто делает сценарий излишне сложным.Я должен синхронизировать две таблицы для каждого события, которое действует в целом.Это нормально, но код - настоящий беспорядок.

Существует ли относительно простое ONE TABLE решение моей проблемы?HTML, CSS или jQuery, мне все равно, поскольку он работает простым способом, так что я могу только сосредоточиться на столе и ожидать, что значок будет вести себя соответствующим образом.

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

Спасибо.

PS: в идеале было бы лучше иметь промежуточную ячейку с высотой 0px ниже каждой th (другими словами, целое новое значение tr), выделенную для этих значков, но значок должен иметь z-индекс больше, чем его контейнерячейка, так что значок должен визуально перекрывать верхний и нижний тд (см. рисунок выше).Более того, весь значок должен оставаться активным за пределами области его контейнера.Но я сомневаюсь, что у меня может быть значок с z-индексом, который больше, чем его контейнер, могу я?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...