Поместите кнопку справа от каждой строки с помощью overflow-x
Я хочу добавить кнопку рядом с каждой строкой моей таблицы. Поворот сюжета, таблица находится внутри div с фиксированной шириной и overflow-x для отзывчивости. Я хочу, чтобы кнопка отображалась рядом с каждой строкой вне контейнера div.
С моим текущим кодом кнопка отображается рядом со строкой, но остается в фиксированном div.
<div style = "width:100px; overflow-x: scroll;">
<table>
<thead>
<tr>
<th>ID</th><th>ID</th><th>ID</th><th>ID</th><th>ID</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td><td>1</td><td>2</td><td>3</td><td>4</td>
<td>
<div style = "position:relative; width:0px;">
<button style = "position:absolute;left:10px;">Edit</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>Просто избегайте абсолютной позиции в таблицах и оставьте кнопку в простом теге td. Добавьте белый цвет фона в последние ячейки в таблицах. Будьте проще, когда это возможно.
Хорошо, я думаю, мне придется создать отдельный контейнер для кнопок. Я хотел избежать этого. чтобы высота всегда совпадала. Или я соглашаюсь с тем, чтобы пользователь всегда прокручивал, чтобы добраться до элементов управления.
вам, вероятно, понадобится какой-то плагин - я обычно использую таблицы данных: datatables.net/extensions/fixedcolumns/examples/initialisation/…
@pete Раньше я использовал таблицы данных. Не знал, что у них есть выбор. Спасибо. Это привело меня к ответу. Мне нужно добавить style = "position: sticky; right: 0px" в последний столбец. См. jsfiddle.net/ЛуиУэлле/uLm43gjt/2.
Ответы 1
Решение использует липкое положение в последнем столбце.
position: sticky; right: 0px
Ссылка: Школы W3.
Вот фрагмент:
<div style = "width:100px; overflow-x: scroll;">
<table>
<thead>
<tr>
<th>ID</th><th>ID</th><th>ID</th><th>ID</th><th>ID</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td><td>1</td><td>2</td><td>3</td><td>4</td>
<td style = "position: sticky; right: 0px">
<button>Edit</button>
</td>
</tr>
</tbody>
</table>
</div>
что касается вашей проблемы, вы не можете сделать это, на мой взгляд, без вложения этого div и кнопки внутри родительского контейнера. Потому что, если overflow-x настроен на прокрутку, ничего не выйдет за пределы прокрутки справа.