5
Ho sito asp.net. Per qualche ragione, non posso usare javascript nel mio codice. Io uso questo codice per creare una tabella espandibile:Comprimi un elemento quando espandi un altro elemento solo css
html, body, form {
margin: 0 auto;
padding: 0;
text-align: left;
height: 100%;
top: 0;
bottom: 0;
overflow: hidden;
}
tr:nth-child(even) {
background: #F5F5F5;
}
tr:nth-child(odd) {
background: #DCDCDC;
}
tr:hover
{
background-color: #D3D3D3;
}
.toggle-box {
display: none;
}
.toggle-box + label {
cursor: pointer;
display: block;
font-weight: bold;
line-height: 25px;
margin-bottom: 2px;
margin-left: 5px;
background-color: #F1F8FF;
border-bottom: 1px solid gray;
}
.toggle-box + label:hover {
background-color: #C5ECFF;
}
.toggle-box + label + div {
display: none;
margin-bottom: 10px;
margin-left: 20px;
}
.toggle-box:checked + label + div {
display: block;
}
.toggle-box + label:before {
background-color: #66AEFF;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
color: #FFFFFF;
content: "+";
display: block;
float: left;
font-weight: bold;
height: 25px;
line-height: 25px;
margin-right: 5px;
text-align: center;
width: 25px;
}
.toggle-box:checked + label:before {
content: "\2212";
}
#matru {
border: 0;
text-align: left;
position: absolute;
top: 100px;
left: 300px;
}<div runat="server" id="sidebar" style="padding: 5px 0 0 5px;">
<input class='toggle-box' id='header1' type='checkbox' /><label for='header1'>Nguyễn Văn Tư</label><div>
<table style='text-align: left; width: 100%; vertical-align: middle;'>
<tr>
<td>Tên khách hàng</td>
<td>Nguyễn Văn Tư</td>
</tr>
<tr>
<td>Mã khách hàng</td>
<td>PC06LL0191387</td>
</tr>
<tr>
<td>Sery công tơ</td>
<td>14138734</td>
</tr>
<tr>
<td>Chỉ số cũ</td>
<td>194.000</td>
</tr>
<tr>
<td>Chỉ số mới</td>
<td>196.60</td>
</tr>
<tr>
<td>Sản lượng mới</td>
<td>2</td>
</tr>
</table>
</div>
<input class='toggle-box' id='header2' type='checkbox' /><label for='header2'>ĐInh Thị Tha</label><div>
<table style='text-align: left; width: 100%; vertical-align: middle;'>
<tr>
<td>Tên khách hàng</td>
<td>ĐInh Thị Tha</td>
</tr>
<tr>
<td>Mã khách hàng</td>
<td>PC06LL0182038</td>
</tr>
<tr>
<td>Sery công tơ</td>
<td>14140069</td>
</tr>
<tr>
<td>Chỉ số cũ</td>
<td>2050.000</td>
</tr>
<tr>
<td>Chỉ số mới</td>
<td>2104.10</td>
</tr>
<tr>
<td>Sản lượng mới</td>
<td>54</td>
</tr>
</table>
</div>
<input class='toggle-box' id='header3' type='checkbox' /><label for='header3'>Nguyễn Văn Nhựt</label><div>
<table style='text-align: left; width: 100%; vertical-align: middle;'>
<tr>
<td>Tên khách hàng</td>
<td>Nguyễn Văn Nhựt</td>
</tr>
<tr>
<td>Mã khách hàng</td>
<td>PC06LL0190775</td>
</tr>
<tr>
<td>Sery công tơ</td>
<td>14138746</td>
</tr>
<tr>
<td>Chỉ số cũ</td>
<td>2699.000</td>
</tr>
<tr>
<td>Chỉ số mới</td>
<td>2785.10</td>
</tr>
<tr>
<td>Sản lượng mới</td>
<td>86</td>
</tr>
</table>
</div>
<input class='toggle-box' id='header4' type='checkbox' /><label for='header4'>Mai Văn Lý</label><div>
<table style='text-align: left; width: 100%; vertical-align: middle;'>
<tr>
<td>Tên khách hàng</td>
<td>Mai Văn Lý</td>
</tr>
<tr>
<td>Mã khách hàng</td>
<td>PC06LL0182035</td>
</tr>
<tr>
<td>Sery công tơ</td>
<td>14138744</td>
</tr>
<tr>
<td>Chỉ số cũ</td>
<td>2581.000</td>
</tr>
<tr>
<td>Chỉ số mới</td>
<td>2631.70</td>
</tr>
<tr>
<td>Sản lượng mới</td>
<td>50</td>
</tr>
</table>
</div>
</div>codice completo qui: https://jsfiddle.net/pdhung197/3eomjp3m/
Ma voglio di più: Quando clicco su un elemento crollato, tale elemento sarà ampliato e altri l'elemento sarà collassato.
Questo progetto può utilizzare solo CSS, no JavaScript quindi non ho alcuna soluzione per farlo.
Questo jsfiddle con css inline e HTML non leggibile non va bene. Si prega di fornire un jsfiddle che riproduce il tuo problema ed è leggibile. Personalmente vorrei usare qualcosa del genere: http://webdesignerhut.com/create-pure-css-tabs/. – Senthe
puoi dirmi come hai aperto quel div? –
@HarshSanghani: Quel div è una barra laterale e fissa la posizione alla sinistra del corpo. –