I cannot figure out how to keep this tables height contained within the containing div. My goal is to be able to scroll in order to see it all. There are plenty of solutions to solve this when dealing with the width, but I have not been able to get them working with the height.
<html>
<head>
<style>
.container {
border: 1px solid black;
height: 100px;
}
td {
font-size: 40px;
}
table {
table-layout: fixed;
height: 100%;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="container">
<table>
<thead>
<tr>
<th>
header
</th>
<th>
header
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
data
</td>
<td>
data
</td>
</tr>
<tr>
<td>
data
</td>
<td>
data
</td>
</tr>
<tr>
<td>
data
</td>
<td>
data
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
https://jsfiddle.net/meeow314159/3vs9bmsf/
.container {
border: 1px solid black;
height: 100px;
overflow-y: scroll;
}
td {
font-size: 40px;
}
table {
table-layout: fixed;
height: 100%;
}
<div class="container">
<table>
<thead>
<tr>
<th>
header
</th>
<th>
header
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
data
</td>
<td>
data
</td>
</tr>
<tr>
<td>
data
</td>
<td>
data
</td>
</tr>
<tr>
<td>
data
</td>
<td>
data
</td>
</tr>
</tbody>
</table>
</div>
You were almost there. The overflow-y needs to be applied to the parent container with the height set on it, not the table itself. Hope this helps.
.container { overflow-y:scroll; }
You need to apply the overflow-y:scroll on the container
https://jsfiddle.net/3vs9bmsf/1/
.container {
border: 1px solid black;
height: 100px;
overflow-y: scroll;
}*
add display:block; to table
table {
table-layout: fixed;
height: 100%;
overflow-y: scroll;
display:block;
}
you should look here for some good tips about overflow.
and maybe look at word-wrap and white-space if you want to control the text in y-axe.
Related
Following code doesn't shrink the image to the row height and I don't understand why.
there are a lot of similar questions on the forum, but I can't seem to find the explanation or solution for this behaviour.
I can solve it easily enough by fixing the height of the image, but that doesn't learn me anything :)
<html>
<head>
<style>
tr { height: 3em; }
td { height: 100%; border: 1px solid green; }
img { height: 100%; }
</style>
</head>
<body>
<table>
<tr>
<td>some text</td>
<td><img src='https://www.google.be/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png' /></td>
</tr>
<tr>
<td>other text</td>
<td><img src='https://s.yimg.com/rz/p/yahoo_frontpage_en-US_s_f_p_bestfit_frontpage_2x.png' /></td>
</tr>
</table>
</body>
A table cell will adjust its height to fit its content, which is the expected behavior: the more content you have, the taller it gets.
Rather than forcing td's height, you might want to give max-height to your img. See the snippet below.
tr {
height: 3em;
}
td {
height: 100%;
border: 1px solid green;
}
img {
max-height: 3em;
}
<table>
<tr height="3em">
<td>some text</td>
<td>
<img src='https://www.google.be/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png' />
</td>
</tr>
<tr>
<td>other text</td>
<td>
<img src='https://s.yimg.com/rz/p/yahoo_frontpage_en-US_s_f_p_bestfit_frontpage_2x.png' />
</td>
</tr>
</table>
I have a table with several columns. On chrome, the height of the table-cell (td) with an image inside varies when image height is in decimals (e.g. 76.54px) On firefox and IE this works fine and all tds have same height.
Please see the following fiddle:
https://jsfiddle.net/sstzg0rh/3/
Height of the column with image is few point less pixels then the other columns. This works fine on firefox and all tds have same height. Why chrome is showing different behavior with column height and how to fix this
<div class="container-row">
<div class="container">
<table>
<thead>
<tr>
<th>Title</th>
<th>Image</th>
<th>Text</th>
</tr>
</thead>
<tbody>
<tr>
<td>
ABCDEFG
</td>
<td>
<img src="http://via.placeholder.com/74x90" alt="This is a no image">
</td>
<td>
ABCDEFG
</td>
</tr>
<tr>
<td>
ABCDEFG
</td>
<td>
<img src="http://via.placeholder.com/74x90" alt="This is a no image">
</td>
<td>
ABCDEFG
</td>
</tr>
</tbody>
</table>
</div>
body {
line-height: 1.5;
}
img {
max-width: 72px;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
tr {
min-height: 80px;
width: 100%;
border-bottom: 1px solid red;
}
td {
white-space: nowrap;
vertical-align: top;
}
I thought your img elements was a inline elements that led to the problem.
The solution i thought was
img{
display:block;
}
Suppose I have a table with 100vh height, how to set minimum height for thead according to inside and maximum tbody?
<table style="height: 100vh;">
<thead>...</thead>
<tbody>...</tbody>
</table>
Is this what you look for?
Updated
Did a few tests and noticed giving height to the body didn't work properly cross browser, which below update does (tested on Chrome, Firefox, Edge, IE11)
html, body {
margin: 0;
}
table {
width: 100%;
height: 100vh;
}
table thead tr {
height: 80px; /* on table elements, height works kind of like min-height */
background: yellow;
}
table tbody tr {
background: lime;
}
<table>
<thead>
<tr>
<td>
HEAD<br>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
BODY
</td>
</tr>
</tbody>
</table>
you can follow the hack to achieve your goal.
Use least height for thead, but not 0.Use 0% for tbody
html,body{
margin:0;
}
table{
width:100%;
height: 100vh;
border: 1px solid black;
}
thead{
background: red;
height:1px;
}
tbody{
background: blue;
height:0%;
}
<table>
<thead>
<tr>
<td colspan="4">
<img src="http://dummyimage.com/100x100/eb00eb/fff">
</td>
</tr>
</thead>
<tbody>
<tr>
<td>BODY</td>
<td>BODY</td>
<td>BODY</td>
<td>BODY</td>
</tr>
</tbody>
</table>
A simple quick question, i have this HTML
<div id="list">
<table class="t">
<thead>
<tr>
<th class="w100"><div>ID</div></th>
<th><div>NAME</div></th>
<th class="w100"><div>EXTRA</div></th>
<th class="w100"><div>EXTRA1</div></th>
</tr>
</thead>
<tbody style="top: 0px;" page="0">
<tr>
<td class="w100">ID</td>
<td>NAME</td>
<td class="wr100">EXTRA</td>
<td class="w100">EXTRA1</td>
</tr>
<tr>
<td class="w100">ID</td>
<td>NAME</td>
<td class="wr100">EXTRA</td>
<td class="w100">EXTRA1</td>
</tr>
</tbody>
</table>
</div>
CSS
#list {
position: relative;
height: 200px;
overflow: auto;
}
.t {
height: 20000px;
overflow: auto;
width: 100%;
}
.t>tbody {
position: absolute;
border:solid 1px;
}
tr {
height: 20px;
width: 100%;
}
.w100 {
width: 100px;
}
how can I extend the NAME column to fill up the remaining space inside a position absolute tbody just like the thead does?
I need this css to remain like this:
.t>tbody {
position: absolute;
}
and the table must have a height so that I can scroll past the tbody content
everything else can be changed
here is a demo
https://jsfiddle.net/wyzixg/f3gqgjgj/5/
Can this be achieved by css and/or js/jquery?
I think that the following is what you need.
You were pretty close, except that the absolute positioning was confusing the auto sizing algorithm used in table layouts.
If you set the width of the table to 100%, then the table will resize the columns to fill up the space. Since you set the width of all columns (except the 2nd one for NAME) to 100px, any remaining width will be allocated to the 2nd column since its width will be auto.
Since you need the tbody element to be position: absolute, you can still get the auto table sizing effect by using display: table on tbody, which looks a bit bizarre but it might do the trick.
I am not sure if your JavaScript will work as expected, but the layout seems to be what you need.
There is an artifact, a second horizontal scroll bar, which can probably be removed with some experimentation, but I did not try it (yet).
body { margin: 0;}
.c-list {
position: absolute;
width: 99%;
height: 400px;
overflow: auto;
-webkit-overflow-scrolling: touch;
border: 1px dotted blue;
}
table {
}
.t tbody {
position: absolute;
width: 100%;
display: table;
}
table td {
text-align: center;
border: solid 1px;
margin: 0;
padding: 0;
}
.w100, .wr100 {
width: 100px;
}
.wr100 {
text-align: right;
}
<div class="c-list">
<table class="t">
<tbody>
<tr>
<td class="w100">ID</td>
<td>NAME</td>
<td class="wr100">EXTRA</td>
<td class="w100">EXTRA1</td>
</tr>
<tr>
<td class="w100">1</td>
<td>1</td>
<td class="wr100">1</td>
<td class="w100">1</td>
</tr>
<tr>
<td class="w100">2</td>
<td>2</td>
<td class="wr100">2</td>
<td class="w100">2</td>
</tr>
<tr>
<td class="w100">3</td>
<td>3</td>
<td class="wr100">3</td>
<td class="w100">3</td>
</tr>
<tr>
<td class="w100">4</td>
<td>4</td>
<td class="wr100">4</td>
<td class="w100">4</td>
</tr>
<tr>
<td class="w100">5</td>
<td>5</td>
<td class="wr100">5</td>
<td class="w100">5</td>
</tr>
</tbody>
</table>
</div>
Use <thead> for table headers, along with <th>, so you can set the header width to 100% to fill the remaining space, and it will apply for the entire column.
Check this snippet for a better view of the result.
Also you don't really need the height for the table, and absolute.
.c-list {
position: absolute;
width:99%;
height:400px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
table td {
text-align: center;
border:solid 1px;
margin:0;
padding:0;
}
.t > tbody {
position: absolute;
width: 99%;
}
table {
width:100%;
}
table tr{
width:100%;
}
table tbody {
width:100%;
}
.w100 {
width:100px;
}
.wr100 {
width:100px;
text-align: right;
}
<div class="c-list" >
<table style="height: 2000px;" class="t">
<tbody style="top: 0px;" page="0">
<tr><td class="w100">ID</td><td>NAME</td><td class="wr100">EXTRA</td><td class="w100">EXTRA1</td></tr>
<tr><td class="w100">1</td><td>1</td><td class="wr100">1</td><td class="w100">1</td></tr>
<tr><td class="w100">2</td><td>2</td><td class="wr100">2</td><td class="w100">2</td></tr>
<tr><td class="w100">3</td><td>3</td><td class="wr100">3</td><td class="w100">3</td></tr>
<tr><td class="w100">4</td><td>4</td><td class="wr100">4</td><td class="w100">4</td></tr>
<tr><td class="w100">5</td><td>5</td><td class="wr100">5</td><td class="w100">5</td></tr>
</tbody>
</table>
</div>
Here's a DEMO
Here's my HTML:
<div>
<table>
<tbody>
<tr>
<td>A1</td>
<td>B1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
</tr>
</tbody>
</table>
</div>
and CSS:
div {
position: relative;
left: 100px;
}
table {
border: 1px solid black;
}
As you can see in the demo, it causes horizontal scrollbars. Is there any way to get rid of this, other than using javascript?
instead of left maybe try
margin-left: 100px;