I have an easy question, but I don't know where to start looking for a solution...
Suppose I have a large data table (more than 300 rows) in HTML, very simply in structure, I made it even simpler for this question.
<table>
<tr><td>1</td><td>AA</td><td>solved</td></tr>
<tr><td>2</td><td>AB</td><td>closed</td></tr>
<tr><td>3</td><td>AC</td><td>new</td></tr>
<tr><td>4</td><td>AD</td><td>solved</td></tr>
....
<tr><td>300</td><td>ZZ</td><td>new</td></tr>
<table>
When I print this on paper, this will take up too many pages, leaving a lot of "whitespace" unused. So I would like to divide these tablerows over 3 columns, with each column containing exactly 45 records.
So 1st column contains row 1 tot 45,
2nd column contains row 46 to 90 and
3rd column contains row 91 to 135
Then, this proces continues on page2 and so on until all records are printed in columns of 45 rows each, 3 columns on 1 page.
I would like to find a solution for this, using a CSS, so I keep all the flexibility in case I need to change these settings (i.e. printing on A5, landscape, 4 columns instead of 3, ...)
My question is : What is the easiest way to do so, and which techniques do I need to use. I already had a look at CSS flexbox, grid, Nth-children, ... but before I dive into these details, I would like to have some advise on this....
It is important to know that my only purpose is to print it on paper (no interactivity needed on screen)
So please where do I start ?
Any help appreciated.
Use below style:
#media print {.newspaper {column-count: 3;}}
JSFiddel Link:
https://jsfiddle.net/rsanimesh/Lo8up7cx/1/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#media print {
.newspaper {
column-count: 3;
}
}
</style>
<body>
<div class="newspaper">
<table>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>6</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>7</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>8</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>9</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>10</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>11</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>12</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>13</td>
<td>ZZ</td>
<td>new</td>
</tr>
<tr>
<td>14</td>
<td>ZZ</td>
<td>new</td>
</tr>
<tr>
<td>15</td>
<td>ZZ</td>
<td>new</td>
</tr>
</table>
</div>
</body>
</html>
A possibility would be to break the table-layout into a grid and flex layout:
Example (45 columns seems a bit too much , a lot, is it not ? ) : misreading the question, see other options below
/* media commented fo visual test */
/* #media print { */
table {
display: block;
}
tbody {
display: grid;
grid-template-columns: repeat(15, 1fr);
/* is this not too much 3 x 15 = 45 columns!! */
}
tr {
display: flex;
}
tr :first-child {
font-weight: bold;
color:blue
}
td {
border: solid 1px;
flex: 1;
margin: 1px;
}
/* } */
<table>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
...
<table>
other options via grid & flex
/* media commented fo visual test */
/* #media print { */
table {
display: block;
}
tbody {
display: grid;
grid-template-rows: repeat(45, auto);
grid-auto-flow: column dense;
}
tr {
display: flex;
}
tr :first-child {
font-weight: bold;
color:blue
}
td {
border: solid 1px;
flex: 1;
margin: 1px;
}
/* } */
<table>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<table>
or
/* media commented fo visual test */
/* #media print { */
table {
display: block;
}
tbody {
display: grid;
grid-template-rows: repeat(45, auto);
grid-auto-flow: column dense;
}
tr {
display: contents;
}
td {
border: solid 1px;
margin: 1px;
}
tr :first-child {
font-weight: bold;
color:blue;
flex-shrink:1;
}
tr:nth-child(odd) td {background:lightgray;}
/* } */
<table>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<table>
example breaking the table into a grid of 3 columns of trs:
/* media commented fo visual test */
/* #media print { */
table {
display: block;
}
tbody {
display: grid;
grid-template-columns: repeat(3, auto);
}
tr {
display: flex;
}
tr :first-child {
font-weight: bold;
color:blue
}
td {
border: solid 1px;
flex: 1;
margin: 1px;
}
/* } */
<table>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<table>
tr could also be individual inline-boxes set side by side and content drawn by column or rows.
/* media commented fo visual test */
/* #media print { */
table {
display: block;
text-align:center;
}
tbody {
display:contents;
}
tr {
display: inline-flex;
flex-direction:column;
width:12%;
text-align:initial;
}
tr :first-child {
font-weight: bold;
color:blue
}
td {
border: solid 1px;
flex: 1;
margin: 1px;
}
/* } */
<table>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<table>
/* media commented fo visual test */
/* #media print { */
table {
display: block;
text-align:center;
}
tbody {
display:contents;
}
tr {
display: inline-flex;
width:30%;
text-align:initial;
}
tr :first-child {
font-weight: bold;
color:blue
}
td {
border: solid 1px;
flex: 1;
margin: 1px;
}
/* } */
<table>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<tr>
<td>2</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>3</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>4</td>
<td>AD</td>
<td>solved</td>
</tr>
<tr>
<td>5</td>
<td>AB</td>
<td>closed</td>
</tr>
<tr>
<td>6</td>
<td>AC</td>
<td>new</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>solved</td>
</tr>
<table>
Related
trying to put scrollbar to my table i put it but its very far away from table. how can i put it near the table
.html
<h1> ASSET TABLE </h1>
<div class="table">
<div class = "overflow-auto">
{% render_table table_assets %}
</div>
</div>
<h1>TASK TABLE </h1>
<div class="table">
{% render_table table_tasks %}
</div>
.css
.overflow-auto {
height: 150px;
overflow-y: scroll;
overflow: auto;
}
it seems like that
You have to set a width for the parent div.
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
Block-level elements
#container {
overflow-y: scroll;
max-width: 500px;
max-height: 200px;
}
table {
width: 100%;
}
<div id='container'>
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
</div>
I am to create function where when input 100 in row3, row4 and row5 the rows below it will also get 100 inserted into them. I am using nextAll() to try to do this but I think it doesn't work because the rows are not together in an order. Is there some thing I am not doing right?
$("input[id^=row]").on("change", function() {
$(this).nextAll("input[id^=row]").val($(this).val());
console.log($(this).val())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
<th>Year</th>
<th>Age</th>
<th>Annual Premium<br>(Beginning of Year)</th>
<th>Benefits<br>(End of Year)</th>
<th>Time</th>
<th>Policyholder's Cashflow</th>
</tr>
<tr>
<td>1</td>
<td>3</td>
<td id='annual0'>0</td>
<td id='benefit0'><input class='row' id='row0'></td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td id='annual1'>0</td>
<td id='benefit1'><input class='row' id='row1'></td>
<td>1</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>5</td>
<td id='annual2'>0</td>
<td id='benefit2'><input class='row' id='row2'></td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>6</td>
<td id='annual3'>0</td>
<td id='benefit3'><input class='row' id='row3'></td>
<td>3</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>7</td>
<td id='annual4'>0</td>
<td id='benefit4'><input class='row' id='row4'></td>
<td>4</td>
<td></td>
</tr>
$("input[id^=row]").on("input", function() {
$(this).nextAll("input[id^=row]").val($(this).val());
console.log($(this).val())
});
<tr>
<th>Year</th>
<th>Age</th>
<th>Annual Premium<br>(Beginning of Year)</th>
<th>Benefits<br>(End of Year)</th>
<th>Time</th>
<th>Policyholder's Cashflow</th>
</tr>
<tr>
<td>1</td>
<td>3</td>
<td id='annual0'>0</td>
<td id='benefit0'><input class='row' id='row'></td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td id='annual1'>0</td>
<td id='benefit1'><input class='row' id='row1'></td>
<td>1</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>5</td>
<td id='annual2'>0</td>
<td id='benefit2'><input class='row' id='row2'></td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>6</td>
<td id='annual3'>0</td>
<td id='benefit3'><input class='row' id='row3'></td>
<td>3</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>7</td>
<td id='annual4'>0</td>
<td id='benefit4'><input class='row' id='row4'></td>
<td>4</td>
<td></td>
</tr>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
try on("input") instead of on('change'),
Football tournament table
I have table with multi table data which arrange under each other as you see on image under the html code, but I don't understand how to arrange (organize) table rows or table head with table date (sorry I don't know how to right say) that table data of group "A" be placed left and table date of group "B" be placed right of group "A" and same rule apply to group "D" and group "C".
I attached picture under my code for example.
Please help me to do that using only CSS, if it not difficult to explain me your solution with details.
table, th, td {
border: 1px solid #000;
}
table {
width: 50%;
border: 4px solid #f1f1f1;
padding: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table tournament</title>
<meta charset="UTF-8">
</head>
<body>
<table>
<tr>
<th>Group <span>A</span></th>
<th>И</th>
<th>В</th>
<th>Н</th>
<th>П</th>
<th>Голы</th>
<th>Очки</th>
</tr>
<tr>
<td>1.Бельгия</td>
<td>8</td>
<td>7</td>
<td>1</td>
<td>0</td>
<td>15-2</td>
<td>22</td>
</tr>
<tr>
<td>2.Хорватия</td>
<td>8</td>
<td>5</td>
<td>2</td>
<td>1</td>
<td>11-5</td>
<td>17</td>
</tr>
<tr>
<td>3.Сербия</td>
<td>9</td>
<td>3</td>
<td>2</td>
<td>4</td>
<td>13-10</td>
<td>11</td>
</tr>
<tr>
<td>4.Шотландия</td>
<td>9</td>
<td>2</td>
<td>2</td>
<td>5</td>
<td>6-12</td>
<td>8</td>
</tr>
<tr>
<td>5.Македония</td>
<td>8</td>
<td>2</td>
<td>1</td>
<td>5</td>
<td>6-10</td>
<td>6</td>
</tr>
<tr>
<td>6.Уэльс</td>
<td>8</td>
<td>2</td>
<td>0</td>
<td>6</td>
<td>7-19</td>
<td>6</td>
</tr>
<tr>
<th>Group <span>В</span></th>
<th>И</th>
<th>В</th>
<th>Н</th>
<th>П</th>
<th>Голы</th>
<th>Очки</th>
</tr>
<tr>
<td>1.Италия</td>
<td>8</td>
<td>6</td>
<td>2</td>
<td>0</td>
<td>15-5</td>
<td>20</td>
</tr>
<tr>
<td>2.Болгария</td>
<td>8</td>
<td>3</td>
<td>4</td>
<td>1</td>
<td>13-6</td>
<td>13</td>
</tr>
<tr>
<td>3.Дания</td>
<td>8</td>
<td>3</td>
<td>3</td>
<td>2</td>
<td>9-10</td>
<td>12</td>
</tr>
<tr>
<td>4.Чехия</td>
<td>8</td>
<td>2</td>
<td>3</td>
<td>3</td>
<td>8-8</td>
<td>9</td>
</tr>
<tr>
<td>5.Армения</td>
<td>8</td>
<td>3</td>
<td>0</td>
<td>5</td>
<td>8-10</td>
<td>9</td>
</tr>
<tr>
<td>6.Мальта</td>
<td>8</td>
<td>1</td>
<td>0</td>
<td>7</td>
<td>4-18</td>
<td>3</td>
</tr>
<tr>
<th>Group <span>С</span></th>
<th>И</th>
<th>В</th>
<th>Н</th>
<th>П</th>
<th>Голы</th>
<th>Очки</th>
</tr>
<tr>
<td>1.Германия</td>
<td>8</td>
<td>7</td>
<td>1</td>
<td>0</td>
<td>28-7</td>
<td>22</td>
</tr>
<tr>
<td>2.Швеция</td>
<td>8</td>
<td>5</td>
<td>2</td>
<td>1</td>
<td>14-8</td>
<td>17</td>
</tr>
<tr>
<td>3.Австрия</td>
<td>8</td>
<td>4</td>
<td>2</td>
<td>2</td>
<td>16-8</td>
<td>14</td>
</tr>
<tr>
<td>4.Ирландия</td>
<td>8</td>
<td>3</td>
<td>2</td>
<td>3</td>
<td>13-13</td>
<td>11</td>
</tr>
<tr>
<td>5.Казахстан</td>
<td>8</td>
<td>1</td>
<td>1</td>
<td>6</td>
<td>4-17</td>
<td>4</td>
</tr>
<tr>
<td>6.Фарерские о.</td>
<td>8</td>
<td>0</td>
<td>0</td>
<td>8</td>
<td>3-25</td>
<td>0</td>
</tr>
<tr>
<th>Group <span>D</span></th>
<th>И</th>
<th>В</th>
<th>Н</th>
<th>П</th>
<th>Голы</th>
<th>Очки</th>
</tr>
<tr>
<td>1.Нидерланды</td>
<td>8</td>
<td>7</td>
<td>1</td>
<td>0</td>
<td>24-4</td>
<td>22</td>
</tr>
<tr>
<td>2.Венгрия</td>
<td>8</td>
<td>4</td>
<td>2</td>
<td>2</td>
<td>18-12</td>
<td>14</td>
</tr>
<tr>
<td>3.Турция</td>
<td>8</td>
<td>4</td>
<td>1</td>
<td>3</td>
<td>14-7</td>
<td>13</td>
</tr>
<tr>
<td>4.Румыния</td>
<td>8</td>
<td>4</td>
<td>1</td>
<td>3</td>
<td>13-12</td>
<td>13</td>
</tr>
<tr>
<td>5.Эстония</td>
<td>8</td>
<td>2</td>
<td>1</td>
<td>5</td>
<td>6-16</td>
<td>7</td>
</tr>
<tr>
<td>Андорра</td>
<td>8</td>
<td>0</td>
<td>0</td>
<td>8</td>
<td>0-24</td>
<td>0</td>
</tr>
</table>
</body>
</html>
Any help would be greatly appreciated.
This image demonstrates how blocks of th with td should arranges side by side.
table, th, td {
border: 1px solid #000;
}
table {
width: 50%;
border: 4px solid #f1f1f1;
padding: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table tournament</title>
<meta charset="UTF-8">
</head>
<body>
<table>
<tr>
<td>
<table>
<tr>
<th>Group <span>A</span></th>
<th>И</th>
<th>В</th>
<th>Н</th>
<th>П</th>
<th>Голы</th>
<th>Очки</th>
</tr>
<tr>
<td>1.Бельгия</td>
<td>8</td>
<td>7</td>
<td>1</td>
<td>0</td>
<td>15-2</td>
<td>22</td>
</tr>
<tr>
<td>2.Хорватия</td>
<td>8</td>
<td>5</td>
<td>2</td>
<td>1</td>
<td>11-5</td>
<td>17</td>
</tr>
<tr>
<td>3.Сербия</td>
<td>9</td>
<td>3</td>
<td>2</td>
<td>4</td>
<td>13-10</td>
<td>11</td>
</tr>
<tr>
<td>4.Шотландия</td>
<td>9</td>
<td>2</td>
<td>2</td>
<td>5</td>
<td>6-12</td>
<td>8</td>
</tr>
<tr>
<td>5.Македония</td>
<td>8</td>
<td>2</td>
<td>1</td>
<td>5</td>
<td>6-10</td>
<td>6</td>
</tr>
<tr>
<td>6.Уэльс</td>
<td>8</td>
<td>2</td>
<td>0</td>
<td>6</td>
<td>7-19</td>
<td>6</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<th>Group <span>В</span></th>
<th>И</th>
<th>В</th>
<th>Н</th>
<th>П</th>
<th>Голы</th>
<th>Очки</th>
</tr>
<tr>
<td>1.Италия</td>
<td>8</td>
<td>6</td>
<td>2</td>
<td>0</td>
<td>15-5</td>
<td>20</td>
</tr>
<tr>
<td>2.Болгария</td>
<td>8</td>
<td>3</td>
<td>4</td>
<td>1</td>
<td>13-6</td>
<td>13</td>
</tr>
<tr>
<td>3.Дания</td>
<td>8</td>
<td>3</td>
<td>3</td>
<td>2</td>
<td>9-10</td>
<td>12</td>
</tr>
<tr>
<td>4.Чехия</td>
<td>8</td>
<td>2</td>
<td>3</td>
<td>3</td>
<td>8-8</td>
<td>9</td>
</tr>
<tr>
<td>5.Армения</td>
<td>8</td>
<td>3</td>
<td>0</td>
<td>5</td>
<td>8-10</td>
<td>9</td>
</tr>
<tr>
<td>6.Мальта</td>
<td>8</td>
<td>1</td>
<td>0</td>
<td>7</td>
<td>4-18</td>
<td>3</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<th>Group <span>С</span></th>
<th>И</th>
<th>В</th>
<th>Н</th>
<th>П</th>
<th>Голы</th>
<th>Очки</th>
</tr>
<tr>
<td>1.Германия</td>
<td>8</td>
<td>7</td>
<td>1</td>
<td>0</td>
<td>28-7</td>
<td>22</td>
</tr>
<tr>
<td>2.Швеция</td>
<td>8</td>
<td>5</td>
<td>2</td>
<td>1</td>
<td>14-8</td>
<td>17</td>
</tr>
<tr>
<td>3.Австрия</td>
<td>8</td>
<td>4</td>
<td>2</td>
<td>2</td>
<td>16-8</td>
<td>14</td>
</tr>
<tr>
<td>4.Ирландия</td>
<td>8</td>
<td>3</td>
<td>2</td>
<td>3</td>
<td>13-13</td>
<td>11</td>
</tr>
<tr>
<td>5.Казахстан</td>
<td>8</td>
<td>1</td>
<td>1</td>
<td>6</td>
<td>4-17</td>
<td>4</td>
</tr>
<tr>
<td>6.Фарерские о.</td>
<td>8</td>
<td>0</td>
<td>0</td>
<td>8</td>
<td>3-25</td>
<td>0</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<th>Group <span>D</span></th>
<th>И</th>
<th>В</th>
<th>Н</th>
<th>П</th>
<th>Голы</th>
<th>Очки</th>
</tr>
<tr>
<td>1.Нидерланды</td>
<td>8</td>
<td>7</td>
<td>1</td>
<td>0</td>
<td>24-4</td>
<td>22</td>
</tr>
<tr>
<td>2.Венгрия</td>
<td>8</td>
<td>4</td>
<td>2</td>
<td>2</td>
<td>18-12</td>
<td>14</td>
</tr>
<tr>
<td>3.Турция</td>
<td>8</td>
<td>4</td>
<td>1</td>
<td>3</td>
<td>14-7</td>
<td>13</td>
</tr>
<tr>
<td>4.Румыния</td>
<td>8</td>
<td>4</td>
<td>1</td>
<td>3</td>
<td>13-12</td>
<td>13</td>
</tr>
<tr>
<td>5.Эстония</td>
<td>8</td>
<td>2</td>
<td>1</td>
<td>5</td>
<td>6-16</td>
<td>7</td>
</tr>
<tr>
<td>Андорра</td>
<td>8</td>
<td>0</td>
<td>0</td>
<td>8</td>
<td>0-24</td>
<td>0</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I have 3 tables which are given below;
User table:
<table border="1">
<tr>
<td>uid</td>
<td>name</td>
<td>status</td>
<td>category</td>
</tr>
<tr>
<td>1</td>
<td>John Doe</td>
<td>1</td>
<td>C</td>
</tr>
<tr>
<td>2</td>
<td>Jane Doe</td>
<td>1</td>
<td>C</td>
</tr>
</table>
Profile Table:
<table border="1">
<tr>
<td>pid</td>
<td>uid</td>
<td>slug</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>john-doe</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>jane-doe</td>
</tr>
</table>
And Rating Table:
<table border="1">
<tr>
<td>rid</td>
<td>uid</td>
<td>rating</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>3.5</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
<td>2.5</td>
</tr>
<tr>
<td>3</td>
<td>2</td>
<td>3.5</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
<td>2.5</td>
</tr>
<tr>
<td>5</td>
<td>2</td>
<td>3.5</td>
</tr>
<tr>
<td>6</td>
<td>2</td>
<td>2.5</td>
</tr>
<tr>
<td>7</td>
<td>1</td>
<td>3.5</td>
</tr>
<tr>
<td>8</td>
<td>2</td>
<td>2.5</td>
</tr>
</table>
I m trying to join the table and get value having common id with avg rating from rating fromr rating table.
the output I want is given below;
<table border="1">
<tr>
<td>uid</td>
<td>name</td>
<td>slug</td>
<td>status</td>
<td>category</td>
<td>rating</td>
</tr>
<tr>
<td>1</td>
<td>John Doe</td>
<td>john-doe</td>
<td>1</td>
<td>C</td>
<td>3.25</td>
</tr>
<tr>
<td>2</td>
<td>Jane Doe</td>
<td>jane-doe</td>
<td>1</td>
<td>C</td>
<td>3</td>
</tr>
</table>
Please try below query, I think this will work for you.
select u.*, p.slug, (select avg(rating) from Rating r where r.uid=u.uid) as rating from User u JOIN Profile p ON p.uid=u.uid
I'm trying to create a table with the following structure.
I've been reading various sites and blogs to try to create this myself, but I have failed, terribly, and decided to ask for help here.
So far, I've been able to create the outer structure:
<table border='1' style="width:100%">
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Bak</td>
<tr></tr>
<td>Baz</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
</tr>
<tr>
<td>Bak</td>
<td>Baz</td>
</tr>
</table>
But I can't figure out how to add the fields for Name, Number, and Cost. How do I nest it?
Use rowspan to cause a cell to appear in multiple rows, headers to link your data cells with header cells that aren't in traditional positions, and tbody to describe subdivisions of a table.
table, td, th {
border-collapse: collapse;
border: solid black 1px;
padding: 3px;
}
<table>
<tbody>
<tr>
<td rowspan="3"> ...
<th id="name_1"> Name
<td headers="name_1"> ...
<tr>
<th id="number_1"> Number
<td headers="number_1"> ...
<tr>
<th id="cost_1"> Cost
<td headers="cost_1"> ...
<tbody>
<tr>
<td rowspan="3"> ...
<th id="name_2"> Name
<td headers="name_2"> ...
<tr>
<th id="number_2"> Number
<td headers="number_2"> ...
<tr>
<th id="cost_2"> Cost
<td headers="cost_2"> ...
</table>
You need to use rowspan JSFIDDLE
<table border="1">
<tr>
<td rowspan="3"></td>
<td>Name</td>
<td> </td>
</tr>
<tr>
<td>Number</td>
<td> </td>
</tr>
<tr>
<td>cost</td>
<td> </td>
</tr>
<tr>
<td rowspan="3"></td>
<td>Name</td>
<td> </td>
</tr>
<tr>
<td>Number</td>
<td> </td>
</tr>
<tr>
<td>cost</td>
<td> </td>
</tr>
</table>
try fiddle fiddle
<table border='1' style="width:100%">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td rowspan="3">some</td>
<td>Name</td>
<td>11</td>
</tr>
<tr>
<td>No</td>
<td>22</td>
</tr>
<tr>
<td>Cost</td>
<td>22</td>
</tr>
</table>
User rowspan
<table border="1">
<tr>
<td rowspan="3">Data Section 1</td>
<td>Some Data 1.1</td>
</tr>
<tr>
<td>Some Data 1.2</td>
</tr>
<tr>
<td>Some Data 1.3</td>
</tr>
<tr>
<td rowspan="3">Data Section 2</td>
<td>Some Data 2.1</td>
</tr>
<tr>
<td>Some Data 2.2</td>
</tr>
<tr>
<td>Some Data 2.3</td>
</tr>
</table>
<table border='1' style="width: 100%">
<tr>
<td rowspan="3">1</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td rowspan="3">1</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td rowspan="3">1</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
</table>
In general way like this
<table border="1">
<tr>
<td rowspan="3">1</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td rowspan="3">2</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td rowspan="3">3</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td>18</td>
</tr>
</table>
http://jsfiddle.net/s5b0c5d9/