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
Related
I have a table in a report and one cell has rowSpan property. When converting HTML to pdf it shows the border as follows:
I added
page-break-inside: avoid !important;
but it didn't work.
Are there any CSS properties or workaround to solve this issue?
this is a mistake.
you have to use this code
table{
width: 100%;
text-align: center;
border-collapse: collapse;
}
table tr td, table tr th{
border: 1px solid black;
}
table tr{
page-break-before: always;
}
<table>
<tr>
<th>item 1</th>
<th>item 2</th>
<th>item 3</th>
</tr>
<tr>
<td>item 1</td>
<td>item 2</td>
<td>item 3</td>
</tr>
<tr>
<td>item 1</td>
<td>item 2</td>
<td>item 3</td>
</tr>
</table>
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 have a dynamic table which data's are coming from an API. I'm generating the table and inserting rows using JavaScript.
Everything is working properly but the problem is in styling.
My table row colors are stripped (just like we use bootstrap table-striped class) and cells are not same in every row.
Some has 3, some has 6, some 4 etc. Where cells are less they are showing some blank space.
Is there any way i can color the entire row. Here is an example. Here is an example of my code:
.table-striped th {
height: 45px;
background-color: #bfff00 !important;
color: #191919;
}
.table-striped td {
padding: 8px;
border: 2px solid #F6F6F6;
font-weight: bold;
}
.table-striped>tr:nth-child(n+1)>td {
background-color: #bababa;
}
.table-striped>tr:nth-child(n+2)>td {
background-color: #e8e7e6;
}
<div>
<table class="table-striped">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</table>
</div>
Here is jsfiddle
The table row is only as wide as the number of cells.
Add a final cell when you don't have a full row and use colspan as appropriate.
.table-striped th {
height: 45px;
background-color: #bfff00 !important;
color: #191919;
}
.table-striped td {
padding: 8px;
border: 2px solid #F6F6F6;
font-weight: bold;
}
.table-striped tr:nth-child(odd) {
background-color: #bababa;
}
.table-striped tr:nth-child(even) {
background-color: #e8e7e6;
}
<div>
<table class="table-striped">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td colspan="5"></td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td colspan="3"></td>
</tr>
</table>
</div>
Note from MDN that :
Any styles applied to the <tr> element will affect the cells within
the row unless overridden by styles applied to those cells.
Pay particular attention to the fact it styles the cells, not the row itself
EDIT
We know from your question and comments that you are using javascript to generate the table. We can't infer much on how you are doing this, but if you are generating the table row by row you should be able to see if you have generated the amount of cell for that row equal to the amount of th cells. If not, add a cell with the difference as a colspan. If you can't do this you can do it after the table is created.
This is a rough way of doing it
function addColspan(table) {
//Assume number of th are our max cells per row
var maxCells = table.querySelectorAll("th").length;
//Get all rows but the first
var rows = table.querySelectorAll("tr:nth-child(n+2)");
for(var i = 0; i < rows.length; i++){
//Get how many cells we have
var cellCount = rows[i].querySelectorAll("td").length;
//If we don't have enough cells
if(cellCount < maxCells) {
//Add one with the appropriate colspan
rows[i].innerHTML += "<td colspan='" + (maxCells - cellCount) + "'></td>";
}
}
}
//Run after table is generated
addColspan(document.querySelector(".table-striped"));
.table-striped th {
height: 45px;
background-color: #bfff00 !important;
color: #191919;
}
.table-striped td {
padding: 8px;
border: 2px solid #F6F6F6;
font-weight: bold;
}
.table-striped tr:nth-child(odd) {
background-color: #bababa;
}
.table-striped tr:nth-child(even) {
background-color: #e8e7e6;
}
<div>
<table class="table-striped">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</table>
</div>
You can use even and odd properties in css.
Check this out
.table-striped th {
height: 45px;
background-color: #bfff00 !important;
color: #191919;
}
.table-striped td {
padding: 8px;
border: 2px solid #F6F6F6;
font-weight: bold;
}
.table-striped tr:nth-child(odd) td {
background-color: #bababa;
}
.table-striped tr:nth-child(even) td {
background-color: #e8e7e6;
}
<div>
<table class="table-striped">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</table>
</div>
Updated answer after the comment. You need to have alteast empty in order to highlight the complete rows.
.table-striped th {
height: 45px;
background-color: #bfff00 !important;
color: #191919;
}
.table-striped td {
padding: 8px;
border: 2px solid #F6F6F6;
font-weight: bold;
}
.table-striped tr:nth-child(odd) td {
background-color: #bababa;
}
.table-striped tr:nth-child(even) td {
background-color: #e8e7e6;
}
<div>
<table class="table-striped">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
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
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