I have a title and when i hoverd i would like that it would show two difrent tables. Is that possible?
I tride this one:
#ArijsLieve:hover ~ #arijslievetable ~ #arijslievefototable { display: block; }
but this only shows the #arijslievefototable.
my full code in html:
<div id="ArijsLieve">
<h3> Arijs Lieve </h3>
</div>
<table id="arijslievetable">
<tr>
<td> Kleuters 3j woensdag </td>
</tr>
<tr>
<td> Kleuters 4j woensdag </td>
</tr>
<tr>
<td> Kleuters 5j woensdag </td>
</tr>
<tr>
<td> Team acro competitie </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> E-mail: </td>
</tr>
<tr>
<td> jenskemeert#hotmail.com </td>
</tr>
</table>
<table id="arijslievefototable">
<tr>
<td> <img src="lieve_arijs.jpg" alt="lieve_arijs" width=100 height=100 /> </td>
</tr>
</table>
and css:
#ArijsLieve{background: #333; color: white; width: 100px; text-align: center; position: relative; top: -300px; left: 265px; cursor: pointer; }
`#arijslievetable{ background: #333; color: white; width: 810px; position: absolute; top: 701px; left: 273px; display: none; }
#ArijsLieve:hover ~ #arijslievetable ~ #arijslievefototable { display: block; }
#arijslievefototable{ background: #333; width: 1px; position:absolute; top: 701px; left: 976px; display: none;}
should be this
#ArijsLieve:hover ~ #arijslievetable,
#ArijsLieve:hover ~ #arijslievefototable { display: block; }
Related
I'm able to make the first row of an HTML table frozen similar to Freeze Panes in MS Word, but not sure how to do it for the last row in the table.
I have this code:
.myTable {
overflow-y: scroll;
height: 650px;
display: block;
}
.table-header-col {
position: sticky;
top: 0px;
background-color: #f5f6f8;
}
<table class="myTable">
<thead>
<tr style="height: 55px; margin: 0px;">
<th class="table-header-col"></th>
<th class="table-header-col">Description </th>
<th class="table-header-col">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td>Bananas</td>
<td>2.00</td>
</tr>
<tr>
<td> </td>
<td>Apples</td>
<td>3.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
</tbody>
</table>
I only included two rows here for an example, but if I have 50 rows, the user will have to scroll to get to the last row which contains a total. Is it possible to make that row Freeze similar to the way I'm making the header row freeze above?
are you want something like this :)
.myTable {
overflow-y: scroll;
height: 650px;
display: block;
}
table tbody tr:last-child{
position: sticky;
top: 0;
background-color: #f5f6f8;
}
<table class="myTable">
<thead>
<tr style="height: 55px; margin: 0px;">
<th class="table-header-col"></th>
<th class="table-header-col">Description </th>
<th class="table-header-col">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td>Bananas</td>
<td>2.00</td>
</tr>
<tr>
<td> </td>
<td>Apples</td>
<td>3.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
<tr>
<td> </td>
<td>Total:</td>
<td>5.00</td>
</tr>
</tbody>
</table>
you can try this one.
worked for me:
table{
width: 400px;
position: relative;
background: transparent;
display: block;
padding-bottom: 42px;
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
table ::-webkit-scrollbar {
width: 0px;
}
table > thead {
height: 30px;
text-align: end;
position: sticky;
top: 0;
display: table;
width: 100%;
background: green;
}
table > thead > tr{
height: 30px;
background-color: #009879;
color: #ffffff;
text-align: left;
}
table > thead > tr > th{
text-align: end;
}
table > tbody{
height: 200px;
display: block;
width: 100%;
overflow: auto;
background: pink;
}
table > tbody > tr{
height: 30px;
text-align: end;
display: table;
width: 100%;
}
table > thead > tr > th,
table > tbody > tr > td{
padding: 12px 15px;
}
table > tbody > tr{
border-bottom: 1px solid #dddddd;
}
table > tbody > tr:nth-of-type(even) {
background-color: #f3f3f3;
}
table > tbody > tr:last-of-type {
border-bottom: 2px solid #009879;
}
table > tbody > tr:last-child{
position: absolute;
bottom: 0;
}
<table>
<thead>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
</thead>
<tbody>
<tr>
<td>text1.1</td>
<td>text1.2</td>
<td>text1.3</td>
</tr>
<tr>
<td>text2.1</td>
<td>text2.2</td>
<td>text2.3</td>
</tr>
<tr>
<td>text3.1</td>
<td>text3.2</td>
<td>text3.3</td>
</tr>
<tr>
<td>text4.1</td>
<td>text4.2</td>
<td>text4.3</td>
</tr>
<tr>
<td>text5.1</td>
<td>text5.2</td>
<td>text5.3</td>
</tr>
<tr>
<td>text6.1</td>
<td>text6.2</td>
<td>text6.3</td>
</tr>
<tr>
<td>text7.1</td>
<td>text7.2</td>
<td>text7.3</td>
</tr>
<tr>
<td>text8.1</td>
<td>text8.2</td>
<td>text8.3</td>
</tr>
<tr>
<td>text9 .1</td>
<td>text9 .2</td>
<td>text9 .3</td>
</tr>
</tbody>
</table>
I am trying to make a table mobile responsive. The first thing I would love to do is to decrease the width size of the table headings and then enable the table data to have one complete row for each data.
I am trying to get my table to look like the attached picture on mobile.
.email-table table{
margin-left: 40px;
font-family: 'Roboto', sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
td{
font-size: 1.2rem;
}
td:last-of-type{
font-weight: 700;
}
.attachment{
display: flex;
justify-content: center;
width: 20%;
align-items: center;
}
.first-clip span:last-of-type{
margin-right: 20px;
}
.last-clip{
margin-left: 25px;
}
.attachment span:last-of-type{
flex-shrink: 0;
}
.attachment span:first-of-type img{
width: 20px;
height: 20px;
}
.text-attachment{
display: flex;
justify-content: space-around;
}
.text-attachment span:first-of-type{
transform: translateX(-18px);
}
.second-text{
transform: translateX(5px);
}
.text-attachment span:last-of-type{
border: 1px solid #ccc;
background-color: #5E5D5D;
color: white;
border-radius: 5px;
padding: 0px 5px;
}
.second-text span:last-of-type{
transform: translateX(-10px);
}
td img{
width: 20px;
height: 20px;
transform: translateX(-30px);
}
th{
background-color: #EEEDED;
border-top: 3px solid #dddddd;
border-bottom: 3px solid #dddddd;
}
th:not(:last-child){
color: #5E5D5D;
}
.date>span img{
height: 10px;
width: 10px;
padding-left: 3px;
}
tr:not(:first-of-type):hover{
cursor: pointer;
color: blue;
background-color: #EEEDED;
}
<div class="email-table">
<table>
<tr>
<th>From</th>
<th>To</th>
<th>Subject</th>
<th class="date">Date <span><img src="./assets/icon_arrow01.svg" alt=""></span></th>
</tr>
<tr>
<td>aaa#example.com</td>
<td>zzz.zzz#example.com</td>
<td>[ HR-888 ] Notice of official announcement</td>
<td>0:20</td>
</tr>
<tr>
<td>bbb.bbbb#exam... </td>
<td>yyy#example.com</td>
<td>[web:333] "Web Contact"</td>
<td>0:10</td>
</tr>
<tr>
<td>ccc#example.com </td>
<td>
<div class="text-attachment">
<span>xxx#example.com, ...</span>
<span>+1</span>
</div>
</td>
<td>Happy New Year! Greetings for the New Year.</td>
<td>
<div class="attachment first-clip">
<span><img src="./assets/icon_clip.svg" alt=""></span>
<span>0:00</span>
</div>
</td>
</tr>
<tr>
<td>ddd.dddd#exam...</td>
<td>
<div class="text-attachment second-text">
<span>vvv.vvv#example.com, ... </span>
<span>+1</span>
</div>
</td>
<td>[HR-887(Revised: Office Expansion Project Team)] Notice of off... </td>
<td>Jan 01 </td>
</tr>
<tr>
<td>eee#example.com</td>
<td>
<div class="text-attachment">
<span>sss#example.com, .... </span>
<span>+2</span>
</div>
</td>
<td>[Github] Logout page</td>
<td>Jan 01</td>
</tr>
<tr>
<td>fff.ffff#example.c... </td>
<td>qqq.qqq#example.com</td>
<td>［dev］ Postfix 3.1.12 / 3.2.9 / 3.3.4 / 3.4.5</td>
<td>Jan 01</td>
</tr>
<tr>
<td>ggg#example.com </td>
<td>ppp#example.com</td>
<td>Re: [Github] Brush-up on loading animation </td>
<td>Jan 01</td>
</tr>
<tr>
<td>hhh.hhh#examp...</td>
<td>ooo.ooo#example.com</td>
<td>Workplace Summary for sample, Inc.: Jun 2 - Jun 9</td>
<td>
<div class="attachment">
<span><img src="./assets/icon_clip.svg" alt=""></span>
<span>Jan 01</span>
</div>
</td>
</tr>
<tr>
<td>iii#example.com</td>
<td>nnn#example.com</td>
<td>I love you</td>
<td>
<div class="attachment last-clip">
<span><img src="./assets/icon_clip.svg" alt=""></span>
<span>2019/12/31</span>
</div>
</td>
</tr>
<tr>
<td>Pablo-Diego-...</td>
<td>Pablo-Diego-José-Francisc...
</td>
<td>[info:888] ABC EQUIPMENT COMPANY</td>
<td>2019/12/31</td>
</tr>
</table>
</div>
I, first of all, tried to make the header much smaller but that does not even work. I am totally lost at the steps I need to take to make this look good on mobile.
The trick for this sort of layout is to throw away the default table styling entirely.
Use display: contents to stop the tbody element from generating a box. Then use display: flex on the table to make it lay out the tr elements in a non-tabular column.
Then each tr can be styled as a CSS Grid, and the various elements positioned on that.
#media screen and (max-width: 1000px) {
body {
background: #AAA
}
table {
display: flex;
flex-direction: column;
margin: 0 10%;
background: white;
}
tbody,
tfoot {
display: contents;
}
thead {
display: none;
}
tr {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 1px 1px;
grid-template-areas: "From Date" "To Date" "Subject Date";
border-bottom: solid #aaa 1px;
}
td {
padding: 3px;
}
td:nth-child(1) {
grid-area: From;
}
td:nth-child(2) {
grid-area: To;
}
td:nth-child(3) {
grid-area: Subject;
}
td:nth-child(4) {
grid-area: Date;
text-align: right;
}
}
<div class="email-table">
<table>
<thead>
<tr>
<th>From</th>
<th>To</th>
<th>Subject</th>
<th class="date">Date <span><img src="./assets/icon_arrow01.svg" alt=""></span></th>
</tr>
</thead>
<tr>
<td>aaa#example.com</td>
<td>zzz.zzz#example.com</td>
<td>[ HR-888 ] Notice of official announcement</td>
<td>0:20</td>
</tr>
<tr>
<td>bbb.bbbb#exam... </td>
<td>yyy#example.com</td>
<td>[web:333] "Web Contact"</td>
<td>0:10</td>
</tr>
<tr>
<td>ccc#example.com </td>
<td>
<div class="text-attachment">
<span>xxx#example.com, ...</span>
<span>+1</span>
</div>
</td>
<td>Happy New Year! Greetings for the New Year.</td>
<td>
<div class="attachment first-clip">
<span><img src="./assets/icon_clip.svg" alt=""></span>
<span>0:00</span>
</div>
</td>
</tr>
<tr>
<td>ddd.dddd#exam...</td>
<td>
<div class="text-attachment second-text">
<span>vvv.vvv#example.com, ... </span>
<span>+1</span>
</div>
</td>
<td>[HR-887(Revised: Office Expansion Project Team)] Notice of off... </td>
<td>Jan 01 </td>
</tr>
<tr>
<td>eee#example.com</td>
<td>
<div class="text-attachment">
<span>sss#example.com, .... </span>
<span>+2</span>
</div>
</td>
<td>[Github] Logout page</td>
<td>Jan 01</td>
</tr>
<tr>
<td>fff.ffff#example.c... </td>
<td>qqq.qqq#example.com</td>
<td>［dev］ Postfix 3.1.12 / 3.2.9 / 3.3.4 / 3.4.5</td>
<td>Jan 01</td>
</tr>
<tr>
<td>ggg#example.com </td>
<td>ppp#example.com</td>
<td>Re: [Github] Brush-up on loading animation </td>
<td>Jan 01</td>
</tr>
<tr>
<td>hhh.hhh#examp...</td>
<td>ooo.ooo#example.com</td>
<td>Workplace Summary for sample, Inc.: Jun 2 - Jun 9</td>
<td>
<div class="attachment">
<span><img src="./assets/icon_clip.svg" alt=""></span>
<span>Jan 01</span>
</div>
</td>
</tr>
<tr>
<td>iii#example.com</td>
<td>nnn#example.com</td>
<td>I love you</td>
<td>
<div class="attachment last-clip">
<span><img src="./assets/icon_clip.svg" alt=""></span>
<span>2019/12/31</span>
</div>
</td>
</tr>
<tr>
<td>Pablo-Diego-...</td>
<td>Pablo-Diego-José-Francisc...
</td>
<td>[info:888] ABC EQUIPMENT COMPANY</td>
<td>2019/12/31</td>
</tr>
</table>
</div>
Why z-index is not working inside table?
I have a table with 4 column that one column is positioned outside of table, so that it seem as tabs, but I cannot hidden right side of tabs under table.
Please see this code snippet:
div {
position: relative;
z-index: 5;
width: 70%;
margin: auto;
height: 500px;
background-color: red;
}
table {
border: none;
border-spacing: 0 11px;
width: 100%;
table-layout: fixed;
}
td.tab {
background-color: white;
padding: 15px;
width: 20%;
position: absolute;
z-index: -15;
right: 90%;
}
td.plan {
padding: 15px;
width: 33.3%;
text-align: center;
}
<div class="bottom">
<table>
<tbody>
<tr>
<td class="tab">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
</tr>
<tr>
<td class="tab">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
</tr>
<tr>
<td class="tab">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
</tr>
</tbody>
</table>
</div>
fiddle code
EDIT: I no want tabs, I will add our plans to site.
I update fiddle, I want remove this shadow on right side of tabs.
Your td tabs are positioned absolutely but relative to the div.bottom.
Easiest is to remove the z-index on the parent.
Fiddle: https://jsfiddle.net/abhitalks/bxzomqct/7/
Snippet:
div {
position: relative;
width: 70%;
margin: auto;
height: 500px;
background-color: red;
}
table {
border: none;
border-spacing: 0 11px;
width: 100%;
table-layout: fixed;
}
td.tab {
background-color: #eee;
padding: 15px;
width: 20%;
position: absolute;
z-index: -15;
right: 90%;
}
td.plan {
padding: 15px;
width: 33.3%;
text-align: center;
}
<div class="bottom">
<table>
<tbody>
<tr>
<td class="tab">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
</tr>
<tr>
<td class="tab">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
</tr>
<tr>
<td class="tab">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
</tr>
</tbody>
</table>
</div>
Better still, to avoid confusions, Just wrap your entire construct in another div and position the tabs relative that outer div.
div.top {
position: relative;
width: 70%;
margin: auto;
}
div.bottom {
background-color: red; z-index: 50; height: 500px;
}
table {
border: none;
border-spacing: 0 11px;
width: 100%;
table-layout: fixed;
}
td.tab {
background-color: #eee;
padding: 15px;
width: 20%;
position: absolute;
z-index: -150;
right: 90%;
}
td.plan {
padding: 15px;
width: 33.3%;
text-align: center;
}
<div class="top">
<div class="bottom">
<table>
<tbody>
<tr>
<td class="tab">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
</tr>
<tr>
<td class="tab">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
</tr>
<tr>
<td class="tab">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
</tr>
</tbody>
</table>
</div>
</div>
Your Fiddle: https://jsfiddle.net/abhitalks/bxzomqct/6/
Why this happens:
This is because of the stacking context that is generated by the positioned elements. Although, the stacking order within a stacking context specifies the negative z-index values to be painted first, it is however limited to that same stacking context.
Reference: https://www.w3.org/TR/CSS2/zindex.html
Reading: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
So, with a negative z-index, your tabs should appear behind its parents (div.bottom in this case). And it will, as it is in same stacking context.
However, as soon as you give a z-index value to the div.bottom, it creates a new stacking context which confines all of its child elements to a particular place in the stacking order. This causes it not to appear in front of the tabs irrespective of the z-index of tabs.
Note that the specs do not explain this verbatim, and has to be referred to with other references and docs to develop an understanding. It's tricky.
Here is a good article you can refer to: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
In your example, z-index won't work because you use it with two elements which are not in the same level in the DOM.
To make it works, you can place the two element with relative or absolute position in the same DOM level.
Doc about z-index: https://stackoverflow.com/a/2305711/6028607
div {
position: relative;
z-index: 5;
width: 70%;
margin: auto;
height: 500px;
background-color: red;
}
table {
border: none;
border-spacing: 0 11px;
width: 100%;
table-layout: fixed;
}
td.tab {
background-color: white;
padding: 15px;
width: 20%;
position: absolute;
z-index: -15;
right: 90%;
}
td.plan {
padding: 15px;
width: 33.3%;
text-align: center;
z-index: 0;
position: relative;
}
.test { z-index: 0; position: absolute; top: 200px; background:yellow; width: 100%; left: 0; height: 40px; padding: 10px; }
<div class="bottom">
<table>
<tbody>
<tr>
<td class="plan">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
</tr>
<tr>
<td class="tab">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
</tr>
<tr>
<td class="tab">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
<td class="plan">test</td>
</tr>
</tbody>
</table>
</div>
<div class="test">test</div>
I need my last div ("content"), whose height can vary, to expand to fill the container div but not expand beyond it. If the content div's contents won't fit, it should simply scroll with overflow-y: auto
However, I can't seem to contain the content div. I've tried a host of css without success and would appreciate some help.
UPDATE
I see I left out one important piece of info. I do not want to specify a fixed height of the "content" div since the height of the container can vary (it is resizable). I would have to calculate and adjust the height of the content with each mousemove (which I am trying to avoid).
Here is a fiddle
#container {
max-height: 350px;
width: 200px;
border: 2px solid black;
display: block;
position: absolute;
}
#title {
height: 100px;
width: 100%;
border: 2px solid red;
}
#tabs {
height: 100px;
width: 100%;
border: 2px solid green;
}
#content {
height: 100%;
width: 100%;
border: 2px solid blue;
overflow-y: auto;
}
<div id="container">
<div id="title">
Title
</div>
<div id="tabs">
Tabs
</div>
<div id="content">
<table>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
</table>
</div>
</div>
Explanation:
Added overflow: hidden; to #container and added
overflow-y: auto; to #content attribute
Scroll-Demo
#container {
max-height: 350px;
width: 200px;
border: 2px solid black;
display: block;
position: relative;
overflow: hidden;
}
#title {
height: 100px;
width: 100%;
border: 2px solid red;
}
#tabs {
height: 100px;
width: 100%;
border: 2px solid green;
}
#content {
height: 100px;
width: 100%;
border: 2px solid blue;
overflow-y: auto;
}
<div id="container">
<div id="title">
Title
</div>
<div id="tabs">
Tabs
</div>
<div id="content">
<table>
<tr>
<td>
<label>ABC
</label>
</td>
</tr>
<tr>
<td>
<label>ABC
</label>
</td>
</tr>
<tr>
<td>
<label>ABC
</label>
</td>
</tr>
<tr>
<td>
<label>ABC
</label>
</td>
</tr>
<tr>
<td>
<label>ABC
</label>
</td>
</tr>
<tr>
<td>
<label>ABC
</label>
</td>
</tr>
<tr>
<td>
<label>ABC
</label>
</td>
</tr>
<tr>
<td>
<label>ABC
</label>
</td>
</tr>
<tr>
<td>
<label>ABC
</label>
</td>
</tr>
<tr>
<td>
<label>ABC
</label>
</td>
</tr>
</table>
</div>
</div>
height:100% is preventing that. Specify height, for example, in pixels.
Or use height: calc(100% - 208px);, to calculate the dynamic height. Don't forget to change max-height to height.
#container {
height: 350px;
width: 200px;
border: 2px solid black;
display: block;
position: absolute;
}
#title {
height: 100px;
width: 100%;
border: 2px solid red;
}
#tabs {
height: 100px;
width: 100%;
border: 2px solid green;
}
#content {
height: calc(100% - 208px);
width: 100%;
border: 2px solid blue;
overflow-y: scroll;
}
<div id="container">
<div id="title">
Title
</div>
<div id="tabs">
Tabs
</div>
<div id="content">
<table>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
</table>
</div>
</div
Here is a bit of a more fun way to do it. Removed your need for putting width 100% all over the place as well!
#container {
max-height: 350px;
width: 200px;
border: 2px solid black;
display: flex;
flex-direction: column;
position: absolute;
}
#title {
flex: 0 0 100px;
border: 2px solid red;
}
#tabs {
flex: 0 0 100px;
border: 2px solid green;
}
#content {
flex: 1 1 auto;
border: 2px solid blue;
overflow-y: auto;
}
<div id="container">
<div id="title">
Title
</div>
<div id="tabs">
Tabs
</div>
<div id="content">
<table>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
</table>
</div>
</div>
You can do that using display: flex.
#container {
max-height: 350px;
width: 200px;
border: 2px solid black;
position: absolute;
display: flex; /* Added */
flex-direction: column; /* Added */
}
#title {
height: 100px;
width: 100%;
border: 2px solid red;
}
#tabs {
height: 100px;
width: 100%;
border: 2px solid green;
}
#content {
height: 100%;
width: 100%;
border: 2px solid blue;
overflow-y: auto;
flex: auto; /* Added, this container should stretch in the remaining space */
}
Working Fiddle
You wanted only the last table to scroll, right?
#container {
max-height: 350px;
width: 200px;
border: 2px solid black;
display: block;
position: absolute;
margin-bottom: 15px; /*just to see the bottom*/
}
#title {
height: 100px;
width: 100%;
border: 2px solid red;
box-sizing: border-box;
}
#tabs {
height: 100px;
width: 100%;
border: 2px solid green;
box-sizing: border-box;
}
#content {
max-height: 138px;
box-sizing: border-box;
width: 100%;
border: 2px solid blue;
overflow-y: auto;
}
<div id="container">
<div id="title">
Title
</div>
<div id="tabs">
Tabs
</div>
<div id="content">
<table>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
</table>
</div>
</div>
HTML Code
<div id="container">
<div id="title">
Title
</div>
<div id="tabs">
Tabs
</div>
<div id="content">
<table>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
<tr>
<td>
<label>ABC</label>
</td>
</tr>
</table>
</div>
</div>
Css
#container {
max-height: 350px;
width: 200px;
border: 2px solid black;
display: block;
position: absolute;
}
#title {
height: 100px;
width: 100%;
border: 2px solid red;
}
#tabs {
height: 100px;
width: 100%;
border: 2px solid green;
}
#content {
height: 100px;
width: 100%;
border: 2px solid blue;
overflow-y: auto;
}
fiddle link
I have asp.net site. By some reason, I can't use javascript in my code. I use this code for create a expansible table:
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>
Full code here: https://jsfiddle.net/pdhung197/3eomjp3m/
But I want more: When I click on an collapsed element, that element will be expanded and other element will be collapsed.
This project can use only CSS, no JavaScript so I have no solution to do it.
The trick is simple. Just replace the input from checkbox to radio and add attribute name with same value in all of the inputs.
This changes mean that there is just one input that can be checked in the same time. So, if you click to one item all the rest will be closed.
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;
}
[type="reset"] {
border: 0;
width: 100%;
text-align: inherit;
padding: 0;
font: inherit;
margin: 0;
outline:0 !important;
}
.toggle-box + label,
[type="reset"]{
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 + button {
display:none;
}
.toggle-box:checked + label {
display:none;
}
.toggle-box:checked + label + button {
display:block;
}
.toggle-box + label + button + div {
display: none;
margin-bottom: 10px;
margin-left: 20px;
}
.toggle-box:checked + label + button + div {
display: block;
}
.toggle-box + label:before,
[type="reset"]: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;
}
<form>
<div runat="server" id="sidebar" style="padding: 5px 0 0 5px;">
<input class='toggle-box' id='header1' type="radio" name="radio" /><label for='header1'>Nguyễn Văn Tư</label>
<button type="reset">Nguyễn Văn Tư</button>
<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='radio' name="radio" /><label for='header2'>ĐInh Thị Tha</label>
<button type="reset">ĐInh Thị Tha</button>
<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='radio' name="radio" /><label for='header3'>Nguyễn Văn Nhựt</label>
<button type="reset">Nguyễn Văn Nhựt</button>
<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='radio' name="radio" /><label for='header4'>Mai Văn Lý</label>
<button type="reset">Mai Văn Lý</button>
<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>
</form>
http://jsbin.com/pefobi
Note: If you need that the second click will close the tab again, you have to wrap all with form tag.