I have a table that has 2 header columns and 4 columns of links. Example code below.
table{
border: 1px solid black;
table-layout: fixed;
width:100%
}
th, td{
border: 1px solid black;
overflow: hidden;
}
td {
width:25%;
}
<table class="fixed-width">
<tr>
<th colspan=2>header 1</th>
<th colspan=2>header 234567895678657</th>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
<td>link 3</td>
<td>link 4</td>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
<td>link 3</td>
<td>link 4</td>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
<td>link 3</td>
<td>link 4</td>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
<td>link 3</td>
<td>link 4</td>
</tr>
</table>
https://jsfiddle.net/pse6thr8/21/
I would like the table to look something like this when a mobile accesses it.
New Table
There are 2 different approaches to do that...
Using Bootstrap columns or
Collapse to Tabs or accordion on smaller view
First check how bootstrap columns will work,
first of all, add Bootstrap.min.css file to your like this,
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
Check this fiddle
and then your HTML will be like this,
<div class="col-sm-6">
<table class="fixed-width">
<tr>
<th colspan=2>header 1</th>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
</table>
</div>
<div class="col-sm-6">
<table class="fixed-width">
<tr>
<th colspan=2>header 234567895678657</th>
</tr>
<tr>
<td>link 3</td>
<td>link 4</td>
</tr>
<tr>
<td>link 3</td>
<td>link 4</td>
</tr>
<tr>
<td>link 3</td>
<td>link 4</td>
</tr>
<tr>
<td>link 3</td>
<td>link 4</td>
</tr>
</table>
</div>
and add this css as,
.col-sm-6{
padding:0px
}
Collapse to Tabs or accordion on smaller view
Check this codepen by csstricks
You can use the media query also please try this
#media (min-width: 769px) and (max-width: 979px) {
/*
Styles for display width
between 769 and 979 pixels
*/
}
#media (max-width: 768px) {
/*
Styles for display width
equal to 768 pixels and thinner
*/
}
#media (min-width: 1200px) {
/*
Styles for display width
equal to 1200 pixels and wider
*/
}
In HTML table rows cannot separate from each other like the way you need them to.
First of all you need to separate your left and right table. So that when you write the correct css, the one on the right would go down below of the first table.
After separating them, write width specific css for the device.
Like this;
table {
border: 1px solid black;
table-layout: fixed;
width: 50%;
float:left;
}
th,
td {
border: 1px solid black;
overflow: hidden;
}
td {
width: 25%;
}
#media (max-width:500px){
table{width:100%}
}
<table class="fixed-width" style="border-right:none;">
<tbody>
<tr>
<th colspan="2">header 1</th>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
<tr>
<td>data asdfasdfasdfasdfasdf</td>
<td>data 2</td>
</tr>
</tbody>
</table>
<table>
<tr>
<th colspan="2">header 234567895678657</th>
</tr>
<tr>
<td>link 3</td>
<td>link 4</td>
</tr>
<tr>
<td>link 3</td>
<td>link 4</td>
</tr>
<tr>
<td>link 3</td>
<td>link 4</td>
</tr>
<tr>
<td>link 3</td>
<td>link 4</td>
</tr>
</table>
In addtion to other's answer,there are multiple ways you can show a table in mobile/responsive view .You can have a look here responsive tables.
Related
When the horizontal scrollbar is to the left, the vertical scrollbar is not present
When the horizontal scrollbar is to the right, the scrollbar is present
How can I make the vertical scrollbar show at all times (it should only cover tbody)
Here's the Stackblitz
And here's the code anyway:
table thead,
table tbody {
display: block;
}
tbody {
height: 160px;
overflow: auto;
}
div {
width: 160px;
overflow: auto;
}
<div>
<table>
<thead>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
<th>Title 4</th>
<th>Title 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
</tbody>
</table>
</div>
Leave out overflow: auto; from tbody, and add position: sticky; to thead. Make sure to add a background-color to thead so the table's content doesn't overlap when scrolling.
table thead,
table tbody {
display: block;
}
thead {
position: sticky;
top: 0;
background: white;
}
tbody {
height: 160px;
/* overflow: auto; */
}
div {
width: 160px;
overflow: auto;
}
<div>
<table>
<thead>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
<th>Title 4</th>
<th>Title 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
<td>Data 5</td>
</tr>
</tbody>
</table>
</div>
My goal is to create a table with certain conditions:
If display width is too small to fit contents, add horizontal scrollbar and do not shrink cells.
If display height is too small to fit contents, add vertical scrollbar and do not shrink cells.
I managed to achieve this, but I have a problem where if both display width and height are too small to fit contents, the vertical scrollbar is perfect, but horizontal scrollbar is hidden under the vertical overflow. So if a user would like to see the entire first row, he/she needs to scroll vertically to the end, then scroll horizontally to the end, and finally scroll vertically back up to see the first row.
Here is a JSFiddle example: https://jsfiddle.net/totsik/fr24Ldyb/7/
CSS and HTML:
.main-container {
background-color: #222C2A;
color: #F3EED9;
margin: 3rem 5%;
}
.container {
overflow-y: auto;
padding: 2rem;
min-height: 50vh;
max-height: 70vh;
border: 2px solid #222C2A;
}
table {
overflow-x: auto;
display: block;
border-collapse: collapse;
width: 100%;
}
tr.table-head-row th {
border-style: solid;
border-width: 2px 0;
border-color: #F3EED9;
}
tr td {
text-align: center;
}
tr td:first-child {
text-align: left;
}
th {
width: 100%;
background: #222C2A;
text-align: left;
padding: 1rem 2rem;
}
td {
font-size: 1rem;
padding: 0.75rem 1.5rem;
background-color: #F3EED9;
color: #222C2A;
}
<div class="main-container">
<div class="container">
<table>
<thead>
<tr class="table-head-row">
<th class="">header 1</th>
<th class="">header 2</th>
<th class="">header 3</th>
<th class="">header 4</th>
<th></th>
</tr>
</thead>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
<td><button>button</button></td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
<td><button>button</button></td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
<td><button>button</button></td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
<td><button>button</button></td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
<td><button>button</button></td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
<td><button>button</button></td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
<td><button>button</button></td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
<td><button>button</button></td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
<td><button>button</button></td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
<td><button>button</button></td>
</tr>
</table>
</div>
</div>
What I would like to happen is that if both height and width are too small, the scrollbars will be both visible. How should I change my code to accomplish this?
UPDATE: updated jsfiddle. Also forgot to mention that I would like the to be vertical scrollbar on the container div not the table itself.
The fiddle example has a max-height in table which the text above does not.
Change the max-height in table
table {
overflow-x: auto;
display: block;
border-collapse: collapse;
width: 100%;
max-height: 50vh;
}
and both bars show
Example: I want to style that element in my style.css file
<table>
<thead>...</thead>
<tbody id="something">
<tr class="highlight_on_hover" id="1">
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>
Link
The element I want to style.
</td>
</tr>
<tr class="highlight_on_hover" id="2">
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>
Link
The element I want to style.
</td>
</tr>
</tbody>
<table>
I want to style that element in my style.css file using css selectors
Based on your example structure
.highlight_on_hover td a:nth-child(2)
would get it done.
.highlight_on_hover td a:nth-child(2) {
background: lightblue;
}
<table>
<tbody id="something">
<tr class="highlight_on_hover" id="1">
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>
Link
The element I want to style.
</td>
</tr>
<tr class="highlight_on_hover" id="2">
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>
Link
The element I want to style.
</td>
</tr>
</tbody>
<table>
You can style the particular element by defining the class name or id to element.
<tr class="highlight_on_hover" id="1">
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>
<a href="#" >Link</a>
The element I want to style.
</td>
</tr>
style.css
.link {
color: blue;
text-decoration: underline;
}
if you want to style all <td> tag , add css
table td{ color:red; font-weight:bolder;}
this css will style all your data in your table
or if you want to style a spesific <td> element , try this
<table>
<tbody id="something">
<tr class="highlight_on_hover" id="1">
<td> <span style="color:red;"> Data 1 </span></td>
<td>Data 2</td>
<td>Data 3</td>
<td>
Link
The element I want to style.
</td>
</tbody> </table>
use <span> element to style a spesific element
I hope this will help you
I have this repeater i want to show scroll and fixed header and footer
below is code which i did to show in repeater
<table>
<thead>
<tr>
<td>Sr No.</td>
<td>Firstname</td>
<td>Middlename</td>
<td>Lastname</td>
<td>Salary</td>
<td>Join Date</td>
<td>Gender</td>
<td>DOB</td>
<td>Designation</td>
<td>Department</td>
<td>HR Manager</td>
<td>Reporting Manager</td>
</tr>
</thead>
<tbody>
<asp:Repeater ID="repEmpList" runat="server">
<ItemTemplate>
<tr>
<td><%#Container.ItemIndex+1 %></td>
<td>Firstname</td>
<td>Middlename</td>
<td>Lastname</td>
<td>Join Date</td>
<td>Gender</td>
<td>DOB</td>
<td>Designation</td>
<td>Department</td>
<td>HR Manager</td>
<td>Reporting Manager</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>0.00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
now i want both scrolls horizontal and vertical with fixed header and footer
how can i do that?
Please help me
Thank you in advance
thead, tbody { display: block; width:500px; padding: 0px; }
td {width:150px;}
th {width:150px;}
#thbold {
text-align: center;
color: red;
}
td { padding : 0px;}
th { padding : 0px;}
tr { padding : 0px;}
table, td, th {
border: 2px solid black;
margin : 0px;
padding : 0px;
}
tbody {
height: 100px; /* Just for the demo */
overflow-y: scroll; /* Trigger vertical scroll */
overflow-x: scroll; /* Hide the horizontal scroll */
}
<html>
<body>
<table style="width:300px;">
<tbody>
<tr id="thbold">
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr><tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr><tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
</tbody>
</table>
</body>
</html>
this is a very quickly done code, though this seems to cater to your needs. feel free to modify and style it as per your needs. Remember to set the thead and tbody as display type to block, and limit height and width of block, set overflow-x, overflow-y to scroll. Please feel free to ask for further clarifications
Whenever I am trying to make my table scroll with overflow and display block css. Table width always getting reduced and leaves empty space. Why this is happening? What I am doing wrong here. My table is inside a div.
HTML:
<div id="window">
<div id="tableContainer">
<table>
<thead>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
</div>
</div>
css:
div{
width:500px;
height:500px;
display:block;
}
table
{
width:180px;
height:100px;
display:block;
overflow:auto;
border:1px solid black;
}
table td{
border:1px solid black;}
}
Fiddle:
http://jsfiddle.net/KrP7v/117/
HTML:
<div id="window">
<div id="tableContainer">
<table>
<thead>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
</div>
CSS
#tableContainer{
float:left;
height:100px;
display:block;
overflow-y: scroll;
float:left
}
table
{
height:100px;
display:block;
float:left;
}
table td{
border:1px solid black;}
}
http://jsfiddle.net/4erveak/KrP7v/118/
Here is fix for your bug but at end add a div and get them style clear:both