Fixed headers and scroll in HTML

Fixed headers and scroll in HTML - html

I created a table and in that table I also want scroll and want to fixed headers when scroll is display.
I also used position:fixed but this does not work. In fact, when I add this then all headers come in one position.
This is what I have tried. Check this code please:
.GridviewScrollHeader TH, .GridviewScrollHeader TD
{
padding: 5px;
font-weight: bold;
white-space: nowrap;
border-right: 1px solid #AAAAAA;
border-bottom: 1px solid #AAAAAA;
background-color: #EFEFEF;
text-align: left;
vertical-align: bottom;
}
.GridviewScrollItem TD
{
padding: 5px;
white-space: nowrap;
border-right: 1px solid #AAAAAA;
border-bottom: 1px solid #AAAAAA;
background-color: #FFFFFF;
}
.GridviewScrollPager
{
border-top: 1px solid #AAAAAA;
background-color: #FFFFFF;
}
.GridviewScrollPager TD
{
padding-top: 3px;
font-size: 14px;
padding-left: 5px;
padding-right: 5px;
}
.GridviewScrollPager A
{
color: #666666;
}
.GridviewScrollPager SPAN
{
font-size: 16px;
font-weight: bold;
}
.inner_table {
width: 100%;
border-collapse: collapse;
overflow: auto;
height: 300px;
}
#pagination a {
display:inline-block;
margin-right:5px;
}
<table ID="tabledata" class="inner_table GridviewScrollPager">
<thead>
<tr class="GridviewScrollHeader GridviewScrollItem">
<th>
Name
</th>
<th>
Class
</th>
</tr>
</thead>
<tbody>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td >
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
Roh
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
ABC
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
DEF
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
EFG
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
</tbody>
</table>
So how should I fix the headers and add scroll?
Any solution for this question please.

tr {
width: 100%;
display: inline-table;
table-layout: fixed;
}
table {
display: -moz-groupbox; // Firefox Bad Effect
}
tbody {
overflow-y: scroll;
height: 250px; // <-- Select the height of the body
width: 100%;
position: absolute;
}
.GridviewScrollHeader TH,
.GridviewScrollHeader TD {
padding: 5px;
font-weight: bold;
white-space: nowrap;
border-right: 1px solid #AAAAAA;
border-bottom: 1px solid #AAAAAA;
background-color: #EFEFEF;
text-align: left;
vertical-align: bottom;
}
.GridviewScrollItem TD {
padding: 5px;
white-space: nowrap;
border-right: 1px solid #AAAAAA;
border-bottom: 1px solid #AAAAAA;
background-color: #FFFFFF;
}
.GridviewScrollPager {
border-top: 1px solid #AAAAAA;
background-color: #FFFFFF;
}
.GridviewScrollPager TD {
padding-top: 3px;
font-size: 14px;
padding-left: 5px;
padding-right: 5px;
}
.GridviewScrollPager A {
color: #666666;
}
.GridviewScrollPager SPAN {
font-size: 16px;
font-weight: bold;
}
.inner_table {
width: 98.4%;
border-collapse: collapse;
overflow: auto;
}
#pagination a {
display: inline-block;
margin-right: 45px;
}
<table ID="tabledata" class="inner_table GridviewScrollPager">
<thead>
<tr class="GridviewScrollHeader GridviewScrollItem">
<th>
Name
</th>
<th>
Class
</th>
</tr>
</thead>
<tbody>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
Roh
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
ABC
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
DEF
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
EFG
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
<tr class="GridviewScrollItem">
<td>
John
</td>
<td>
12
</td>
</tr>
</tbody>
</table>

Related

How can I make columns in two tables have same width?

How can I make columns in two tables have the same width?
I tried applying the width property on the td element for each column and the property style = "table-layout: fixed; but as you can see, the boundaries of the columns do not match.
JSFiddle: https://jsfiddle.net/v2bxdygj/

