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
Related
I am trying to keep the thead in a sticky position. It works, but the border is still on scroll not being in a sticky state. How to solve the problem?
Here's my code:
table{
border-collapse: collapse;
border:1px solid gray;
width: 100%;
}
th{
text-align: left;
border-bottom: 1px solid black;
}
.container{
overflow-y: auto;
height: 200px;;
background-color: yellow;
}
thead {
position: sticky;
top: 0;
background-color: yellow;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
</head>
<body>
<div class="container">
<table>
<thead>
<tr>
<th>Column 1 </th>
<th>Column 2 </th>
<th>Column 3 </th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Live Demo
You can use ::before and ::after selectors to add the border.
table {
border-collapse: collapse;
border: 1px solid gray;
border-top: none;
width: 100%;
}
th {
text-align: left;
border-bottom: 1px solid black;
}
.container {
overflow-y: auto;
height: 200px;
background-color: yellow;
}
thead {
position: sticky;
top: 0;
background-color: yellow;
}
thead::after,
thead::before {
content: '';
position: absolute;
left: 0;
width: 100%;
}
thead::before {
top: 0;
border-top: 1px solid gray;
margin-top: -0.5px;
}
thead::after {
bottom: 0;
border-bottom: 1px solid gray;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
</head>
<body>
<div class="container">
<table>
<thead>
<tr>
<th>Column 1 </th>
<th>Column 2 </th>
<th>Column 3 </th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Use border-collapse: separate; instead of border-collapse: collapse; in your table CSS
In thead element you can use box-shadow property and border-bottom as transparent property.
Check below snippet hope will help you a lot.
table{
border-collapse: collapse;
border:1px solid gray;
width: 100%;
}
th{
text-align: left;
}
.container{
overflow-y: auto;
height: 200px;;
background-color: yellow;
}
thead {
position: sticky;
top: 0;
background-color: yellow;
border-bottom: transparent;
box-shadow: 0 0px 0.5px 1px gray;
}
<div class="container">
<table>
<thead>
<tr>
<th>Column 1 </th>
<th>Column 2 </th>
<th>Column 3 </th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
</tbody>
</table>
</div>
I've a HTML table with many columns (even 50 columns!).
I'm trying to have the possibility to scroll horizontally (all the table) and vertically (with fixed header).
All the solutions listed in the following link have a small bug: if in Chrome I do ctrl+f to find a specific column name (my table have many columns!), the header doesn't scroll automatically horizontally (native functionality of Chrome).
The link with the solutions tried: HTML table with 100% width, with vertical scroll inside tbody
Any solution to propose?
You could put the table inside a div with max-width:100% and overflow-x: auto;. Using the accepted solution from the SO-post you linked I have created a simple example:
// Change the selector if needed
var $table = $('table.scroll'),
$bodyCells = $table.find('tbody tr:first').children(),
colWidth;
// Adjust the width of thead cells when window resizes
$(window).resize(function() {
// Get the tbody columns width array
colWidth = $bodyCells.map(function() {
return $(this).width();
}).get();
// Set the width of thead columns
$table.find('thead tr').children().each(function(i, v) {
$(v).width(colWidth[i]);
});
}).resize(); // Trigger resize handler
.table-master {
max-width: 300px;
overflow-x: auto;
}
table.scroll {
/* width: 100%; */
/* Optional */
/* border-collapse: collapse; */
border-spacing: 0;
border: 2px solid black;
}
table.scroll tbody,
table.scroll thead {
display: block;
}
thead tr th {
height: 30px;
line-height: 30px;
/* text-align: left; */
}
table.scroll tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody {
border-top: 2px solid black;
}
tbody td,
thead th {
/* width: 20%; */
/* Optional */
border-right: 1px solid black;
/* white-space: nowrap; */
}
tbody td:last-child,
thead th:last-child {
border-right: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-master">
<table class="scroll">
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
<th>Head 5</th>
<th>Head 5</th>
<th>Head 5</th>
<th>Head 5</th>
<th>Head 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</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>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</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>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</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>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</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>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</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>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</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>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
<td>Content 5</td>
</tr>
</tbody>
</table>
</div>
In this example I used max-width:300px; to make the effect visible
I worked the last three days on this problem.
You may find some nice JQuery solutions.
Here is my approach in plain and pure JavaScript:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<meta charset="utf-8">
<title>Table Test</title>
<script type="text/javascript">
window.onload = function() { NoScrollTables(); }
/* Set all tables, where a "noscroll-"+id exists to no scroll */
function NoScrollTables()
{
var list = document.getElementsByTagName('table');
for (var i = 0; i < list.length; i++)
{
if (document.getElementById('noscroll-' + list[i].id) != null) NoScrollTable(list[i].id);
}
};
/* Initialize a single table to no-scroll */
function NoScrollTable(TabId)
{
var headerwidth=[]; // Storage for width of main table
var maintab = document.getElementById(TabId);
var noscroll = document.getElementById('noscroll-'+TabId);
var restwidth = noscroll.offsetWidth;
for (var i = 0; i < maintab.rows[1].cells.length; i++) headerwidth[i] = maintab.rows[1].cells[i].clientWidth;
var content = maintab.rows[0].innerHTML;
noscroll.rows[0].innerHTML = content;
maintab.rows[0].innerHTML='';
for (i = 0; i < maintab.rows[1].cells.length; i++) // Set width for both tables identically
{
noscroll.rows[0].cells[i].width = headerwidth[i];
maintab.rows[1].cells[i].width = headerwidth[i];
restwidth = restwidth - headerwidth[i];
}
i--;
noscroll.rows[0].cells[i].width = parseInt(noscroll.rows[0].cells[i].width) + parseInt(restwidth); // Expand last cell over possible scrollbar
return;
};
</script>
<style type="text/css">
body {
text-align: left;
}
table{
width: 100%;
border: 0;
border-spacing: 0;
padding: 0;
clear: both;
}
table th{
background-color:#456789;
display: inline-block;
float: left;
padding: 0;
}
table td{
background-color:#999;
}
</style>
</head><body>
<h1>Pretty Table with pure JavaScript</h1>
<p>Just put an empty table above and name the id with praefix 'noscroll-{mytable}' where {mytable} is the id of the table below.<br/><br/></p>
<div style="width:600px;">
<table id='noscroll-TestTable' >
<thead>
<tr></tr>
</thead>
</table>
</div>
<div style="width:600px; max-height: 300px; overflow: auto;">
<table id='TestTable' style='max-height: 180px; overflow-y: auto;'>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>End of Cell Content 1</td>
<td>End of Cell Content 2</td>
<td>End of Cell Content 3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
JSFiddle: https://jsfiddle.net/Mac65/mf494nuw/34/
I want my table to be scrollable vertically with fix header. I want also to make the table width fit on the browser.
**Please, as much as possible, do not make any changes on the 'html' part, just on the 'css' part,
Here is my JSfiddle
table{
border-spacing: 0;
border: 2px solid black;
}
table tbody tr td, thead th {
border-right: 1px solid black;
}
<div class="table_container">
<table>
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
</tr>
</thead>
<tbody>
<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>
</div>
Try this
.table_container table{
display: table;
width: 100%;
}
.table_container table thead, .table_container table tbody {
float: left;
width: 100%;
}
.table_container table tbody {
overflow: auto;
height: 70px;
}
.table_container table tr {
width: 100%;
display: table;
text-align: left;
}
.table_container table th, .table_container table td {
width:20%;
}
Am not a big fan of reinventing things, so md_data_table is a good option to look at. (works with Angular 1.5.8 and will be supported in Angular2 as well)
https://github.com/iamisti/mdDataTable
bower install md-data-table --save
plankton
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.
I have this scrollable table that sometimes Isn't full, like this:
2 things happening here: the background disappears and the th columns are just not aligned.
I was messing around with a demo I found somewhere and I read that display: table-header-group actually aligns the tbody with the header, the problem here is that if I use that then the scroll stops working: here's what I have so far:
.scroll {
/* Optional */
/* border-collapse: collapse; */
border-spacing: 0;
font-family: Raleway;
padding-top: 15px;
padding-left: 15px;
border-collapse: collapse;
color: #005693;
border-radius: 10px;
font-size: 12px;
text-align: center;
}
.scroll tbody, .scroll thead {
display:block;
}
thead tr th {
height: 30px;
line-height: 30px;
/* text-align: left; */
}
.scroll tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
.scroll tbody {
border-top: 2px solid black;
}
.scroll tbody td, thead th {
/* width: 20%; */
/* Optional */
border-right: 1px solid black;
/* white-space: nowrap; */
}
.scroll tbody td:last-child, thead th:last-child {
border-right: none;
}
<table class="scroll">
<thead>
<tr>
<th>Job</th>
<th>Client ID</th>
<th>Company</th>
<th>Representative</th>
<th>Status</th>
<th>Report</th>
<th>Recieved</th>
<th>Delivered</th>
<th>Quotation</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 6</td>
<td>Content 7</td>
<td>Content 8</td>
<td></td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 6</td>
<td>Content 7</td>
<td>Content 8</td>
<td></td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 6</td>
<td>Content 7</td>
<td>Content 8</td>
<td></td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 6</td>
<td>Content 7</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 6</td>
<td>Content 7</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 6</td>
<td>Content 7</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 6</td>
<td>Content 7</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
How can I align the tbody with the thead having in account that content 8 and 9 are not always used? Also of course keeping the scroll.
Here's the fiddle http://jsfiddle.net/CrSpu/4574/
in case anybody has the same issue i found a great solution, here's a fiddle of it. if you want to add rows just keep adding the +td css and your preferred sizes :D
http://jsbin.com/bagaro/1/edit?html,output