On a website with bootstrap.css installed I have the following scrollable table:
!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<table class="table table-condensed scrollable">
<thead>
<tr>
<th colspan="4">
Application Event Log <br />
Time Source ... ...
</th>
</tr>
</thead>
<tbody id="testlogEvents" class="scrollable">
<tr id="13705" class="warning">
<td>10:23</td>
<td>IIS Express</td>
<td>3</td>
<td>null</td>
</tr>
<tr id="13704" class="warning">
<td>10:20</td>
<td>TestLog</td>
<td>4</td>
<td>null</td>
</tr>
</tbody>
</table>
</body>
</html>
The css to make the table scrollable looks as follows:
.scrollable table {
border-collapse: collapse;
width: 100%;
}
.scrollable thead {
text-align: left;
display: table;
float: left;
width: 100%;
}
.scrollable thead tr {
display: table-row;
width: 100%;
}
.scrollable tbody {
display: block;
height: 60px;
overflow: auto;
float: left;
width: 100%;
}
.scrollable tbody tr {
display: table;
width: 100%;
}
.scrollable tbody tr {
height: 18px;
}
.scrollable tbody td {
padding: 1px 8px;
width: 25%;
}
.scrollable th, td {
width: 25%;
}
The problem is this:
(Ignore the not properly placed 'table header').
This extra space in IE8 is very much unwanted since I need all the space I can use.
Where does this extra spacing come from and how can I remove it?
I had exactly the same issue. Culprit was clearfix on a surrounding element. Think is something to do with the content: '.' part.
Switching to a newer clearfix fixed it http://nicolasgallagher.com/micro-clearfix-hack/
You might want to change the title to a table caption, and then have all the header cells as separate TH cells. Or at very least:
<thead>
<tr>
<th colspan="4">Application Event Log</th>
</tr>
<tr>
<th>Time</th>
<th>Source</th>
<th>Count</th>
<th>...</th>
</tr>
<thead>
Related
I have a table
<div class="width1200">
<table>
<th colspan="2">Title:</th>
<tr>
<td>Harry Potter</td>
<td class="td100">$10</td>
</tr>
<th colspan="2">Title:</th>
<tr>
<td>Harry Potter</td>
<td class="td100">$10</td>
</tr>
</table>
</div>
table {
border-collapse: collapse;
table-layout: auto;
width: 100%;
}
td {
border: solid 1px black;
padding: 10px;
width: 100%;
}
.width1200 {
width: 1200px;
padding: 10px;
}
.td100 {
width: 100px;
}
I need to make 3 things:
The width of the table
On big screens it should be 1200 px
The table should be 100% width
The table should be responsive
Width of td
Second td should always be fixed - 100px
First td shoul be 100% of the free and responsive
At the moment the table width 100% doesn't work
You're contradicting yourself. I think you mean to say that on a big screen the table should have a maximum width of 1200px. Right?
<style>
table {
border-collapse: collapse;
table-layout: auto;
width: 100%;
}
td {
border: solid 1px black;
padding: 10px;
}
.width1200 {
max-width: 1200px;
padding: 10px;
}
.td100 {
width: 100px;
}
</style>
I changed width: 1200px; to max-width: 1200px; and removed width: 100%; from the td styling. I did not change the HTML.
I think now it does what you want?
See: Example
Here is the right one:
php code refactored ( wrong markup inside table )
<div class="width1200">
<table>
<thead>
<tr>
<th>Title:</th>
<th class="td100">Price:</th>
</tr>
</thead>
<tbody>
<tr>
<td>Harry Potter</td>
<td class="td100">$10</td>
</tr>
<tr>
<td>Harry Potter</td>
<td class="td100">$10</td>
</tr>
</tbody>
</table>
</div>
and new css code:, set width and max width to table and set only to cells with class td100 the specific with
table {
border-collapse: collapse;
width: 100%;
}
td {
border: solid 1px black;
padding: 10px;
}
.width1200 {
max-width: 1200px;
width:100%;
padding: 10px;
}
.td100 {
width: 100px;
}
table-layout: fixed allows you to set the widths of columns explicitly. The requirement is that the widths must be set on the <th> or <td> of the first <tr>. The OPs first <tr> has col="2" making it impossible to set a width for the second column. A workaround:
is to add another <tr> at the top
add 2 cells <th> and/or <td>
do not style any borders to the row
do not add any content to the new row either
add class="td100" to the 2nd cell of the new hidden row.
BTW each colspan="2" isn't in a <tr> in OP. They are added in this example.
table {
border-collapse: collapse;
table-layout: fixed;/* IMPORTANT */
width: 100%;
}
td {
border: solid 1px black;
padding: 10px;
}
.width1200 {
width: 1200px;
padding: 10px;
}
.td100 {
width: 100px;
}
<div class="width1200">
<table>
<tr><!--NEW-->
<th></th>
<th class="td100"></th><!--100px column-->
</tr><!--ROW-->
<tr>
<th colspan="2">Title:</th>
</tr>
<tr>
<td>Harry Potter</td>
<td>$10</td>
</tr>
<tr>
<th colspan="2">Title:</th>
</tr>
<tr>
<td>Harry Potter</td>
<td class="td100">$10</td>
</tr>
</table>
</div>
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>
I have a trouble with x-scroll table, when I try to resize window to small size. I have the same table (with same css) which doesn't contain row with images and it works great.
HTML:
<div class="price_wrapper">
<table class="price">
<thead>
<tr class="head">
<th>Название</th>
<th>Вольерная 1</th>
<th>Вольерная 2</th>
<th>Вольерная 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Схема</td>
<td><img src="http://king-bitovki.ru/static/pub/img/products/budki/volyer1.jpg" alt=""></td>
<td><img src="http://king-bitovki.ru/static/pub/img/products/budki/volyer2.jpg" alt=""></td>
<td><img src="http://king-bitovki.ru/static/pub/img/products/budki/volyer3.jpg" alt=""></td>
</tr>
<tr>
<td>Ширина</td>
<td>90</td>
<td>120</td>
<td>150</td>
</tr>
<tr>
<td>Высота</td>
<td>60</td>
<td>70</td>
<td>80</td>
</tr>
<tr>
<td>Глубина</td>
<td>60</td>
<td>80</td>
<td>90</td>
</tr>
<tr>
<td>Лаз</td>
<td>30x35</td>
<td>39x42</td>
<td>42x53</td>
</tr>
<tr>
<td>Стоимость, руб.</td>
<td>7 000</td>
<td>9 000</td>
<td>11 000</td>
</tr>
</tbody>
</table>
</div>
CSS:
.price_wrapper {
overflow-x: scroll;
overflow-y: auto;
min-width: 400px;
width: 100%;
}
table.price {
border-collapse: collapse;
background-color: #FFF;
}
table.price th,
table.price td {
border: solid 1px #999;
padding: 5px;
}
table.price img {
max-width: 180px;
width: 100%;
height: auto;
}
JSFiddle: https://jsfiddle.net/vasromand/gue888vp/
Why is it?
You must use width for the scroll to
work.price_wrapper {
overflow-x: autol;
overflow-y: auto;
max-width: 400px;
width: 100%;
}
And dont use scroll because it will not be working in ie so instead you can use auto for it and set max-width or width to enable the auto scroll
Your content is not overflowing, you're using the width 90% of its container.. there never will be an overflow to scroll..
800px Content
table.price {
width: 800px;
margin: 10px 5%;
border-collapse: collapse;
background-color: #FFF;
}
400px container
.price_wrapper {
overflow-x: scroll;
overflow-y: visible;
width: 400px;
}
This will force the content to be wider than the wrapper.. which has the overflow-x
Also as correctly suggested by the other answer, use overflow:auto
Here is an updated version which will FORCE overflow to show you an example..
JSFiddle
As you can see i have forced the child to be wider than its parent.. Therefore offering scroll.
This one is driving me mad, unfortunately I'm not very good in CSS yet.
How can I get a horizontally and vertically centered text-link into a table cell which is fully clickable?
I researched, tried several solutions, none of them worked. Here is my best approach so far:
HTML
<table class="dataTable">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
I wanne be centered!
</td>
<td>
Me too!
</td>
</tr>
</tbody>
</table>
CSS
.dataTable td a {
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
display:block;
text-decoration: none;
}
.dataTable td {
display:inline-block;
}
This one gives me centered text, but the link only covers the width of the cell, not the height. If I change the css for the link to display:inline-block, then the full cell is clickable, but the text is not vertically centered anymore.
I need both. Help!
i think you should remove this :
.dataTable td {
display:inline-block;
}
see this fiddle
I think that's what you want:
.dataTable {
text-align: center;
}
.dataTable a {
display: inline-block;
width: 100%;
height: 100%;
}
/* Just for better visualization */
.dataTable td {
background: red;
}
<table class="dataTable">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
I wanne be centered!
</td>
<td>
Me too!
</td>
</tr>
</tbody>
</table>
If you want to increase td's height, you should do it by modifying a's height. Otherwise, the link will not occupy the whole cell's height. You can achieve that with height property or also with line-height.
.dataTable {
text-align: center;
}
.dataTable a {
display: inline-block;
width: 100%;
height: 100%;
line-height: 5; /* To get a 5 text lines high cell */
}
.dataTable td {
/* Just for better visualization */
background: red;
}
<table class="dataTable">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
I wanne be centered!
</td>
<td>
Me too!
</td>
</tr>
</tbody>
</table>
Wrap your text in a
div style="padding-top:5px;".
That will center it approximately.