Here is my sample which works to some extent:
table {
border: 1px solid grey;
border-collapse:collapse;
width: 100%;
table-layout:fixed;
}
td {
border: 1px solid grey;
padding-left: 5px;
padding-right: 5px;
white-space: nowrap;
}
td span {
white-space: nowrap;
}
.code {
width: 40px;
}
.name {
width: 548px;
}
.colspan {
width: 588px;
}
.col3, .col4, .col5 {
width: 10%;
}
<table>
<tr>
<td class="code"><button>Код</button></td>
<td class="name"><button>Название</button></td>
<td class="col3"> </td>
<td class="col4"> </td>
<td class="col5"> </td>
</tr>
<tr>
<td class="colspan" colspan="2"><input type="text"> <span>Фильтр по коду и названию...</span></td>
<td class="col3">Разрешено</td>
<td class="col4">Запрещено</td>
<td class="col5">Неопределено</td>
</tr>
</table>
<table>
<tr>
<td class="code">1</td>
<td class="name">Вход в систему</td>
<td class="col3"> </td>
<td class="col4"> </td>
<td class="col5"> </td>
</tr>
<tr>
<td>2</td>
<td>Редактирование, администрирование групп и пользователей</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td>Создание или редактирование определения адресного элемента</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>4</td>
<td>Создание или редактирование записи адресного элемента</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

Can I have text and a div in the same table column? [duplicate]

