my html pageтаблицы данных, реагирующие без использования самозагрузки
Я хотел бы создать таблицу без использования самозагрузки тем способом, который должен иметь маржинального-право: 0 и когда мы свернуть окно Я хочу, чтобы таблица таким образом.
<div id = "background"></div>
<div class = "header">
<div class = "headerItems">
<div class = "items">
<div class = "items-navigation-back"><i class = "ion ion-arrow-left-c"></i></div>
<div class = "one"><i class = "ion ion-ios-pulse-strong"></i></div>
<div class = "two"><i class = "ion ion-speedometer"></i></div>
<div class = "title"><span class = "title">{{['Device','Doctor','Settings'][0]}}</span></div>
<div class = "search">
<input type = "search" ng-model = "searchText" placeholder = "search-items"></input>
</div>
</div>
</div>
</div>
<div class = "body-content">
<div class = "bodyItems">
<div class = "rooms-one">
<div class = "rooms-one-partone">
<div class = "rooms-one-partone-icon"><img src = "icons/data/48.png"></img></div>
<div class = "rooms-one-partone-title"><p>data</p></div>
<div class = "rooms-one-partone-text"><p>button</p></div>
<div class = "rooms-one-partone-switch"></div>
</div>
</div>
</div>
</div>
И CSS:
html,body{
margin: 0;
padding: 0;
}
#background{
right: 0;
background-image: url(../images/bg.jpg);
width: 768px;
height: 100%;
position: fixed;
}
.header{
padding: 3px;
position: fixed;
border: 1px solid silver;
max-width: 768px;
right: 0;
overflow: hidden;
}
.headerItems{
margin-left: 0;
margin-right: 0;
}
.items{
background: white;
table-layout: fixed;
width: 100%;
display: table;
border-spacing: 10px 0;
}
.navigation-back{
width: 20px;
color: black;
font-size: 35px;
vertical-align: top;
display: table-cell;
}
.icon-one{
width: 100px;
color: white;
background: yellow;
font-size: 35px;
display: table-cell;
border-radius: 10px;
}
.icon-two{
background: green;
width: 100px;
color: white;
font-size: 35px;
display: table-cell;
border-radius: 10px;
}
.title{
text-align: center;
font-size: 120%;
display: table-cell;
vertical-align: middle;
}
.search{
text-align: right;
vertical-align: middle;
display: table-cell;
}
Просьба указать код. Из ваших диаграмм не ясно, являются ли это отдельными таблицами или одной отдельной таблицей, а также то, что верхний и нижний колонтитулы являются частью вашей таблицы (таблиц). – Shaggy
им извините за замешательство. только основное содержимое, кроме заголовка и нижнего колонтитула, - все таблицы. – learner
Вам все равно нужно предоставить некоторый код, иллюстрирующий то, что вы пробовали до сих пор, и выделив проблемы, с которыми вы столкнулись. – Shaggy