I have 8 td in my table and my problem is I would like to wrap the td every 4th column. So in short, I want the 5th td will display in new line. Please help me. Thanks.
<div id="schedule">
<table>
<tbody>
<tr>
<td>terdg</td>
<td>yhr6t</td>
<td>yhr6t</td>
<td>yhr6t</td>
<td>hgf</td>
<td>gdrg</td>
<td>tyht</td>
<td>drf</td>
</tr>
</tbody>
</table>
</div>
If you must retain the same HTML structure you can manage this with floats but it's likely that you will lose the "tableness" of the cells and you may have to adjust accordingly.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
table {}
td {
float: left;
width: 25%;
padding: 1em;
border: 1px solid grey;
white-space: nowrap;
}
td:nth-child(4n + 1) {
clear: both;
}
<div id="schedule">
<table>
<tbody>
<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>
<td>cell 9</td>
<td>cell 10</td>
<td>cell 11</td>
<td>cell 12</td>
</tr>
</tbody>
</table>
</div>
<div id="schedule">
<table>
<tbody>
<tr>
<td>terdg</td>
<td>yhr6t</td>
<td>yhr6t</td>
<td>yhr6t</td>
</tr>
<tr>
<td>hgf</td>
</tr>
<tr>
<td>gdrg</td>
<td>tyht</td>
<td>drf</td>
</tr>
</tbody>
</table>
</div>
Related
I have a table where the 1st column and 1st row and frozen and have horizontal and vertical scrollbars to go through the entire table within a 500x500 div
When the page refreshes, I lose the position of the 2 scrollbars and the table pops back to the top
Is it possible to preserve the scrollbars?
I have a table where the 1st column and 1st row and frozen and have horizontal and vertical scrollbars to go through the entire table within a 500x500 div
When the page refreshes, I lose the position of the 2 scrollbars and the table pops back to the top
Is it possible to preserve the scrollbars?
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.intro {
max-width: 1280px;
margin: 1em auto;
}
.table-grid {
position: relative;
width: 100%;
z-index: 1;
margin: auto;
overflow: auto;
height: 350px;
}
.table-grid table {
width: 100%;
min-width: 1280px;
margin: auto;
border-collapse: separate;
border-spacing: 0;
}
.table-wrap {
position: relative;
}
.table-grid th,
.table-grid td {
padding: 5px 10px;
border: 1px solid #000;
background: #fff;
vertical-align: top;
}
.table-grid thead th {
background: #333;
color: #fff;
position: -webkit-sticky;
position: sticky;
top: 0;
}
/* safari and ios need the tfoot itself to be position:sticky also */
.table-grid tfoot,
.table-grid tfoot th,
.table-grid tfoot td {
position: -webkit-sticky;
position: sticky;
bottom: 0;
background: #666;
color: #fff;
z-index: 4;
}
th:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
background: #ccc;
}
thead th:first-child,
tfoot th:first-child {
z-index: 5;
}
/*Highlight rows*/
.table_grid tr:hover,
.table_grid tr:hover td {
background-color: rgba(220, 220, 220, 0.5);
}
/*Highlight rows including header
.table_grid tr:hover th,
.table_grid tr:hover td {
background-color: rgba(220, 220, 220, 0.5);
}
*/
.mvcode_right:hover .mvtooltip_right {
display: block;
}
.mvtooltip_right {
display: none;
background: black;
color: white;
margin-left: 100px;
padding: 10px;
position: absolute;
z-index: 1000;
border-radius: 6px;
opacity: 0.8;
}
<div class="table-grid">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 1</th>
<th>Header 1</th>
<th>Header 1</th>
<th>Header 1</th>
<th>Header 1</th>
<th>Header 1</th>
<th>Header 1</th>
</tr>
</thead>
<tbody>
<tr>
<th>
<div class="mvcode_right">
First top Column
</div>
</th>
<td>Cell content<br> test </td>
<td>Cell content longer</td>
<td>Cell content with more content and more content Cell </td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th>
<div class="mvcode_right">
Second top Column
</div>
</th>
<td>Cell content<br> test </td>
<td>Cell content longer</td>
<td>Cell content with more content and more content Cell </td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th>
<div class="mvcode_right">
Third top Column
</div>
</th>
<td>Cell content<br> test </td>
<td>Cell content longer</td>
<td>Cell content with more content and more content Cell </td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th>
<div class="mvcode_right">
Forth top Column
</div>
</th>
<td>Cell content<br> test </td>
<td>Cell content longer</td>
<td>Cell content with more content and more content Cell </td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th>
<div class="mvcode_right">
Fifth top Column
</div>
</th>
<td>Cell content<br> test </td>
<td>Cell content longer</td>
<td>Cell content with more content and more content Cell </td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th>
<div class="mvcode_right">
Sixth top Column
</div>
</th>
<td>Cell content<br> test </td>
<td>Cell content longer</td>
<td>Cell content with more content and more content Cell </td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th>
<div class="mvcode_right">
Seventh top Column
</div>
</th>
<td>Cell content<br> test </td>
<td>Cell content longer</td>
<td>Cell content with more content and more content Cell </td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</table>
</div>
You can listen for scroll event and store scroll position in localStorage:
const table = document.querySelector(".table-grid");
table.scrollTop = localStorage.getItem("scrollTop");
table.scrollLeft = localStorage.getItem("scrollLeft");
table.addEventListener("scroll", e =>
{
localStorage.setItem("scrollTop", e.target.scrollTop);
localStorage.setItem("scrollLeft", e.target.scrollLeft);
});
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.intro {
max-width: 1280px;
margin: 1em auto;
}
.table-grid {
position: relative;
width: 100%;
z-index: 1;
margin: auto;
overflow: auto;
height: 350px;
}
.table-grid table {
width: 100%;
min-width: 1280px;
margin: auto;
border-collapse: separate;
border-spacing: 0;
}
.table-wrap {
position: relative;
}
.table-grid th,
.table-grid td {
padding: 5px 10px;
border: 1px solid #000;
background: #fff;
vertical-align: top;
}
.table-grid thead th {
background: #333;
color: #fff;
position: -webkit-sticky;
position: sticky;
top: 0;
}
/* safari and ios need the tfoot itself to be position:sticky also */
.table-grid tfoot,
.table-grid tfoot th,
.table-grid tfoot td {
position: -webkit-sticky;
position: sticky;
bottom: 0;
background: #666;
color: #fff;
z-index: 4;
}
th:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
background: #ccc;
}
thead th:first-child,
tfoot th:first-child {
z-index: 5;
}
/*Highlight rows*/
.table_grid tr:hover,
.table_grid tr:hover td {
background-color: rgba(220, 220, 220, 0.5);
}
/*Highlight rows including header
.table_grid tr:hover th,
.table_grid tr:hover td {
background-color: rgba(220, 220, 220, 0.5);
}
*/
.mvcode_right:hover .mvtooltip_right {
display: block;
}
.mvtooltip_right {
display: none;
background: black;
color: white;
margin-left: 100px;
padding: 10px;
position: absolute;
z-index: 1000;
border-radius: 6px;
opacity: 0.8;
}
<div class="table-grid">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 1</th>
<th>Header 1</th>
<th>Header 1</th>
<th>Header 1</th>
<th>Header 1</th>
<th>Header 1</th>
<th>Header 1</th>
</tr>
</thead>
<tbody>
<tr>
<th>
<div class="mvcode_right">
First top Column
</div>
</th>
<td>Cell content<br> test </td>
<td>Cell content longer</td>
<td>Cell content with more content and more content Cell </td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th>
<div class="mvcode_right">
Second top Column
</div>
</th>
<td>Cell content<br> test </td>
<td>Cell content longer</td>
<td>Cell content with more content and more content Cell </td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th>
<div class="mvcode_right">
Third top Column
</div>
</th>
<td>Cell content<br> test </td>
<td>Cell content longer</td>
<td>Cell content with more content and more content Cell </td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th>
<div class="mvcode_right">
Forth top Column
</div>
</th>
<td>Cell content<br> test </td>
<td>Cell content longer</td>
<td>Cell content with more content and more content Cell </td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th>
<div class="mvcode_right">
Fifth top Column
</div>
</th>
<td>Cell content<br> test </td>
<td>Cell content longer</td>
<td>Cell content with more content and more content Cell </td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th>
<div class="mvcode_right">
Sixth top Column
</div>
</th>
<td>Cell content<br> test </td>
<td>Cell content longer</td>
<td>Cell content with more content and more content Cell </td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
<tr>
<th>
<div class="mvcode_right">
Seventh top Column
</div>
</th>
<td>Cell content<br> test </td>
<td>Cell content longer</td>
<td>Cell content with more content and more content Cell </td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</tbody>
</table>
</div>
https://jsfiddle.net/Lmdw538a/1/
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>
Here is a simple table. I want table column to rotate. That's why I have added a class text-flip. It will rotate the column data. But I want to change Cell 1, Cell 2 width based on column data width (after rotate). Like thebelow picture-
Here column data size may be change.
body{
padding-top: 50px;
}
.text-flip{
transform: rotate(-90deg);
}
<table border="1">
<tbody>
<tr>
<td class="text-flip">Column Data 1</td>
<td class="text-flip">Column Data 2</td>
<td class="text-flip">Column Data 3</td>
<td class="text-flip">Column Data 4</td>
<td class="text-flip">Column Data 5</td> </tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</tbody>
</table>
You can do it by combining writing-mode with a rotation to achieve vertical text. You'll also need to add the class to a div instead of the td.
Edge will treat the height of the div as though it was 100% width, making it take up the full height of the table, so we can add display: inline-block to make it only take up as much space as needed.
body{
padding-top: 50px;
}
.text-flip{
display: inline-block;
writing-mode: tb-rl;
transform: rotate(-180deg);
white-space: nowrap;
padding: 10px
}
<table border="1">
<tbody>
<tr>
<td ><div class="text-flip">Column Data 1</div></td>
<td><div class="text-flip">Column Data 2</div></td>
<td><div class="text-flip">Column Data 3</div></td>
<td><div class="text-flip">Column Data 4</div></td>
<td><div class="text-flip">Column Data 5</div></td> </tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</tbody>
</table>
You could use writing-mode if you can spare IE/Edge and Safari
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
body{
padding-top: 50px;
}
.text-flip{
writing-mode: vertical-lr;
}
<table border="1">
<tbody>
<tr>
<td class="text-flip">Column Data 1</td>
<td class="text-flip">Column Data 2</td>
<td class="text-flip">Column Data 3</td>
<td class="text-flip">Column Data 4</td>
<td class="text-flip">Column Data 5</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</tbody>
</table>
You can do like this :-
body{
padding-top: 50px;
}
.text-flip {
white-space: nowrap;
height: 120px;
vertical-align: bottom;
}
.text-flip > div {
transform: rotate(-90deg);
width: 30px;
}
.text-flip > div > span {
border-bottom: 1px solid #ccc;
padding: 5px 10px;
}
<table border="1">
<tbody>
<tr>
<td class="text-flip"><div><span>Column Data 1</span></div></td>
<td class="text-flip"><div><span>Column Data 2</span></div></td>
<td class="text-flip"><div><span>Column Data 3</span></div></td>
<td class="text-flip"><div><span>Column Data 4</span></div></td>
<td class="text-flip"><div><span>Column Data 5</span></div></td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</tbody>
</table>
I have been able to create four equi-sized/shaped quadrants on my page based on the accepted answer here.
So the page now looks like so:
I want to now give the quadrants some "elbow room" - some blank space around their edges. I tried adding margin to the classes they use:
.topleft {
background-color: blue;
margin: 4;
}
.topright {
background-color: red;
margin: 4;
}
.bottomleft {
background-color: green;
margin: 4;
}
.bottomright {
background-color: yellow;
margin: 4;
}
That did nothing; I tried then adding padding:
.topleft {
background-color: blue;
padding: 4;
}
.topright {
background-color: red;
padding: 4;
}
.bottomleft {
background-color: green;
padding: 4;
}
.bottomright {
background-color: yellow;
padding: 4;
}
...and that also did nothing.
What do I need to do to keep the same 1/4 space for all, but effectively "squish" them a scosh by adding margin between them or padding around them?
Here is the entire html/css:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>eServices Customer Dashboard</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Inline CSS (don't tell the CSS-Whisperers I did this!) -->
<style>
body {
background-color: azure;
}
.body-content {
-webkit-box-shadow: -1px 0 5px 0 #000000;
-webkit-box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .25);
box-shadow: -1px 0 5px 0 #000000;
box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .5);
padding-left: 1px;
padding-right: 1px;
padding-bottom: 15px;
}
.jumbotronjr {
padding: 12px;
margin-bottom: -16px;
font-size: 21px;
font-weight: 200;
color: inherit;
background-color: white;
}
.addltopmargin {
margin-top: 8px;
}
.sectiontext {
font-size: 1.5em;
font-weight: bold;
font-family: Candara, Calibri, Cambria, serif;
}
.bottommarginbreathingroom {
margin-bottom: 2px;
}
.marginaboveandbelow {
margin-top: 15px;
margin-bottom: 15px;
}
.rightjustifytext {
text-align: right;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.contents{
height:50%;
width:100%;
}
redfont {
color: red;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
flex-wrap: wrap;
}
.container div {
display: inline-block;
width: 50vw;
height: 50vh;
overflow-y: scroll;
}
.topleft {
background-color: blue;
padding: 4;
}
.topright {
background-color: red;
padding: 4;
}
.bottomleft {
background-color: green;
padding: 4;
}
.bottomright {
background-color: yellow;
padding: 4;
}
</style>
</head>
<body>
<div class="contents">
<div class="row">
<div class="col-md-6 topleft">
<h2>Top 10 Items Purchased</h2>
<div>
<input type="date" class="bottommarginbreathingroom" id="daterangefrom2" name="daterangefrom2">
</input>
<label> to </label>
<input type="date" class="bottommarginbreathingroom" id="daterangeto2" name="daterangeto2">
</input>
</div>
<table>
<tr>
<th>Item Code</th>
<th>Description</th>
<th>Qty</th>
</tr>
<tr>
<td>Item Code 1</td>
<td>Description 1</td>
<td>Qty 1</td>
</tr>
<tr>
<td>Item Code 2</td>
<td>Description 2</td>
<td>Qty 2</td>
</tr>
<tr>
<td>Item Code 3</td>
<td>Description 3</td>
<td>Qty 3</td>
</tr>
<tr>
<td>Item Code 4</td>
<td>Description 4</td>
<td>Qty 4</td>
</tr>
<tr>
<td>Item Code 5</td>
<td>Description 5</td>
<td>Qty 5</td>
</tr>
<tr>
<td>Item Code 6</td>
<td>Description 6</td>
<td>Qty 6</td>
</tr>
<tr>
<td>Item Code 7</td>
<td>Description 7</td>
<td>Qty 7</td>
</tr>
<tr>
<td>Item Code 8</td>
<td>Description 8</td>
<td>Qty 8</td>
</tr>
<tr>
<td>Item Code 9</td>
<td>Description 9</td>
<td>Qty 9</td>
</tr>
<tr>
<td>Item Code 10</td>
<td>Description 10</td>
<td>Qty 10</td>
</tr>
</table>
</div>
<div class="col-md-6 topright">
<h2>Pricing Exceptions - Weekly Recap</h2>
<h3 class="redfont">Red denotes Contract Item Overages</h3>
<h3>For Weyand on the pricing week of - 7/31/2016</h3>
<table>
<tr>
<th>Invoice No</th>
<th>Invoice Date</th>
<th>Customer</th>
<th>Cust #</th>
<th>Item Code</th>
<th>Description</th>
<th>Member Item Code</th>
<th>Member Description</th>
<th>Bid Price</th>
<th>Sell Price</th>
<th>Qty</th>
</tr>
<tr>
<td>Inv No 1</td>
<td>Inv Date 1</td>
<td>Customer 1</td>
<td>Cust # 1</td>
<td>Item Code 1</td>
<td>Descrip. 1</td>
<td>M.I. Code 1</td>
<td>Memb Desc 1</td>
<td>Bid Price 1</td>
<td>Sell Pr. 1</td>
<td>Qty 1</td>
</tr>
<tr>
<td>Inv No 2</td>
<td>Inv Date 2</td>
<td>Customer 2</td>
<td>Cust # 2</td>
<td>Item Code 2</td>
<td>Descrip. 2</td>
<td>M.I. Code 2</td>
<td>Memb Desc 2</td>
<td>Bid Price 2</td>
<td>Sell Pr. 2</td>
<td>Qty 2</td>
</tr>
<tr>
<td>Inv No 3</td>
<td>Inv Date 3</td>
<td>Customer 3</td>
<td>Cust # 3</td>
<td>Item Code 3</td>
<td>Descrip. 3</td>
<td>M.I. Code 3</td>
<td>Memb Desc 3</td>
<td>Bid Price 3</td>
<td>Sell Pr. 3</td>
<td>Qty 3</td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-md-6 bottomleft">
<h2>Forecasted Spend</h2>
<table>
<tr>
<th>Item</th>
<th>Last Week's Usage</th>
<th>This Week's Price</th>
<th>Forecasted Spend</th>
</tr>
<tr>
<td>Item 1</td>
<td>52</td>
<td>TWP 1</td>
<td>68.00</td>
</tr>
<tr>
<td>Item 2</td>
<td>49</td>
<td>TWP 2</td>
<td>65.00</td>
</tr>
<tr>
<td>Item 3</td>
<td>46</td>
<td>TWP 3</td>
<td>63.00</td>
</tr>
<tr>
<td>Item 4</td>
<td>42</td>
<td>TWP 4</td>
<td>60.00</td>
</tr>
<tr>
<td>Item 5</td>
<td>40</td>
<td>TWP 5</td>
<td>58.00</td>
</tr>
<tr>
<td>Item 6</td>
<td>42</td>
<td>TWP 6</td>
<td>60.00</td>
</tr>
<tr>
<td>Item 7</td>
<td>43</td>
<td>TWP 7</td>
<td>61.00</td>
</tr>
<tr>
<td>Item 8</td>
<td>43</td>
<td>TWP 8</td>
<td>61.00</td>
</tr>
<tr>
<td>TOTAL</td>
<td>314</td>
<td></td>
<td>$496.00</td>
</tr>
</table>
</div>
<div class="col-md-6 bottomright">
<h2>Fill Rate</h2>
<table>
<tr>
<th>Unit</th>
<th>Co. Name</th>
<th>Desc</th>
<th>Ord</th>
<th>Ship</th>
<th>Var</th>
</tr>
<tr>
<td>Unit 1</td>
<td>Co. Name 1</td>
<td>Desc 1</td>
<td>40</td>
<td>40</td>
<td>0</td>
</tr>
<tr>
<td>Unit 2</td>
<td>Co. Name 2</td>
<td>Desc 2</td>
<td>40</td>
<td>40</td>
<td>0</td>
</tr>
<tr>
<td>Unit 3</td>
<td>Co. Name 3</td>
<td>Desc 3</td>
<td>40</td>
<td>40</td>
<td>0</td>
</tr>
<tr>
<td>Unit 4</td>
<td>Co. Name 4</td>
<td>Desc 4</td>
<td>40</td>
<td>40</td>
<td>0</td>
</tr>
<tr>
<td>Unit 5</td>
<td>Co. Name 5</td>
<td>Desc 5</td>
<td>40</td>
<td>40</td>
<td>0</td>
</tr>
<tr>
<td>Unit 6</td>
<td>Co. Name 6</td>
<td>Desc 6</td>
<td>40</td>
<td>40</td>
<td>0</td>
</tr>
<tr>
<td>Unit 7</td>
<td>Co. Name 7</td>
<td>Desc 7</td>
<td>40</td>
<td>39</td>
<td>1</td>
</tr>
<tr>
<td>Unit 8</td>
<td>Co. Name 8</td>
<td>Desc 8</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>TOTAL</td>
<td></td>
<td></td>
<td>280</td>
<td>279</td>
<td>1</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
UPDATE
Adding padding just has the appearance of bloating the quadrants, not providing any breathing room between them. It looks more or less as if a "top" property was assigned to the first element, pushing it further down.
Adding margin (16px) causes the quadrants to line up vertically on the page - all on the left, nothing on the right. The four pieces are stacked vertically, each one atop the next.
Both margin and padding take CSS length units. There's a lot of different ones as they classify in absolute units (pixels or px being the most common) or relative ones (em, rem being the most common). You may also use a dimension value which is given by percentages % even though is not a length value.
For the full list and an in-depth explanation please refer here.
In your case probably padding will help you out, and you may want to use a bigger value than 4px.
Don't add new classes to the divs containing the bootstrap column classes. Instead, create a child div and apply your styles to the inner div.
For example:
Replace
<div class="row">
<div class="col-md-6 topleft">
...
</div>
</div>
with
<div class="row">
<div class="col-md-6">
<div class="topleft">
...
</div>
</div>
</div>
This way you're controlling the overall boundary of the container in the outer div and styling it (adding margins, padding) in the inner div.
Also, use px/em units for padding/margin as others suggested.
Codepen: http://codepen.io/anon/pen/vKQwyg
Add a unit to your margin / padding, such as px (absolute) or em (relative). Please refer to this: http://www.w3schools.com/css/css_padding.asp
Give the unit of margin & padding property like px, em. Try giving margin: 4px;. But 4px seem very small.
I would like to have a table with a scrollbar to the right.
I want to accomplish this without any plugins(jQuery) just with css.
The table header is supposed to stay fixed.
What do I need to do to get this working?
You have taken on a task that, if you succeed, will make you a hero. I tried this and the straightforward thing -- to position:fixed; the <thead> -- is impossible. I had to copy all of the <thead> into a new object. But when you do that, the horizontal spacing of the <th> elements all goes away so the headings don't line up with the <td>s anymore. I ended up doing something like this:
First of all, abandon ie6 and ie7. There's no hope for those guys.
Make two copies of the table, one where the body is invisible and the <thead> is visible, and the other where it's vice-versa.
Give z-index:1; to the table with the visible <thead>.
Give z-index:0; to the table with the visible <tbody>.
Deal with horizontal scrolling, but not until after you find that onScroll isn't an ie8 event (not to mention ie6), so that you have to take a setInterval break every tenth of a second or so just to handle scrolling the <thead> left and right in ie8.
This will give you a table body of infinite scroll in both axes, with a table head that scrolls in the x axis only. Pretty much works in FF, Chrome, and Safari. But is shaky in ie8. A real pita.
Good luck, and please write if you get this to work!
Only the Firefox and IE6-7 browsers support the built-in <tbody> scrolling:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Scrolling</title>
<style type="text/css">
div.content
{
border: #000000 1px solid;
height: 400px;
overflow-y: auto;
width: 800px;
}
.fixedHeader
{
white-space: nowrap;
}
.fixedHeader tr
{
height: auto;
position: relative;
}
.fixedHeader tr td
{
background-color: #778899;
border: #000000 1px solid;
text-align: center;
}
tbody.scrollContent
{
overflow-x: hidden;
overflow-y: auto;
height: 370px;
}
.scrollContent tr td
{
background-color: #C0C0C0;
border: #000000 1px solid;
padding-right: 22px;
vertical-align: top;
}
</style>
<!--[if IE]>
<style type=text/css>
div.content
{
overflow-x: hidden;
overflow-y: auto;
}
</style>
<![endif]-->
</head>
<body>
<div>
<div class="content">
<table cellspacing="0">
<thead class="fixedHeader">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td>Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented.</td>
<td>Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. </td>
<td>Pages can be displayed either with or without tabs. </td>
<td>Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented.</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Here is the solution,
Table fixed header and the content inside the table can be scrollable.
HTML Part
<div class="table_wrapper">
<div class="header">
<div class="head1">Left</div>
<div class="head2">Center</div>
<div class="head3">Right Column</div>
</div>
<div class="tbody">
<table>
<tbody><tr><td class="td1">1</td><td class="td2">2</td><td class="td3">3</td></tr>
<tr><td class="td1">1</td><td>2</td><td class="td3">3</td></tr>
<tr><td class="td1">2</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">3</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
<tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
</tbody></table>
</div>
</div>
CSS Part
.table_wrapper {background:tomato;border:1px double olive;float:left;}
.tbody{height:80px;overflow-y:auto;width:400px;background:yellow;}
table{border-collapse:collapse; width:100%;}
td{border-right:1px solid red;border-bottom:1px solid red;padding:1px 5px;}
.td3{border-right-width:0;}
.header{ width:400px;background:DodgerBlue;border-bottom:1px solid red;}
.header div{padding:1px 5px;float:left;border-right:1px solid orange;}
.header .head3{float:none;border-right-width:0;}
.head3 span{padding-left:5px;}
.td1{width:100px;}
.td2{width:140px;}
.header .head1{width:100px;}
.header .head2{width:140px;}
This simple CSS should do the trick:
table.table-scroll-body {
position: relative;
height: 200px; }
table.table-scroll-body tbody {
position: absolute;
width: 100%;
max-height: 150px;
overflow: auto; }
And the HTML if you need it..
<table class="table-scroll-body">
<thead>
<th>Header 1</th>
<th>Header 2</th>
</thead>
<tbody>
<tr>
<td>Some content..</td>
<td>Some content..</td>
</tr>
<tr>
<td>Some content..</td>
<td>Some content..</td>
</tr>
<tr>
<td>Some content..</td>
<td>Some content..</td>
</tr>
</tbody>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
table
{
width: 320px;
display: block;
border:solid black 1px;
}
thead
{
display: inline-block;
width: 100%;
height: 20px;
}
tbody
{
height: 200px;
display: inline-block;
width: 100%;
overflow: auto;
}
th, td
{
width: 100px;
text-align:center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</tr>
</tbody>
</table>
</body>
</html>
branching off of astrandr's answer.. here is how I did it, using their example:
css:
.transactHistory table
{
width: 320px;
display: block;
}
.transactHistory thead
{
display: inline-block;
}
.transactHistory tbody
{
height: 133px;
display: inline-block;
width: 100%;
overflow: auto;
}
.transactHistory th
{
width: 100px;
text-align:center;
}
.transactHistory tr
{
width: 100px;
text-align:center;
}
.transactHistory td
{
width: 100px;
text-align:center;
}
Table:
<div class="transactHistory">
(..table code)
</div>
This works, took it right off my website:
#news_box {
overflow: scroll;
overflow-x: hidden;
}
EDIT:
I also just found this with a nice example:
http://www.imaputz.com/cssStuff/bigFourVersion.html
Here's another good article on it:
http://www.scientificpsychic.com/blogentries/html-and-css-scrolling-table-with-fixed-heading.html