I've encountered a glitch while printing a table, which contains cells with rowspan and colspan attributes, using Google Chrome.
If you run the following snippet, the table is displayed normally.
print();
thead{background-color:#d3d3d3}table{border-collapse:collapse;border-spacing:0}th{border-bottom:1px solid #e6e6e6;border-left:1px solid #e6e6e6;font-size:12px;font-weight:700;text-align:center;padding:12px 12px}th:last-child{border-right:1px solid #e6e6e6}thead>tr:first-child{border-top:1px solid #e6e6e6}td{border-bottom:1px solid #e6e6e6;border-top:1px solid #e6e6e6;border-left:1px solid #e6e6e6;font-size:12px;font-weight:400;padding:8px 12px}td:last-child{border-right:1px solid #e6e6e6}tbody>tr:nth-child(3n+1){background:#ffe1c3}tbody>tr:nth-child(3n+2){background:#fff8d8}tbody>tr:nth-child(3n+3){background:#ffffea}
<table> <thead> <tr> <th colspan="1" rowspan="2">Year</th> <th colspan="3" rowspan="1">Other</th> </tr> <tr> <th colspan="1" rowspan="1">A</th> <th colspan="1" rowspan="1">B</th> <th colspan="1" rowspan="1">C</th> </tr> </thead> <tbody> <tr> <td rowspan="3">2000</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1999</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1998</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1997</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1996</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1995</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">2000</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1999</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1998</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1997</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1996</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1995</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1994</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1993</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1992</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1991</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1990</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1989</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1988</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1987</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1986</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1985</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1984</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1983</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1982</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1981</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td rowspan="3">1980</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> </tbody></table>
But if you try to print (Print Preview or convert to PDF) the table using Google Chrome, the table glitches. Please check the following outputs from Chome and Firefox respectively:
Is this a bug? Is there a way to overcome it?
It sure sounds like chrome bug.
Have you considered using table-row-group?
thead {
display: table-row-group
}
This will remove the repetition of table headers at page breaks.
Hope it helps, cheers!
Having the years in their own td element is confusing because the browsers then don't break the table at the end of a page as expected. Since the year column spans two rows, it won't break with the relevant cells, which are shorter.
So then here's the required changes to your code to make the table break properly when printed.
print();
thead {
background-color: #d3d3d3
}
table {
border-collapse: collapse;
border-spacing: 0
}
th {
border-bottom: 1px solid #e6e6e6;
border-left: 1px solid #e6e6e6;
font-size: 12px;
font-weight: 700;
text-align: center;
padding: 12px 12px
}
th:last-child {
border-right: 1px solid #e6e6e6
}
thead>tr:first-child {
border-top: 1px solid #e6e6e6
}
td {
border-bottom: 1px solid #e6e6e6;
border-top: 1px solid #e6e6e6;
border-left: 1px solid #e6e6e6;
font-size: 12px;
font-weight: 400;
padding: 8px 12px
}
td:last-child {
border-right: 1px solid #e6e6e6
}
tbody>tr:nth-child(odd) {
background: #fff8d8
}
tbody>tr:nth-child(odd) :first-child {
background: #ffe1c3
}
tbody>tr:nth-child(even) {
background: #ffffea
}
<table>
<thead>
<tr>
<th colspan="1" rowspan="2">Year</th>
<th colspan="3" rowspan="1">Other</th>
</tr>
<tr>
<th colspan="1" rowspan="1">A</th>
<th colspan="1" rowspan="1">B</th>
<th colspan="1" rowspan="1">C</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">2000</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1999</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1998</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1997</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1996</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1995</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">2000</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1999</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1998</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1997</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1996</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1995</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1994</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1993</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1992</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1991</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1990</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1989</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1988</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1987</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1986</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1985</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1984</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1983</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1982</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1981</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">1980</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>
Related
I am using bootstrap 4 table, Texts in thead are so long. Right now it's coming in four lines
so I need to make those two liner. I have tried "white-space: pre" but because of this it's been one linear, I want to make it two liner how to solve this.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<style type="text/css">
.item-table th{
white-space: pre;
}
</style>
<body>
<table class="table table-bordered item-table">
<tr>
<th>Sr.No.</th>
<th>Items</th>
<th>Item rating according to choise of smith deen</th>
<th>Item rating according to choise of Paskal</th>
<th>Item rating according to choise of Peter</th>
<th>Item rating according to choise of lynda</th>
<th>Item rating according to choise of James</th>
<th>Item rating according to choise of Anne</th>
<th>Item rating according to choise of Rudina</th>
<th>Item rating according to choise of Addrina</th>
<th>Item rating according to choise of Anjelina</th>
<th>Item rating according to choise of Ryan</th>
<th>Item rating according to choise of ramon</th>
<th>Item rating according to choise of mannel</th>
</tr>
<tr>
<td>1</td>
<td>Table</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>Books</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>Bed</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>Chair</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
</body>
</html>
Consider moving the repeated information into its own row with a colspan:
<table class="table table-bordered item-table">
<thead>
<tr>
<th rowspan="2">Sr.No.</th>
<th rowspan="2">Items</th>
<th colspan="12">Item rating according to choice of...</th>
</tr>
<tr>
<th>smith deen</th>
<th>Paskal</th>
<th>Peter</th>
<th>lynda</th>
<th>James</th>
<th>Anne</th>
<th>Rudina</th>
<th>Addrina</th>
<th>Anjelina</th>
<th>Ryan</th>
<th>ramon</th>
<th>mannel</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Table</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>Books</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>Bed</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>Chair</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
another not perfect, but working solution to split the text without interfereing the tables auto-sizing (example-code):
css:
th {
white-space: nowrap, // or pre
}
javascript:
function wrapString (str) {
l = Math.floor (str.length / 2);
s = str.substr (0, l);
i = s.lastIndexOf (" ");
return str.substr(0, i)+"<br>"+str.substr(i+1)
}
$("th").map (function () {
$(this).html (wrapString($(this).text()));
});
#Use min-width:200px; To Split Text To Next Line
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<style type="text/css">
.item-table th {
min-width: 200px;
/* min-width:13em; */
}
</style>
<body>
<table class="table table-bordered item-table">
<tr>
<th>Sr.No.</th>
<th>Items</th>
<th>Item rating according to choise of smith deen</th>
<th>Item rating according to choise of Paskal</th>
<th>Item rating according to choise of Peter</th>
<th>Item rating according to choise of lynda</th>
<th>Item rating according to choise of James</th>
<th>Item rating according to choise of Anne</th>
<th>Item rating according to choise of Rudina</th>
<th>Item rating according to choise of Addrina</th>
<th>Item rating according to choise of Anjelina</th>
<th>Item rating according to choise of Ryan</th>
<th>Item rating according to choise of ramon</th>
<th>Item rating according to choise of mannel</th>
</tr>
<tr>
<td>1</td>
<td>Table</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>Books</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>Bed</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>Chair</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
</body>
</html>
#Use <br> Tags To Move Text To Next Line (With white-space:pre;)
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>table.item-table th {white-space:pre;}</style> </head>
<body>
<table class="table table-bordered item-table">
<tr>
<th>Sr.No.</th>
<th>Items</th>
<th>Item rating according to<br>choise of smith deen</th>
<th>Item rating according to<br>choise of Paskal</th>
<th>Item rating according to<br>choise of Peter</th>
<th>Item rating according to<br>choise of lynda</th>
<th>Item rating according to<br>choise of James</th>
<th>Item rating according to<br>choise of Anne</th>
<th>Item rating according to<br>choise of Rudina</th>
<th>Item rating according to<br>choise of Addrina</th>
<th>Item rating according to<br>choise of Anjelina</th>
<th>Item rating according to<br>choise of Ryan</th>
<th>Item rating according to<br>choise of ramon</th>
<th>Item rating according to<br>choise of mannel</th>
</tr>
<tr>
<td>1</td>
<td>Table</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>Books</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>Bed</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>Chair</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
</body>
</html>
#OR JS Code By #Makkapitew (For Inserting <br> Tags Automatically)
function wrapString (str) { l = Math.floor (str.length / 2); s = str.substr (0, l); i = s.lastIndexOf (" "); return str.substr(0, i)+"<br>"+str.substr(i+1) } $("th").map (function () { $(this).html (wrapString($(this).text())); });
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<style type="text/css">
.item-table th {
white-space: pre;
}
</style>
<body>
<table class="table table-bordered item-table">
<tr>
<th>Sr.No.</th>
<th>Items</th>
<th>Item rating according to choise of smith deen</th>
<th>Item rating according to choise of Paskal</th>
<th>Item rating according to choise of Peter</th>
<th>Item rating according to choise of lynda</th>
<th>Item rating according to choise of James</th>
<th>Item rating according to choise of Anne</th>
<th>Item rating according to choise of Rudina</th>
<th>Item rating according to choise of Addrina</th>
<th>Item rating according to choise of Anjelina</th>
<th>Item rating according to choise of Ryan</th>
<th>Item rating according to choise of ramon</th>
<th>Item rating according to choise of mannel</th>
</tr>
<tr>
<td>1</td>
<td>Table</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>Books</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>Bed</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>Chair</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
</body>
</html>
you can use ellipsis css property
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
I'm facing some problems with my HTML code. I am trying to display a button toolbar at the row when user hover over the row in a table. Below is my code:
$(document).ready(function () {
var $divOverlay = $('#DivToShow');
$('#grid').on("mouseover", "tbody > tr", function ()
{
var bottomWidth = $(this).css('width');
var bottomHeight = $(this).css('height');
var rowPos = $(this).position();
bottomTop = $(this).offset().top;
bottomLeft = rowPos.left;
$divOverlay.css({
position: 'absolute',
top: bottomTop,
//left: bottomLeft,
height: bottomHeight
});
$divOverlay.show();
});
$('#resultGrid').on("mouseleave", "tbody > tr", function ()
{
$divOverlay.hide();
});
$divOverlay.mouseleave(function ()
{
$divOverlay.hide();
});
});
#DivToShow {
display:none;
position:absolute;
z-index:10;
right:0;
padding-right:10px;
}
tr:hover {
background-color: #ebebeb;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div style="overflow-x:auto;">
<table id="grid" width="100%" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr >
<td>b</td>
<td>b</td>
<td>b</td>
<td>b</td>
<td>b</td>
<td>b</td>
<td>b</td>
<td>b</td>
<td>b</td>
<td>b</td>
<td>b</td>
<td>b</td>
<td>b</td>
<td>b</td>
<td>b</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
<td>c</td>
<td>c</td>
<td>c</td>
<td>c</td>
<td>c</td>
<td>c</td>
<td>c</td>
<td>c</td>
<td>c</td>
<td>c</td>
<td>c</td>
<td>c</td>
<td>c</td>
<td>c</td>
<td>c</td>
</tr>
<tr >
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
<td>d</td>
</tr>
<tr>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e</td>
</tr>
</tbody>
</table>
</div>
<div id="DivToShow" >
<button>Edit</button>
<button>Dup</button>
<button>Delete</button>
</div>
And here is some of the things that I want to achieve:
Currently the table row gets highlighted when user mouse over it. I would like to keep the row highlighted when user hover on the button toolbar section too.
When user mouse leave the row, the button toolbar should disappear. Now it will only disappear when the user got mouse over the button toolbar section.
Is there anyway that I can get the current row data when I click on the edit button?
I will appreciate any help.
i believe what you are trying to accomplish can easily be done with css,, except the clickevent part
here is the easiest way to do this, i hope this is what wanted
function edit(value){
console.log(value);
}
function dup(value){
console.log(value);
}
function remove(value){
console.log(value);
}
#DivToShow {
display:none;
position:absolute;
z-index:10;
top: 0;
right:0;
bottom: 0;
left: 0;
text-align: right;
}
td {
position: relative;
}
tr:hover {
background-color: #ebebeb;
}
tr:hover #DivToShow{
display:block
}
<table id="grid" width="100%" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a
<div id="DivToShow" >
<button onClick="edit('a')">Edit</button>
<button onClick="dup('a')">Dup</button>
<button onClick="remove('a')">Delete</button>
</div>
</td>
</tr>
<tr >
<td>b</td>
<td>b</td>
<td>b</td>
<td>b
<div id="DivToShow" >
<button onClick="edit('b')">Edit</button>
<button onClick="dup('b')">Dup</button>
<button onClick="remove('b')">Delete</button>
</div>
</td>
</tr>
<tr>
<td>c</td>
<td>c</td>
<td>c</td>
<td>c
<div id="DivToShow" >
<button onClick="edit('c')">Edit</button>
<button onClick="dup('c')">Dup</button>
<button onClick="remove('c')">Delete</button>
</div>
</td>
</tr>
<tr >
<td>d</td>
<td>d</td>
<td>d</td>
<td>d
<div id="DivToShow" >
<button onClick="edit('d')">Edit</button>
<button onClick="dup('d')">Dup</button>
<button onClick="remove('d')">Delete</button>
</div>
</td>
</tr>
<tr>
<td>e</td>
<td>e</td>
<td>e</td>
<td>e
<div id="DivToShow" >
<button onClick="edit('e')">Edit</button>
<button onClick="dup('e')">Dup</button>
<button onClick="delete('e')">Delete</button>
</div>
</td>
</tr>
</tbody>
</table>
I made a table inside a div to make it scrollable;
<div style="overflow-y: scroll; height:100px; width:100px;">
<table
<thead>
<tr>
<th>a</th>
<th>b</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>b</td>
<td>b</td>
</tr>
<tr>
<td>t</td>
<td>t</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>b</td>
<td>b</td>
</tr>
<tr>
<td>t</td>
<td>t</td>
</tr>
</tbody>
</table>
</div>
This table is scrollable from top to bottom. How can I make the table's overflow start at the bottom and make it scroll upwards?
You need to use javascript for this. Using scrollTop for accessing the scroll offset from the top (default is 0). So you have to get the div's height and set the scrollTop of the div to its height. To get the height, I used getBoundingClientRect().height
let tableDiv = document.getElementById('main');
tableDiv.scrollTop = tableDiv.getBoundingClientRect().height;
<div id="main" style="overflow-y: scroll; height:100px; width:100px;">
<table
<thead>
<tr>
<th>a</th>
<th>b</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>b</td>
<td>b</td>
</tr>
<tr>
<td>t</td>
<td>t</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>b</td>
<td>b</td>
</tr>
<tr>
<td>t</td>
<td>t</td>
</tr>
</tbody>
</table>
</div>
Your HTML content:
<div class="scorllable-table" id="scrollTable">
<table>
<thead>
<tr>
<th>a</th>
<th>b</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>b</td>
<td>b</td>
</tr>
<tr>
<td>t</td>
<td>t</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>b</td>
<td>b</td>
</tr>
<tr>
<td>t</td>
<td>t</td>
</tr>
</tbody>
</table>
</div>
Your CSS content:
.scorllable-table {
overflow-y: scroll;
height: 100px;
width: 100px;
}
If you want to do this using JavaScript only, then please try with this.
var scrollableDiv = document.getElementById("scrollTable");
scrollableDiv.scrollTop = scrollableDiv.scrollHeight;
If you want to do this using jQuery, then use the below code.
$("#scrollTable").scrollTop($("#scrollTable")[0].scrollHeight);
If you want to smooth scroll, then try with this.
$('#scrollTable').stop().animate({
scrollTop: $('#scrollTable')[0].scrollHeight
}, 500);
Enjoy, Thanks. :)
I am trying to create a weekly view calendar, the calendar is not responsive. The days should be fixed to the top, and the time should be fixed to the left. The calendar should have scrollbars on both sides, but the scrollbars must be inside the schedule. (See the screenshot from google calendar/ mine below):
Here is my current solution: https://codepen.io/Rahmans/pen/LvWZpN
body {
background: #f0ece2;
}
.inner {
width: 700px;
height: 450px;
margin: 50px auto;
overflow: scroll;
}
table {
}
table td {
background: #acdbdf;
padding: 20px 60px;
}
table thead th {
position: sticky;
top: 0;
background-color: #010101;
color: #fff;
padding: 20px ;
text-transform: uppercase;
font-size: 21px;
z-index: 5;
}
table tbody tr th {
position: sticky;
left: 0;
background-color: #69779b;
color: #fff;
padding: 20px ;
}
<div class="container">
<div class="inner">
<table>
<thead>
<tr>
<th> </th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
</thead>
<tbody>
<tr>
<th>00:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>01:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>02:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>03:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>04:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>05:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>06:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>07:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>08:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>09:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>10:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>11:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>12:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>13:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>14:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>15:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>16:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>17:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>18:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>19:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>20:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>21:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>22:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>23:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
</tbody>
</table>
</div>
</div>
For your .container div which is the parent of your .inner div which has your calendar. Add this CSS :
.container{
width: 100vw;
}
so that it spans the whole width of the viewport. Then on your .inner div I've seen you have a defined width and height and also overflow on your css, this means you can now style your .inner div scrollbar as follows:
.inner {
width: 700px;
height: 450px;
margin: 50px auto;
overflow: scroll;
}
/* width */
.inner::-webkit-scrollbar {
width: 10px;
}
/* Track */
,inner::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
.inner::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
See this codepen for a working example :
https://codepen.io/itscosmas/pen/bGNqGXV
Here's what you achieve:
Also, scrollbar styling is supported in major browsers using prefixes, see here : https://caniuse.com/#search=scrollbar
I am not sure this will work for you or not but hope it will help you out.
table.scroll {
width: 100%;
border-spacing: 0;
border: 2px solid black;
}
table.scroll th,
table.scroll td,
table.scroll tr,
table.scroll thead,
table.scroll tbody {
display: block;
}
table.scroll thead tr {
width: 97%;
width: -webkit-calc(100% - 16px);
width: -moz-calc(100% - 16px);
width: calc(100% - 16px);
}
table.scroll tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
table.scroll tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
table.scroll tbody td,
table.scroll thead th {
width: 19%;
float: left;
border-right: 1px solid black;
}
thead tr th {
height: 30px;
line-height: 30px;
}
tbody {
border-top: 2px solid black;
}
tbody td:last-child, thead th:last-child {
border-right: none !important;
}
<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>
</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>Lorem ipsum</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>
<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>
If I am understanding the question correctly I recommend SimpleBar
it's really easy to use
Example Codepen Here
body {
background: #f0ece2;
}
.inner {
width: 700px;
height: 450px;
margin: 50px auto;
overflow: auto;
}
table {}
table td {
background: #acdbdf;
padding: 20px 60px;
}
table thead th {
position: sticky;
top: 0;
background-color: #010101;
color: #fff;
padding: 20px;
text-transform: uppercase;
font-size: 21px;
z-index: 5;
}
table tbody tr th {
position: sticky;
left: 0;
background-color: #69779b;
color: #fff;
padding: 20px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Table Calendar</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://unpkg.com/simplebar#latest/dist/simplebar.css" />
<script src="https://unpkg.com/simplebar#latest/dist/simplebar.min.js"></script>
</head>
<body>
<div class="container">
<div data-simplebar class="inner">
<table>
<thead>
<tr>
<th> </th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
</thead>
<tbody>
<tr>
<th>00:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>01:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>02:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>03:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>04:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>05:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>06:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>07:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>08:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>09:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>10:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>11:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>12:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>13:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>14:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>15:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>16:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>17:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>18:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>19:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>20:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>21:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>22:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>23:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
table {
border: 1px solid #ddd;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 10px;
max-width: 100%;
width: 100%;
}
table > thead > tr > th,
table > thead > tr > td,
table > tbody > tr > th,
table > tbody > tr > td,
table > tfoot > tr > th,
table > tfoot > tr > td {
border: 1px solid #ddd;
line-height: 20px;
padding: 13px;
vertical-align: top;
}
table > thead > tr > th {
background: #444;
color: #fff;
font-weight: normal;
vertical-align: bottom;
}
table th {
text-align: left;
}
table,
table th,
table td,
table tr,
table tr th,
table tr td,
table thead,
table thead th,
table thead td,
table thead tr,
table thead tr th,
table thead tr td,
table tbody,
table tbody th,
table tbody td,
table tbody tr,
table tbody tr th,
table tbody tr td,
table tfoot,
table tfoot th,
table tfoot td,
table tfoot tr,
table tfoot tr th,
table tfoot tr td {
display: block;
}
table > thead {
float: left;
}
table > tbody > tr {
display: inline-block;
vertical-align: top;
}
table > tbody {
width: auto;
white-space: nowrap;
overflow-x: auto;
}
.inner {
width: 700px;
height: 450px;
margin: 50px auto;
}
table td {
background: #acdbdf;
padding: 20px 60px;
}
<div class="container">
<div class="inner">
<table>
<thead>
<tr>
<th> </th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
</thead>
<tbody>
<tr>
<th>00:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>01:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>02:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>03:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>04:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>05:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>06:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>07:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>08:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>09:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>10:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>11:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>12:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>13:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>14:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>15:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>16:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>17:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>18:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>19:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>20:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>21:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>22:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<th>23:00</th>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
</tbody>
</table></div>
I have a very basic table, made up of 3 rows and 3 columns, and i'm trying to make it look like in this picture
(that is, the thead should be wider than the other rows). How do i achieve this effect? I tried with colspan but i can't get it right. The basic table is something like:
<table>
<thead>
<tr>
<th>Extra details</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>
Thanks!
You need to add colspan="3" to the th (number of cols must be identical in all tr in a table). Then make every last td in each tr much wider than the first two (using :last-child pseudo selector, see https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child).
table {
width: 100%;
}
thead th {
background-color: #ddd;
}
td:last-child {
width: 60%;
}
<table>
<thead>
<tr>
<th colspan="3">Extra details</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>
you may use colspan and add a virtual forth col of 50% width:
tbody tr:after {
content: '';
display: table-cell;
width:50%
}
th {
background: gray;
border: solid;
}
table {
width: 100%;
}
<table>
<thead>
<tr>
<th colspan="4">Extra details</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>
You can use the caption element, which spans the table's width and is more semantically correct in your situation since it describes the entire table. Then use a pseudo-element to fill the remaining space in the rows and collapse the other columns.
table {
width: 100%;
}
caption {
border: 2px solid darkgray;
background-color: lightgray;
}
tr:after {
display: table-cell;
content: "";
width: 100%;
}
<table>
<caption>Extra details</caption>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>