Так что это немного сложный вопрос. Пожалуйста, имейте в виду, что я не профессиональный веб-разработчик. Также я попробовал решения здесь и здесь
Изображение представляет собой макет того, как это выглядит на мобильном телефоне. На рабочем столе все выглядит нормально. Только когда я открою его на мобильном телефоне, возникнут какие-либо проблемы.
В идеале я бы хотел, чтобы таблица помещалась на экране с полосой прокрутки, но также беспокоит то, что панель навигации не имеет той же ширины, что и таблица.
Я попытался свести код только к элементам, классам и стилям. Пожалуйста, дайте мне знать, если есть что-то еще, что вы хотели бы увидеть
<head>
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin = "anonymous">
<!-- ✅ load jQuery ✅ -->
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<div id = "banner_element"></div>
<nav class = "navbar navbar-expand-lg navbar-dark bg-dark" style = "margin-top: 10px;">
<button class = "navbar-toggler"
type = "button"
data-toggle = "collapse"
data-target = "#navbarDiv"
aria-controls = "navbarDiv"
aria-expanded = "false"
aria-label = "Toggle navigation">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarDiv">
<ul class = "navbar-nav">
<li class = "nav-item">
<a class = "nav-link" href = "/">Click me</a>
</li>
</ul>
</div>
</nav>
<div class = "container-fluid" style = "margin-bottom: 100px;">
<div class = "row d-flex justify-content-center">
<h1 class = "mb-3">Page Title</h1>
</div>
<div style = "padding-bottom: 100px;">
<table class = "table" style = "overflow-x: visible; overflow-y: visible; height: 100%;" id = "myTable">
<thead>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</thead>
<tr id='${element["Id"]}'>
<td><button onclick = "location.href='/'">🔍</button></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</div>
</div>
</body>
Начиная с Bootstrap 4, они покрыли это (добавили отзывчивость).
Вы можете сделать таблицу отзывчивой с учетом точки останова:
Использование .table-responsive{-sm|-md|-lg|-xl}
по мере необходимости для создания адаптивных таблиц до определенной точки останова. С этой точки останова и выше таблица будет вести себя нормально и не будет прокручиваться по горизонтали.
И сделав таблицу всегда (на любой ширине экрана) отзывчивой (полоса прокрутки), добавив класс .table-responsive
на таблицу.
Для чего-то более сложного (создания) столбцов, которые переходят в новую строку и тому подобное, вы можете обратиться к этим адаптивным таблицам данных
Я только что накатил css по этой ссылке, и он отлично работал. Спасибо
Рад, что это помогает. :) На самом деле есть много ресурсов, которые используют стили для «обобщенных» элементов -> под обобщенными я подразумеваю html-элементы, которые используются (без использования классов) и фактически применяются независимо, если вы используете <table>
tr
td
Путем поиска «Отзывчивые данные таблицы», вы сможете найти больше
эта ссылка, которую вы разместили, потрясающая