This question already has answers here:
How do I prevent DIV tag starting a new line?
(11 answers)
Closed 5 years ago.
I currently have a static table, because i can always expect the same outcome. I have kind of headlines, in which i combine the 2 columns and then theres data. It looks similar to this one:
table {
border-collapse: collapse;
empty-cells: hide;
text-align: left;
}
td {
text-align: left;
border: 1px solid #a7a7a7;
padding: 5px;
}
<table>
<tr>
<td colspan=2><b>Headline 1</b></td>
</tr>
<tr>
<td> Description a </td>
<td> Data a </td>
</tr>
<tr>
<td> Description b </td>
<td> Data b </td>
</tr>
<tr>
<td> Description c </td>
<td> Data c </td>
</tr>
<tr>
<td colspan=2><b>Headline 2</b></td>
</tr>
<tr>
<td> Description d </td>
<td> Data d </td>
</tr>
<tr>
<td> Description e </td>
<td> Data e </td>
</tr>
<tr>
<td> Description f </td>
<td> Data f </td>
</tr>
</table>
Now I want to add a small icon which the user can click to open a help menu, which explains the shown data. I tried solving this, by adding a div into the same td but it will force my div into a new line. See below:
(Note: I wouldnot have text, but a 13px by 13px background-image. The Text inside the div is to show the new line, the new line is not because of the text.
table {
border-collapse: collapse;
empty-cells: hide;
text-align: left;
}
td {
text-align: left;
border: 1px solid #a7a7a7;
padding: 5px;
}
div.icon {
width: 13px;
height: 13px;
}
<table>
<tr>
<td colspan=2>
<b>Headline 1</b>
<div class="icon">example</div>
</td>
</tr>
<tr>
<td> Description a </td>
<td> Data a </td>
</tr>
<tr>
<td> Description b </td>
<td> Data b </td>
</tr>
<tr>
<td> Description c </td>
<td> Data c </td>
</tr>
<tr>
<td colspan=2><b>Headline 2</b></td>
</tr>
<tr>
<td> Description d </td>
<td> Data d </td>
</tr>
<tr>
<td> Description e </td>
<td> Data e </td>
</tr>
<tr>
<td> Description f </td>
<td> Data f </td>
</tr>
</table>
Is there any known solution for my problem?

You need to give your div display:inline
table {
border-collapse: collapse;
empty-cells: hide;
text-align: left;
}
td {
text-align: left;
border: 1px solid #a7a7a7;
padding: 5px;
}
div.icon {
width: 13px;
height: 13px;
}
.icon {
display: inline;
}
<table>
<tr>
<td colspan=2><b>Headline 1</b><div class="icon">example</div></td>
</tr>
<tr>
<td> Description a </td>
<td> Data a </td>
</tr>
<tr>
<td> Description b </td>
<td> Data b </td>
</tr>
<tr>
<td> Description c </td>
<td> Data c </td>
</tr>
<tr>
<td colspan=2><b>Headline 2</b></td>
</tr>
<tr>
<td> Description d </td>
<td> Data d </td>
</tr>
<tr>
<td> Description e </td>
<td> Data e </td>
</tr>
<tr>
<td> Description f </td>
<td> Data f </td>
</tr>
</table>

Sticky td (headers) with rowspan

I would like to create rowspan on my sticky header but can't get it work.
JsFiddle: http://jsfiddle.net/x62v5ea8/1/
What i need is to connect first and second td in 'Header 1'
Can someone help me with this problem ?
HTML
<div class="my-wrapper">
<div class="my-scroller">
<table class="myTable">
<thead>
<tr>
<th class="my-sticky-col">Header 1</th>
<th class="my-sticky-col2">Header 2</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
<th>11</th>
<th>12</th>
<th>13</th>
<th>14</th>
<th>15</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2" class="my-sticky-col">A</td>
<td class="my-sticky-col2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="my-sticky-col"> </td>
<td class="my-sticky-col2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="my-sticky-col">C</td>
<td class="my-sticky-col2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
CSS
body {
font-size: 1em;
}
.myTable {
border: none;
border-right: solid 1px #DDEFEF;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.myTable thead th {
background-color: #EEE;
border: none;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.myTable tbody td {
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.myTable tbody td, .myTable thead th {
border: 1px solid #ccc;
}
.my-wrapper {
position: relative;
}
.my-scroller {
margin-left: 283px;
overflow-x: scroll;
overflow-y: visible;
padding-bottom: 5px;
width: 300px;
}
.myTable .my-sticky-col {
left: 0;
position: absolute;
top: auto;
width: 120px;
}
.myTable .my-sticky-col2 {
border-right: solid 1px #000;
left: 142px;
position: absolute;
width: 120px;
}

Your code is actually working correctly. You are not seeing the rowspan working because the absolute positioning that is used for the sticky header. I updated your JS Fiddle with a few tweeks so you can see what is going on. http://jsfiddle.net/x62v5ea8/2/
You can see in the HTML I commented out the cell that will used by the rowspan and added a .test class with a height and background color so you can see that the cell is now fully expanding. Alternatively you can remove the position: absolute and you see the same results but your header wont be sticky anymore.

Scrollable table inside another table

Here is a piece of code that I have written to put 2 tables inside a bigger table. But i am not able to fix the size of <td> of the outer table. I want to make the <td> of outer table scrollable so that I can scroll the table inside the <td> of the outer table:
Fiddle
Example
<table id="maintable">
<tr>
<td>
<table class="smsSecond">
<tr style="background-color: #3C3C3C;">
<td colspan="2" width="auto" align="center">
Resolution
<!--img id="delete" src="icons/delete.png" height="10" width="10" style="float: right;"/-->
</td>
</tr>
<!--odd row-->
<tr class="oddrow" align="center">
<td>
Harsha P
</td>
<td>
-NA-
</td>
</tr>
</table>
</td>
<td>
<table class="smsSecond"><!--bgcolor="#4ab54d"><class="smsSecond"-- this is td bgcolor: bgcolor="#4ab54d"-->
<tr style="background-color: #3C3C3C;" >
<td colspan="2" width="auto" align="center">
Ticket Info
</td>
</tr>
<!--odd row-->
<tr class="oddrow" align="center"><!-- style="color: #000000; font-size: 12px;"-->
<td>
Ticket number
</td>
<td>
HFK-864-69976
</td>
</tr>
<!--even row-->
<tr class="evenrow" align="center"><!--style="color: #000000; font-size: 15px; background-color: #FFFFFF" --><!--background-color: #A4EAF6-->
<td>
Department
</td>
<td>
Support
</td>
</tr>
<!--odd row-->
<tr class="oddrow" align="center">
<td>
Priority
</td>
<td>
P3-Normal
</td>
</tr>
<!--even row-->
<tr class="evenrow" align="center">
<td>
Open Date and Time
</td>
<td>
2011-02-28 21:24:01
</td>
</tr>
<!--odd row-->
<tr class="oddrow" align="center">
<td>
Close Date and Time
</td>
<td>
2011-02-28 21:24:01
</td>
</tr>
<!--even row-->
<tr class="evenrow" align="center">
<td>
Total Time
</td>
<td>
00:03:09
</td>
</tr>
<!--odd row-->
<tr class="oddrow" align="center">
<td>
Ticket Spent
</td>
<td>
00:02:00
</td>
</tr>
<!--even row-->
<tr class="evenrow" align="center">
<td>
No. of staff worked
</td>
<td>
2
</td>
</tr>
<!--odd row-->
<tr class="oddrow" align="center">
<td>
Ticket Status
</td>
<td>
Closed
</td>
</tr>
<!--even row-->
<tr class="evenrow" align="center">
<td>
SLA
</td>
<td>
Yes
</td>
</tr>
<!--odd row-->
<tr class="oddrow" align="center">
<td>
Type
</td>
<td>
Issue
</td>
</tr>
<!--even row-->
<tr class="evenrow" align="center">
<td>
Red Flag
</td>
<td>
0
</td>
</tr>
<!--odd row-->
<tr class="oddrow" align="center">
<td>
Yellow Flag
</td>
<td>
0
</td>
</tr>
<!--even row-->
<tr class="evenrow" align="center">
<td>
Orange Flag
</td>
<td>
0
</td>
</tr>
<!--odd row-->
<tr class="oddrow" align="center">
<td>
Closed by
</td>
<td>
Harsha p
</td>
</tr>
</table>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
The CSS that I have used so far is:
.smsSecond{
border-radius: 4px;
padding: 8px 8px 8px 8px;
/*max-height: 333px;
overflow: scroll;*/
font-family:Arial;
font-size: 12px;
color: #FFFFFF;
background-color: #CACACA;
border: 1px solid black;
/*background-color: #1AB0EA;*/
}
.smsSecond .oddrow{
color: #000000;
font-size: 12px;
}
.smsSecond .evenrow{
color: #000000;
font-size: 12px;
background-color: #FFFFFF;
}
td{
padding:5px;
font-size: 13px;
width: 290px;
overflow: scroll;
text-overflow: string;
white-space: nowrap;
border: 1px solid black;
}
tr a{
color: #4EB145;
}
tr a:hover{
color: #4EB145;
text-decoration: none;
font-weight: bolder;
}
What should I use for the outer table's field to be of fixed size and scrollable?
What should be the CSS property of #maintable?
Please help.
Thanks in advance.

You can wrap you inner table within a div:
HTML:
<div class="inner_wrapper">
<table ...
CSS:
.inner_wrapper {
overflow:scroll;
height: 110px;
}
Here is the result:
http://jsfiddle.net/Ye2zV/

You can add the whole code of yours inside a div and add to it a height and overflow:auto;
fiddle:
http://jsfiddle.net/2nu5Q/
Hope it helps mate.
Bill.

Table Thead Does not match up with TD Cells and Does not respect the table size

How can the code below be modified such that the Table THead matches up with the TD's and also respect the size (width) of the table? What is happening now is that the table headers expand beyond the size of the div and the table horizontally accross the page.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<style type="text/css">
/*------------------------------------------------------------------
Table Style
------------------------------------------------------------------ */
table a:link {
color: #666;
font-weight: bold;
text-decoration:none;
}
table a:visited {
color: #999999;
font-weight:bold;
text-decoration:none;
}
table a:active,
table a:hover {
color: #bd5a35;
text-decoration:underline;
}
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
background:#eaebec;
border-radius:3px;
border-collapse:collapse; border-spacing: 0;
box-shadow: 0 1px 2px #d1d1d1;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
table-layout: fixed;
}
table th {
border-bottom:1px solid #ccc;
border-left: 1px solid #ccc;
background: #ededed;
}
table tr {
text-align: center;
}
table td {
border-bottom:1px solid #ccc;
border-left: 1px solid #ccc;
background: #fafafa;
text-align: left;
}
table tr:hover td {
background: #f2f2f2;
}
table th, table td {
height: 20px;
width: 200px;
}
#container {
width : 98.7%;
height: 300px;
overflow-x: scroll;
overflow-y: scroll;
}
table tr td:first-child, table tr th:first-child {
border-left: 0;
}
table thead {
_position: fixed;
_position: relative;
_position: absolute;
}
TABLE THEAD TR TH {
top:expression(this.offsetParent.scrollTop);
border-top:1px solid #ccc;
_position:relative;
_position: absolute;
_position: fixed;
}
table tr:first-child td {
border-top: 0;
}
</style>
</head>
<body>
<div id="container">
<table id="data">
<!-- Table Header -->
<thead>
<tr>
<th>File Number</th>
<th> </th>
<th> </th>
<th>Firstname</th>
<th>Lastname</th>
<th>Progress</th>
<th>Vital Task</th>
</tr>
</thead>
<!-- Table Header -->
<!-- Table Body -->
<tbody>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Table Row -->
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Darker Table Row -->
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>20%</td>
<td>No</td>
</tr>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>23%</td>
<td>yes</td>
</tr>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td>Hyperlink Example</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>80%</td>
<td>Another</td>
</tr>
</tbody>
<!-- Table Body -->
</table>
<script>
$(function() {
$( "#data tr th" ).resizable({
handles: 'e'
});
});
</script>
</div>
</body>
</html>
ETA http://jsfiddle.net/KrB79/

Fix the container's CSS Coding to:
#container {
width : 98.7%;
height: 300px;
overflow-x: scroll;
overflow-y: scroll;
position: fixed;
}
Problem solved with IE7.

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Fixed headers and scroll in HTML - html

Related

How can I make columns in two tables have same width?

Can I have text and a div in the same table column? [duplicate]

Sticky td (headers) with rowspan

Scrollable table inside another table

Table Thead Does not match up with TD Cells and Does not respect the table size

Categories

Resources