Я знаю, что в Интернете есть много об этом, но я не могу заставить элементы внутри таблицы реагировать на приложение с горизонтальной прокруткой.
Я сделал сам стол отзывчивым, обернув всю свою таблицу в
<div style="overflow-x:auto;"></div>
Как вы можете видеть по правильным полям на боковой стороне стола.
Проблема: При уменьшении экрана текст выравнивается по центру, поэтому он остается в центревесь просмотр страницы, который необходимо прокрутить, он не перемещается в центр строки сжатой таблицы.
Я хочу, чтобы приложение выглядело как первое изображение, даже если страница сжимается.
Использование meta на viewport не делает таблицу отзывчивой.Я думаю, что это может быть файл html4, но я не уверен, как точно знать, основываясь на коде в файле, поэтому я включил HTML-код ниже.
Я пытался использовать медиа-запросы, такие как
@media only screen and (max-width: 1000px) {
body {
background-color: lightblue;
}
}
Просто чтобы проверить, могу ли я заставить его работать, но это даже не меняет цвет фона приложения, когда ширина1000px или меньше.
Неважно, если я укажу центр, влево или вправо, текст будет обрезан при уменьшении таблицы.
ОБНОВЛЕНИЕ:
Я разделил заголовок и содержимое на их собственные отдельные контейнеры, что позволяет добиться адаптивности заголовка, но это наносит ущерб дизайну,
Мне нужно, чтобы заголовок был такой же ширины, что и содержимое таблицы, поэтому я считаю, что заголовок и содержимое не могут находиться в своих собственных контейнерахчтобы достичь этого.
Мне бы хотелось, чтобы приложение выглядело так, как показано ниже:
Заголовок должен быть отзывчивым, оставаясь подключенным кобщая таблица.
Обновлено Проблема: Как сделать адаптивный заголовок таблицы, сохраняя при этом ширину заголовка всегда такой же, как и у остальной таблицы, независимо от настройки экрана.
Вот HTML:
<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<h2 id="title" class="hidden" align="center">OIT Facilities Costs<p id="subtitle">by location<p>
</h2>
</div>
<p>This application visualizes 3 kinds of data </p>
<br>
<div id="dashboard1-div" align="center">
<div id="charts1-div">
<div id="tablediv">
<div style="overflow-x:auto;">
<table class="container">
<tbody>
<tr id="tr-test">
<td>
<p id="table1-heading" class="hidden">OIT Work Order Maintenance Costs</p>
<button id="OIT-btn" onclick="OITbutton()">View</button>
</td>
</tr>
<tbody>
<!-- .....other table bodies excluded for clarity -->
</table>
</div>
</div>
</div>
</div>
</body>
</html>
<?!= HtmlService.createHtmlOutputFromFile('JavaScript').getContent(); ?>
Соответствующий CSS:
#tablediv{
padding-left: 25px;
padding-right: 25px;
}
#tr-test{
background-color: #2C3446;
max-width: 100%
}
#table1-heading{
text-align: center;
}
#OIT-btn, #elec-btn, #maint-btn{
display: block;
margin: auto;
}