How can I make a table in a div (that takes the remaining screen height) scrollable without scrolling the whole page?
I know how to make it scrollable inside the div by wrapping it like this
<div style="overflow: auto; height: 300px;">
<table>...</table>
</div>
but how can I make the div's height use all of the remaining screen height?
EDIT: here is my code so far:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Table</title>
<link rel=stylesheet href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="col-md-12">
<div class="panel panel-default">
<!-- Header -->
<div class="panel-heading">Panel Heading<button class="pull-right" onclick="myFunction();">
<span class="glyphicon glyphicon-filter"></span>
</button>
</div>
<div class="panel-body row" id="filter" style="display: none; padding-top: 0;">
<div class="col-md-6">
<div class="col-sm-6 column" style="height: auto; margin-top: 1em">
<!-- filter selector -->
</div>
</div>
</div>
<!-- Table -->
<div class="panel-body" style="overflow: auto; height: 300px;">
<table class="table">
...
</table>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById('filter');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
</body>
</html>
Use vh instead % : [100vh] vertical height
i set width 90%, you can change it.
table is always center because div.parent is margin: 0 auto
.parent {
background-color: #ccc;
width: 90%;
height: 100vh;
overflow: auto;
margin: 0 auto
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="parent">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>
</div>
use viewport percentages but it will not affect old ie.
height: 100vh;
with the overview, you can do the following
<div style="
overflow-y: auto;
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: n%;
border-left: 1px solid #000;
">
<table>...</table>
</div>
I'm leaving it on the right and I use the border-left so you can see that you need a reasonable width
EDIT: for edit html
you set parent tag position property with relative.
You using position: absolute; for div tag
Related
<html>
<body style="background: white;">
<table style="height: 100%;width: 100%;">
<tbody>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>
results in:
(this is pasted in a new tab so there is no extra Css styling or anything going on)
How can I stop the rows from growing to their max height but rather to the content height? (preferably without setting a fixed 20px height to the row)
Edit: I want to the table to still fill the whole page
You could try using flexboxes to achieve that:
table,
tr {
display: flex;
width: 100%;
}
tbody {
width: 100%;
}
th,
td {
display: inline-flex;
flex-grow: 1;
}
<body style="background: white;">
<table style="height: 100%; width: 100%">
<tbody>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
Just be mindful that you'll be loosing some of the table features.
Height 100% is not required
Remove it to take the minimum size table requires
I have a table that I'm trying to target the 5th row using CSS. It is buried under 4 divs.
What is the best way to target the table? It uses a class that is duplicated many times throughout the website on many other table but I only wish to target this table which I have added a class of .q4 to:
Basically I'm trying to change the bottom border of a row within the table which is nested in a div within a div, within a div, within a div. The full html is below:
<div class="mobile-league-table q4">
<div class="sportspress">
<div class"sp-template sp-template-league-table">
<h4 class="sp-table-caption">UAE Division 1</h4>
<div class="sp-table-wrapper">
<div class="sp-scrollable-table-wrapper">
<table class="sp-league-table sp-data-table sp-scrollable-table" data-sp-rows="10">
<thead>
<tr>
<th class="data-rank">Pos</th>
<th class="data-name">Team</th>
<th class="data-p">P</th>
<th class="data-w">W</th>
<th class="data-l">L</th>
<th class="data-d">D</th>
<th class="data-pf">PF</th>
<th class="data-pa">PA</th>
<th class="data-pd">PD</th>
<th class="data-bp">BP</th>
<th class="data-pts">Pts</th>
<th class="data-form">Form</th>
</tr>
</thead>
<tbody>
<tr class="odd sp-row-no-0">…</tr>
<tr class="even sp-row-no-1">…</tr>
<tr class="odd sp-row-no-2">…</tr>
<tr class="even sp-row-no-3">…</tr>
<tr class="odd sp-row-no-4">…</tr>
<tr class="even sp-row-no-5">…</tr>
<tr class="odd sp-row-no-6">…</tr>
<tr class="even sp-row-no-7">…</tr>
<tr class="odd sp-row-no-8">…</tr>
<tr class="even sp-row-no-9">…</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Thanks
Since the table inside the q4 div is the only one we can target it quite simply
.q4 table tbody tr:nth-child(your number here) td {
border-bottom: 1px solid black;
}
td {
padding:.25em;
}
.q4 table tbody tr:nth-child(3) td {
border-bottom: 1px solid black;
}
<div class="mobile-league-table q4">
<div class="sportspress">
<div class"sp-template sp-template-league-table">
<h4 class="sp-table-caption">UAE Division 1</h4>
<div class="sp-table-wrapper">
<div class="sp-scrollable-table-wrapper">
<table
class="sp-league-table sp-data-table sp-scrollable-table"
data-sp-rows="10"
>
<thead>
<tr>
<th class="data-rank">Pos</th>
<th class="data-name">Team</th>
<th class="data-p">P</th>
<th class="data-w">W</th>
<th class="data-l">L</th>
<th class="data-d">D</th>
<th class="data-pf">PF</th>
<th class="data-pa">PA</th>
<th class="data-pd">PD</th>
<th class="data-bp">BP</th>
<th class="data-pts">Pts</th>
<th class="data-form">Form</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
<td>Item 4</td>
<td>Item 5</td>
</tr>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
<td>Item 4</td>
<td>Item 5</td>
</tr>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
<td>Item 4</td>
<td>Item 5</td>
</tr>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
<td>Item 4</td>
<td>Item 5</td>
</tr>
<tr>
<td>Item 1</td>
<td>Item 2</td>
<td>Item 3</td>
<td>Item 4</td>
<td>Item 5</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Wordpress? Yikes.
Your best bet is to do some DOM manipulations after the HTML loads. I suggest using jquery. But if you can't import jquery into your project. You can still of course achieve this with javascript.
var x = document.getElementsByClassName('.sp-row-no-4');
x[0].innerHTML = "Hello World!";
getElementsByClassName() returns an array even if only one element is found via that class name. Hope that helps.
I have a 100% height layout split to three parts: header, content, footer.
I'd like to display a table inside a the content section with 100% height and i want the table body to have a vertical scroll bar for the table body content.
How can i do that?
it seems like i cannot set the tbody height to 100% and have a scrollbar?
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#container {
display: table;
width: 100%;
height: 100%;
border: 1px solid red;
text-align: center;
}
#container > div {
display: table-row;
width: 100%;
}
#container > div > div {
display: table-cell;
width: 100%;
border-radius:10px;
}
#header > div {
height:50px;
border:solid 2px #aaa;
}
#content > div {
height: 100%;
background:#f0f4f0;
border:solid 2px #5a5;
}
#footer > div {
height:50px;
border:solid 2px #a55;
}
table {
table-layout:fixed;
margin:auto;
}
th, td {
padding:5px 10px;
border:1px solid #000;
}
thead, tfoot {
background:#f9f9f9;
display:table;
width:100%;
width:calc(100% - 18px);
}
tbody {
height:400px;
overflow:auto;
overflow-x:hidden;
display:block;
width:100%;
}
tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
<div id="container">
<div id="header">
<div>header</div>
</div>
<div id="content">
<div>
<table>
<thead>
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
<th scope="col">Header 3</th>
<th scope="col">Header 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell2 content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
<td>Footer 4</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div id="footer">
<div>footer</div>
</div>
</div>
Your layout is a bit messed up. Too many containing div in my opinion. Did some changes using flex - so the table container will have
display: flex;
flex-direction: column;
overflow: auto;
and the table will have flex-grow: 1;
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
#container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
border: 1px solid red;
text-align: center;
}
#container>div {
width: 100%;
display: flex;
flex-direction: column;
}
#container>div>div {
width: 100%;
height: 100%;
border-radius: 10px;
overflow: auto;
}
#header {
flex-basis: 50px;
flex-grow: 0;
flex-shrink: 0;
}
#header>div {
height: 50px;
border: solid 2px #aaa;
}
#content {
flex-grow: 1;
}
#content>div {
height: 100%;
background: #f0f4f0;
border: solid 2px #5a5;
display: flex;
flex-direction: column;
}
#footer{
flex-basis: 50px;
flex-grow: 0;
flex-shrink: 0;
}
#footer>div {
height: 50px;
border: solid 2px #a55;
}
table {
flex-grow: 1;
table-layout: fixed;
margin: auto;
}
th,
td {
padding: 5px 10px;
border: 1px solid #000;
}
thead,
tfoot {
background: #f9f9f9;
display: table;
width: 100%;
width: calc(100% - 18px);
}
tbody {
overflow: auto;
overflow-x: hidden;
display: block;
width: 100%;
}
tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
<div id="container">
<div id="header">
<div>header</div>
</div>
<div id="content">
<div>
<table>
<thead>
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
<th scope="col">Header 3</th>
<th scope="col">Header 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell2 content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
<td>Footer 4</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div id="footer">
<div>footer</div>
</div>
</div>
I had to use javascript for this but maybe someone can come up with a pure CSS solution.
Main sections of the page
I'm using flexbox to position the header, main and footer sections of the page allowing the main to take up as much vertical space that it can:
body {
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
The Table
I set the table to take up 100% of the height and width in the main section and set each tr element to display flex allowing all their direct child elements to take up equal amounts of space:
table {
width: 100%;
height: 100%;
}
tr {
display: flex;
}
tr > * {
flex: 1;
}
I've set the tbody element to display: block which will allow for content to be scrollable if it overflows:
tbody {
display: block;
overflow-y: scroll;
}
tbody tr {
height: 40vh; // for demonstrating the scrolling of the tbody
}
I then used some javascript to set the height of the tbody element, please find the documentation in the comments below:
setTbodyHeight();
window.addEventListener("resize", setTbodyHeight);
function setTbodyHeight() {
// get the viewport height
let viewportHeight = window.innerHeight;
// calculate how much of the height the main should consume
let headerHeight = getHeight("header");
let footerHeight = getHeight("footer");
let mainHeight = viewportHeight - (headerHeight + footerHeight);
// from the main height calcuate how much space would be available if you subtracted the tfoot/thead height
let theadHeight = getHeight("thead");
let tfootHeight = getHeight("tfoot");
let tbodyHeight = mainHeight - (theadHeight + tfootHeight);
// set the height of the tbody to this value
let tbody = document.querySelector("tbody");
tbody.style.height = tbodyHeight + "px";
function getHeight(elementName) {
let element = document.querySelector(elementName);
let elementCSS = window.getComputedStyle(element);
let height = parseInt(elementCSS.getPropertyValue("height"));
return height;
}
}
/* IGNORE RULES FROM HERE.....*/
html,
body {
height: 100%;
}
body {
font-family: sans-serif;
margin: 0;
}
header::after,
footer::after {
content: "." attr(class);
}
tbody tr:nth-child(even) {
background: firebrick;
color: white
}
td {
text-align: center;
}
/*.....TO HERE*/
body {
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
table {
width: 100%;
height: 100%;
}
tr {
display: flex;
}
tr>* {
flex: 1;
}
tbody {
display: block;
overflow-y: scroll;
}
tbody tr {
height: 20vh;
}
tbody td {
line-height: 20vh;
}
<header class="header"></header>
<main class="main">
<table>
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer</td>
<td>Footer</td>
<td>Footer</td>
</tr>
</tfoot>
</table>
</main>
<footer class="footer"></footer>
I have the following issue with my bootstrap table. I cannot set a custom width to cells at table head. Even if I do, it's not set. I searched and learned that bootstrap does prevent that by adding padding to cells. But it still didn't work when I added padding:0 to each cell at table head. Anyways let me show the code and screenshots
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="table-responsive">
<table class="table table-hover table-white">
<thead>
<tr>
<th style="max-width: 1%;">#</th>
<th style="max-width: 48.5%;">Component</th>
<th style="max-width: 2.5%;">Unit Cost</th>
<th style="max-width: 2.5%;">Qty</th>
<th style="max-width: 2.5%;">Currency</th>
<th style="max-width: 13%;">WBS</th>
<th style="max-width: 14%;">Purchase Type</th>
<th style="max-width: 10%;">Vendor</th>
<th style="max-width: 2%;"></th>
<th style="max-width: 2%;"></th>
<th style="max-width: 2%;"></th>
</tr>
</thead>
</table>
</div>
</div>
It looks like this as you can see the width is not applied
However it should look like this without scrollbar.
So my questions are
How can I apply fixed width to those cells?
How can I make the table look 100% visible without that scrollbar. Somehow squeezing it
Thanks, beforehand. If anything else needs to be shared let me know, please.
You need to disable padding for all cells, not only the ones in the header.
If you do not want, that bigger content increases the column width, you should hide the overflow.
.table-responsive td,
.table-responsive th {
padding: 0 !important;
overflow: hidden;
}
If you want to resize the table to always fit into the screen, you would need some JavaScript.
(function() {
const responsiveTable = document.querySelector('.responsive-table table');
responsiveTable.style.transformOrigin = '0 0';
function resizeTable() {
responsiveTable.style.transform = 'scale(1)';
const tableWidth = responsiveTable.getBoundingClientRect().width;
const resizeFactor = document.body.offsetWidth / tableWidth;
responsiveTable.style.transform = `scale(${resizeFactor})`;
}
resizeTable();
window.addEventListener('resize', resizeTable);
})();
.responsive-table table {
background-color: red;
}
.responsive-table td,
.responsive-table th {
background-color: orange;
}
<div class="responsive-table">
<table>
<thead>
<tr>
<th style="width: 5%">Column 1</th>
<th style="width: 5%">Column 2</th>
<th style="width: 5%">Column 3</th>
<th style="width: 5%">Column 4</th>
<th style="width: 5%">Column 5</th>
<th style="width: 5%">Column 6</th>
<th style="width: 5%">Column 7</th>
<th style="width: 5%">Column 8</th>
<th style="width: 5%">Column 9</th>
<th style="width: 5%">Column 10</th>
<th style="width: 5%">Column 11</th>
<th style="width: 5%">Column 12</th>
<th style="width: 5%">Column 13</th>
<th style="width: 5%">Column 14</th>
<th style="width: 5%">Column 15</th>
<th style="width: 5%">Column 16</th>
<th style="width: 5%">Column 17</th>
<th style="width: 5%">Column 18</th>
<th style="width: 5%">Column 19</th>
<th style="width: 5%">Column 20</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
</tr>
<tr>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
</tr>
<tr>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
</tr>
</tbody>
</table>
</div>
you can code :
<div class="table-responsive">
<table class="table">
...
</table>
</div>
and style
.table-responsive {
display: table;
}
I've got this table, and in this table are 4 columns, like this:
Column1|Column2|Column3|Column4|
data 1 data 2 data 3 data 4
But how do I get it like this?
Column1| data 1
Column2| data 2
Column3| data 3
Column4| data 4
This is my code:
<table>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</tr>
</table>
Any ideas? Is it even possible?
Like this:
<table>
<tr>
<th>Column1</th>
<td>Data 1</td>
</tr>
<tr>
<th>Column2</th>
<td>Data 2</td>
</tr>
<tr>
<th>Column3</th>
<td>Data 3</td>
</tr>
<tr>
<th>Column4</th>
<td>Data 4</td>
</tr>
</table>
You put the th in the table rows
<table>
<tbody>
<tr>
<th>Column 1</th>
<td>Data 1</td>
</tr>
<tr>
<th>Column 2</th>
<td>Data 2</td>
</tr>
</tbody>
</table>
<table>
<tr>
<th>Column 1</th>
<td>Data 1</td>
</tr>
<tr>
<th>Column 2</th>
<td>Data 2</td>
</tr>
<tr>
<th>Column 3</th>
<td>Data 3</td>
</tr>
<tr>
<th>Column 4</th>
<td>Data 4</td>
</tr>
</table>
Maybe scope attribute can help you?
<table>
<tr scope="row">
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</tr>
<tr>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
<td>Some content</td>
</tr>
</table>
Also here, you get another solution by CSS.
you can use below pattern But i'll suggest you to use css tables : Page layout, Divs instead of Tables
<table>
<tr>
<th>Column1</th><td>data 1</td>
</tr>
<tr>
<th>Column1</th><td>data 1</td>
</tr>
<tr>
<th>Column1</th><td>data 1</td>
</tr>
<tr>
<th>Column1</th><td>data 1</td>
</tr>
</table>