I have a problem with IE11: I'd like the tabbar to occupy the height that it needs, one or more rows.
The table should occupy the remaining height and display both horizontal and vertical scrollbar.
The problem occurs when width is too narrow and buttons are wrapped into the second, third,... line.
Is there another way to make this work in IE11 ?
#container {
display: flex;
display: -ms-flexbox;
flex-direction: column;
height: 100vh;
}
.tabbar {
display: block;
text-align: left;
list-style-type: none;
}
.tabbar li {
display: inline-block;
background-color:#ddd;
font-size:30px;
padding:10px 20px;
margin:5px;
}
table {
display: block;
flex: 1 1 auto;
font-size: 16px;
min-height: 100px;
overflow: scroll;
background-color:orange;
}
<div id="container">
<ul class="tabbar">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
<li>Eleven</li>
<li>Twelve</li>
</ul>
<table>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
</table>
</div>
IE11 is allowing the ul.tabbar flex item to shrink below the size of its content (the list items).
The list items are overflowing the ul and overlapping the table underneath.
To see this effect in IE11, add a border or overflow: hidden to .tabbar.
Other browsers don't let the container shrink below the size of their content.
To fix it, add this to your code:
.tabbar { flex-shrink: 0; }
#container {
display: flex;
display: -ms-flexbox;
flex-direction: column;
height: 100vh;
}
.tabbar {
display: block;
text-align: left;
list-style-type: none;
flex-shrink: 0;
border: 1px dashed red;
}
.tabbar li {
display: inline-block;
background-color: #ddd;
font-size: 30px;
padding: 10px 20px;
margin: 5px;
}
table {
display: block;
flex: 1 1 auto;
font-size: 16px;
min-height: 100px;
overflow: scroll;
background-color: orange;
}
<div id="container">
<ul class="tabbar">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
<li>Eleven</li>
<li>Twelve</li>
</ul>
<table>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
<tr><td>row</td></tr>
</table>
</div>
Related
When a page is saved as pdf, the table breaks but the bottom border of table on first page and top border of table on second page is not displayed.
I want to get border to bottom and top side of table when it breaks on different pages and saved as pdf.
Here is a simple example
table {
border-collapse: collapse;
}
table,
tr,
td {
border: 1px solid;
}
.page-break {
page-break-after: always;
border-left-color: white;
border-right-color: white;
border-bottom-color: white;
}
.page-break-next-row {
border-left-color: white;
border-right-color: white;
border-top-color: white;
}
<table>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr class="page-break">
<td class="page-break">
</td>
</tr>
<tr class="page-break-next-row">
<td class="page-break-next-row"></td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
<tr>
<td>row</td>
</tr>
</table>
I have added a smooth scroll animation to a page that host a table were i get a link to scroll one of the rows from another page, however its not very clear whish row is been scrolled so i was wondering if there is a way to make that row blink few times after the scroll animation so the user knows exactly were to look.
html {
scroll-behavior: smooth;
}
I have seen this done somewhere previously with an arrow pointing at the section however I don't remember the website.
Here is a complete example, I added the URI handling after your comment
Change
const url = new URL("https://example.com/index.html?x=YOURIDHERE"); // new URL(location.href);
to
const url = new URL(location.href);
on your real page
window.addEventListener("load", function() {
const url = new URL("https://example.com/index.html?x=YOURIDHERE"); // new URL(location.href);
const tr = document.getElementById(url.searchParams.get("x"))
if (tr) {
tr.scrollIntoView();
tr.classList.add("selected")
setTimeout(function() {
tr.classList.remove("selected")
}, 4000);
}
})
html {
scroll-behavior: smooth;
}
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
border: 3px solid purple;
}
tr {
border: 3px solid purple;
}
#keyframes selected {
from {
background-color: red;
}
to {
background-color: inherit;
}
}
.selected {
animation: selected 1s infinite;
}
<table>
<tbody>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr id="YOURIDHERE">
<td>Blinking row here</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
<tr>
<td>Row</td>
</tr>
</table>
Thanks to Mplungjan this has got me 99% to what I wanted I have only added a small addition to get the parameter from the URL, you can use a link with a parameter to the section id like https://example.com/index.html?x=YOURIDHERE
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
window.addEventListener("load", function() {
const tr = document.getElementById(getUrlVars()["x"])
tr.scrollIntoView();
tr.classList.add("selected")
setTimeout(function() {
tr.classList.remove("selected")
}, 4000)
})
html {
scroll-behavior: smooth;
}
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
border: 3px solid purple;
}
tr {
border: 3px solid purple;
}
#keyframes selected {
from { background-color: red; }
to { background-color: inherit; }
}
.selected {
animation: selected 1s infinite;
}
<table>
<tbody>
<tr id="1">
<td>Row</td>
</tr>
<tr id="2">
<td>Row</td>
</tr>
<tr id="3">
<td>Row</td>
</tr>
<tr id="4">
<td>Row</td>
</tr>
<tr id="5">
<td>Row</td>
</tr>
<tr id="6">
<td>Row</td>
</tr>
<tr id="7">
<td>Row</td>
</tr>
<tr id="8">
<td>Row</td>
</tr>
<tr id="9">
<td>Row</td>
</tr>
<tr id="10">
<td>Row</td>
</tr>
<tr id="11">
<td>Row</td>
</tr>
<tr id="12">
<td>Row</td>
</tr>
<tr id="13">
<td>Row</td>
</tr>
<tr id="14">
<td>Row</td>
</tr>
<tr id="15">
<td>Row</td>
</tr>
<tr id="16">
<td>Row</td>
</tr>
<tr id="17">
<td>Row</td>
</tr>
<tr id="18">
<td>Row</td>
</tr>
<tr id="19">
<td>Row</td>
</tr>
<tr id="20">
<td>Row</td>
</tr>
<tr id="21">
<td>Row</td>
</tr>
<tr id="22">
<td>Row</td>
</tr>
</table>
How to print header and footer on all pages?
Here is a simple example about what I mean:
let table = document.getElementById('table');
for (let i = 1; i <= 100; i++) {
table.insertAdjacentHTML('beforeend', `<tr><td>${i}</td><td>title ${i}</td><td>${i*3}$</td></tr>`);
}
#media print {
.invoice-footer {
height: 2rem;
position: fixed;
bottom: 0;
}
.no-print {
display: none
}
}
table {
margin-bottom: 2rem;
}
<button onclick="window.print()" class="no-print">Print</button>
<div class="invoice">
<img src="https://picsum.photos/200/150?random=1" width="200" class="invoice-logo">
<hr>
<table border="1" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>Title</th>
<th>Price</th>
</tr>
</thead>
<tbody id="table"></tbody>
</table>
<div class="invoice-footer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
I solved it :) here is a live example:
table {
width: 100%;
}
table.print-content {
font-size: 12px;
border: 1px solid #dee2e6;
border-collapse: collapse !important;
}
table.print-content th,
table.print-content td {
padding: .2rem .4rem;
text-align: left;
vertical-align: top;
border-top: 1px solid #dee2e6;
}
#media print {
.print-footer {
position: fixed;
bottom: 0;
left: 0;
}
.no-print {
display: none
}
}
<button onclick="window.print()" class="no-print">Print</button>
<table>
<!-- Start Header -->
<thead>
<tr>
<td>
<img src="https://logoipsum.com/logo/logo-4.svg" width="300">
</td>
</tr>
</thead>
<!-- End Header -->
<tr>
<td>
<h1>Some text on the first page only</h1>
<!-- Start Print Content -->
<table class="print-content">
<thead>
<tr>
<th>#</th>
<th>Position</th>
<th>Dollar</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Title1</td>
<td>1$</td>
</tr>
<tr>
<td>2</td>
<td>Title2</td>
<td>2$</td>
</tr>
<tr>
<td>3</td>
<td>Title3</td>
<td>3$</td>
</tr>
<tr>
<td>4</td>
<td>Title4</td>
<td>4$</td>
</tr>
<tr>
<td>5</td>
<td>Title5</td>
<td>5$</td>
</tr>
<tr>
<td>6</td>
<td>Title6</td>
<td>6$</td>
</tr>
<tr>
<td>7</td>
<td>Title7</td>
<td>7$</td>
</tr>
<tr>
<td>8</td>
<td>Title8</td>
<td>8$</td>
</tr>
<tr>
<td>9</td>
<td>Title9</td>
<td>9$</td>
</tr>
<tr>
<td>10</td>
<td>Title10</td>
<td>10$</td>
</tr>
<tr>
<td>11</td>
<td>Title11</td>
<td>11$</td>
</tr>
<tr>
<td>12</td>
<td>Title12</td>
<td>12$</td>
</tr>
<tr>
<td>13</td>
<td>Title13</td>
<td>13$</td>
</tr>
<tr>
<td>14</td>
<td>Title14</td>
<td>14$</td>
</tr>
<tr>
<td>15</td>
<td>Title15</td>
<td>15$</td>
</tr>
<tr>
<td>16</td>
<td>Title16</td>
<td>16$</td>
</tr>
<tr>
<td>17</td>
<td>Title17</td>
<td>17$</td>
</tr>
<tr>
<td>18</td>
<td>Title18</td>
<td>18$</td>
</tr>
<tr>
<td>19</td>
<td>Title19</td>
<td>19$</td>
</tr>
<tr>
<td>20</td>
<td>Title20</td>
<td>20$</td>
</tr>
<tr>
<td>21</td>
<td>Title21</td>
<td>21$</td>
</tr>
<tr>
<td>22</td>
<td>Title22</td>
<td>22$</td>
</tr>
<tr>
<td>23</td>
<td>Title23</td>
<td>23$</td>
</tr>
<tr>
<td>24</td>
<td>Title24</td>
<td>24$</td>
</tr>
<tr>
<td>25</td>
<td>Title25</td>
<td>25$</td>
</tr>
<tr>
<td>26</td>
<td>Title26</td>
<td>26$</td>
</tr>
<tr>
<td>27</td>
<td>Title27</td>
<td>27$</td>
</tr>
<tr>
<td>28</td>
<td>Title28</td>
<td>28$</td>
</tr>
<tr>
<td>29</td>
<td>Title29</td>
<td>29$</td>
</tr>
<tr>
<td>30</td>
<td>Title30</td>
<td>30$</td>
</tr>
<tr>
<td>31</td>
<td>Title31</td>
<td>31$</td>
</tr>
<tr>
<td>32</td>
<td>Title32</td>
<td>32$</td>
</tr>
<tr>
<td>33</td>
<td>Title33</td>
<td>33$</td>
</tr>
<tr>
<td>34</td>
<td>Title34</td>
<td>34$</td>
</tr>
<tr>
<td>35</td>
<td>Title35</td>
<td>35$</td>
</tr>
<tr>
<td>36</td>
<td>Title36</td>
<td>36$</td>
</tr>
<tr>
<td>37</td>
<td>Title37</td>
<td>37$</td>
</tr>
<tr>
<td>38</td>
<td>Title38</td>
<td>38$</td>
</tr>
<tr>
<td>39</td>
<td>Title39</td>
<td>39$</td>
</tr>
<tr>
<td>40</td>
<td>Title40</td>
<td>40$</td>
</tr>
<tr>
<td>41</td>
<td>Title41</td>
<td>41$</td>
</tr>
<tr>
<td>42</td>
<td>Title42</td>
<td>42$</td>
</tr>
<tr>
<td>43</td>
<td>Title43</td>
<td>43$</td>
</tr>
<tr>
<td>44</td>
<td>Title44</td>
<td>44$</td>
</tr>
<tr>
<td>45</td>
<td>Title45</td>
<td>45$</td>
</tr>
<tr>
<td>46</td>
<td>Title46</td>
<td>46$</td>
</tr>
<tr>
<td>47</td>
<td>Title47</td>
<td>47$</td>
</tr>
<tr>
<td>48</td>
<td>Title48</td>
<td>48$</td>
</tr>
<tr>
<td>49</td>
<td>Title49</td>
<td>49$</td>
</tr>
<tr>
<td>50</td>
<td>Title50</td>
<td>50$</td>
</tr>
<tr>
<td>51</td>
<td>Title51</td>
<td>51$</td>
</tr>
<tr>
<td>52</td>
<td>Title52</td>
<td>52$</td>
</tr>
<tr>
<td>53</td>
<td>Title53</td>
<td>53$</td>
</tr>
<tr>
<td>54</td>
<td>Title54</td>
<td>54$</td>
</tr>
<tr>
<td>55</td>
<td>Title55</td>
<td>55$</td>
</tr>
<tr>
<td>56</td>
<td>Title56</td>
<td>56$</td>
</tr>
<tr>
<td>57</td>
<td>Title57</td>
<td>57$</td>
</tr>
<tr>
<td>58</td>
<td>Title58</td>
<td>58$</td>
</tr>
<tr>
<td>59</td>
<td>Title59</td>
<td>59$</td>
</tr>
<tr>
<td>60</td>
<td>Title60</td>
<td>60$</td>
</tr>
<tr>
<td>61</td>
<td>Title61</td>
<td>61$</td>
</tr>
<tr>
<td>62</td>
<td>Title62</td>
<td>62$</td>
</tr>
<tr>
<td>63</td>
<td>Title63</td>
<td>63$</td>
</tr>
<tr>
<td>64</td>
<td>Title64</td>
<td>64$</td>
</tr>
<tr>
<td>65</td>
<td>Title65</td>
<td>65$</td>
</tr>
<tr>
<td>66</td>
<td>Title66</td>
<td>66$</td>
</tr>
<tr>
<td>67</td>
<td>Title67</td>
<td>67$</td>
</tr>
<tr>
<td>68</td>
<td>Title68</td>
<td>68$</td>
</tr>
<tr>
<td>69</td>
<td>Title69</td>
<td>69$</td>
</tr>
<tr>
<td>70</td>
<td>Title70</td>
<td>70$</td>
</tr>
<tr>
<td>71</td>
<td>Title71</td>
<td>71$</td>
</tr>
<tr>
<td>72</td>
<td>Title72</td>
<td>72$</td>
</tr>
<tr>
<td>73</td>
<td>Title73</td>
<td>73$</td>
</tr>
<tr>
<td>74</td>
<td>Title74</td>
<td>74$</td>
</tr>
<tr>
<td>75</td>
<td>Title75</td>
<td>75$</td>
</tr>
<tr>
<td>76</td>
<td>Title76</td>
<td>76$</td>
</tr>
<tr>
<td>77</td>
<td>Title77</td>
<td>77$</td>
</tr>
<tr>
<td>78</td>
<td>Title78</td>
<td>78$</td>
</tr>
<tr>
<td>79</td>
<td>Title79</td>
<td>79$</td>
</tr>
<tr>
<td>80</td>
<td>Title80</td>
<td>80$</td>
</tr>
<tr>
<td>81</td>
<td>Title81</td>
<td>81$</td>
</tr>
<tr>
<td>82</td>
<td>Title82</td>
<td>82$</td>
</tr>
<tr>
<td>83</td>
<td>Title83</td>
<td>83$</td>
</tr>
<tr>
<td>84</td>
<td>Title84</td>
<td>84$</td>
</tr>
<tr>
<td>85</td>
<td>Title85</td>
<td>85$</td>
</tr>
<tr>
<td>86</td>
<td>Title86</td>
<td>86$</td>
</tr>
<tr>
<td>87</td>
<td>Title87</td>
<td>87$</td>
</tr>
<tr>
<td>88</td>
<td>Title88</td>
<td>88$</td>
</tr>
<tr>
<td>89</td>
<td>Title89</td>
<td>89$</td>
</tr>
<tr>
<td>90</td>
<td>Title90</td>
<td>90$</td>
</tr>
<tr>
<td>91</td>
<td>Title91</td>
<td>91$</td>
</tr>
<tr>
<td>92</td>
<td>Title92</td>
<td>92$</td>
</tr>
<tr>
<td>93</td>
<td>Title93</td>
<td>93$</td>
</tr>
<tr>
<td>94</td>
<td>Title94</td>
<td>94$</td>
</tr>
<tr>
<td>95</td>
<td>Title95</td>
<td>95$</td>
</tr>
<tr>
<td>96</td>
<td>Title96</td>
<td>96$</td>
</tr>
<tr>
<td>97</td>
<td>Title97</td>
<td>97$</td>
</tr>
<tr>
<td>98</td>
<td>Title98</td>
<td>98$</td>
</tr>
<tr>
<td>99</td>
<td>Title99</td>
<td>99$</td>
</tr>
<tr>
<th colspan="2">Sum</th>
<th>10$</th>
</tr>
</tbody>
</table>
<!-- End Print Content -->
</td>
</tr>
<tr>
<td>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</td>
</tr>
<!-- Start Space For Footer -->
<tfoot>
<tr>
<td style="height: 3cm">
<!-- Leave this empty and don't remove it. This space is where footer placed on print -->
</td>
</tr>
</tfoot>
<!-- End Space For Footer -->
</table>
<!-- Start Footer -->
<div class="print-footer">
<h2>Here is the fixed Footer</h2>
</div>
<!-- End Footer -->
I have created two table that are displaying side by side. In each table there are header sections and under each section there is data. The problem i am running into is aligning the header of each section side by side as some of the sections have less data than the other. Below is what I have tried so far with CSS and html but its not working. Hoping that someone can assist.
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: uncollapse;
}
#customers th {
broder: none;
}
#customers td {
broder: none;
min-height: 33%;
}
#customers tr:nth-child(even) {
background-color: #f2f2f2;
}
#customers th {
padding-top: 8px;
padding-bottom: 8px;
text-align: Center;
background-color: Gray;
color: white;
}
<table id="customers" style="display: inline-block; border: 15px solid; float: left; ">
<tr>
<th>Heading 1</th>
<th></th>
</tr>
<tr>
<td>Question 1?</td>
<td align="center" font='red'>Yes</td>
</tr>
<tr>
<td>Question2?</td>
<td align="center">N/A</td>
</tr>
<tr>
<td>Question3</td>
</tr>
<tr>
<th>Heading 2</th>
<th></th>
</tr>
<tr>
<td>Question 1?</td>
<td align="center">USD</td>
</tr>
<tr>
<td>Question 2?</td>
<td align="center">USD</td>
</tr>
<tr>
<td>Question 3?</td>
<td align="center">USD</td>
</tr>
<tr>
<td>Question 3?</td>
<td align="center">N/A</td>
</tr>
<tr>
<th>Heading 3</th>
<th></th>
</tr>
<tr>
<td>Question 1</td>
<td align="center">Yes</td>
</tr>
<tr>
<td>Question 2
</td>
<td>See Link
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>Direct Debit</td>
<td></td>
</tr>
<tr>
<th>Heading 4</th>
<th></th>
</tr>
<tr>
<td>Question1</td>
<td> </td>
</tr>
<tr>
<td>Question1</td>
<td> </td>
</tr>
<tr>
<td>Question1</td>
<td></td>
</tr>
<tr>
<td>Question1</td>
<td></td>
</tr>
<tr>
<td>Question1></td>
<td></td>
</tr>
<tr>
<td>Question1</td>
<td></td>
</tr>
<tr>
<td>Question1</td>
<td></td>
</tr>
<tr>
<td>Question1</td>
<td></td>
</tr>
<tr>
<td>Question1</td>
<td></td>
</tr>
<tr>
<td>Question1</td>
<td></td>
</tr>
<tr>
<td>Question1</td>
<td></td>
</tr>
<tr>
<td>Question1</td>
<td></td>
</tr>
<tr>
<td>Question1</td>
<td></td>
</tr>
<tr>
<td>Question1</td>
<td></td>
</tr>
<tr>
<th>Header 5</th>
<th></th>
</tr>
<tr>
<td>Question1</td>
<td> </td>
</tr>
<tr>
<td>Question</td>
<td> </td>
</tr>
<tr>
<td>Question</td>
<td> </td>
</tr>
<tr>
<td>Question</td>
<td> </td>
</tr>
<tr>
<th>header 6</th>
<th></th>
</tr>
<tr>
<td>Question</td>
<td></td>
</tr>
<tr>
<td>Question</td>
<td align="center">Yes</td>
</tr>
<tr>
<td>Question?</td>
<td align="center">N/A</td>
</tr>
<tr>
<th>HEader 7</th>
<th></th>
</tr>
<tr>
<td>Question</td>
<td> </td>
</tr>
<tr>
<td>Question
</td>
<td align="center">See Link
</td>
</tr>
<tr>
<td>Question
</td>
<td> </td>
</tr>
<tr></tr>
</table>
</div>
<table id="customers" style="display: inline-block; border: 15px solid; float: left; ">
<tr>
<th>Header 1</th>
<th></th>
</tr>
<tr>
<td>Question1</td>
<td> </td>
</tr>
<tr>
<td>Question</td>
<td> </td>
</tr>
<tr>
<td>Question</td>
<td> </td>
</tr>
<tr>
<td>Question</td>
<td> </td>
</tr>
<tr>
<th>header 2</th>
<th></th>
</tr>
<tr>
<td>Question</td>
<td></td>
</tr>
<tr>
<td>Question</td>
<td align="center">Yes</td>
</tr>
<tr>
<td>Question?</td>
<td align="center">N/A</td>
</tr>
<tr>
<th>HEader 3</th>
<th></th>
</tr>
<tr>
<td>Question</td>
<td> </td>
</tr>
<tr>
<td>Question
</td>
<td align="center">See Link
</td>
</tr>
<tr>
<td>Question
</td>
<td> </td>
</tr>
<tr></tr>
<tr>
<th>Header 4</th>
<th></th>
</tr>
<tr>
<td>Question</td>
<td align="center">Yes</td>
</tr>
<tr>
<td>Question</td>
<td align="center">No</td>
</tr>
<tr>
<td>Question</td>
<td align="center">Yes</td>
</tr>
<tr>
<td>Question</td>
<td align="center">Yes*</td>
</tr>
<tr>
<td>Question</td>
<td align="center">N/A</td>
</tr>
<tr>
<td>Question</td>
<td align="center">Yes</td>
</tr>
<tr>
<td>Question</td>
<td align="center">*</td>
</tr>
<tr>
<td>Question</td>
<td></td>
</tr>
<tr>
<td>Question</td>
<td>
<td>
</tr>
<tr>
<td>Question</td>
<td></td>
</tr>
<tr>
<th>HEader 5</th>
<th></th>
</tr>
<tr>
<td>Question?</td>
<td align="center">IAS</td>
</tr>
<tr>
<th>Header 6</th>
<th></th>
</tr>
<tr>
<td>Question</td>
<td align="center">Yes</td>
</tr>
<tr>
<td>Question</td>
<td align="center">Yes</td>
</tr>
<tr>
<td>Question</td>
<td align="center">Yes</td>
</tr>
<tr>
<td>Question</td>
<td align="center">Yes</td>
</tr>
<tr>
<th>header 7</th>
<th></th>
</tr>
<tr>
<td>Question</td>
</tr>
</table>
Here's a version of the top three sections of your code with a table wrapped around the inner tables for structure. Setting vertical-align: top on the td's of the container table keeps the inner tables at the same vertical position even when one is taller than the next.
.even-heights {
font-size: 0;
background: black;
border: 7.5px solid;
border-collapse: collapse;
}
.even-heights td {
vertical-align: top;
}
.customers {
margin: 7.5px;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: uncollapse;
display: inline-block;
}
.customers th {
border: none;
}
.customers td {
border: none;
/* tr must have a height then... min-height: 33%; */
min-height: 18px;
min-width: 62px;
}
.customers tr:nth-child(even) {
background-color: #f2f2f2;
}
.customers tr:nth-child(odd) {
background-color: #fff;
}
.customers th {
padding-top: 8px;
padding-bottom: 8px;
text-align: Center;
background-color: Gray;
color: white;
}
<table class="even-heights">
<tr>
<td>
<table class="customers">
<tr>
<th>Heading 1</th>
<th></th>
</tr>
<tr>
<td>Question 1?</td>
<td align="center" font='red'>Yes</td>
</tr>
<tr>
<td>Question2?</td>
<td align="center">N/A</td>
</tr>
<tr>
<td>Question3</td>
<td> </td>
</tr>
</table>
</td>
<td>
<table class="customers">
<tr>
<th>Header 1</th>
<th></th>
</tr>
<tr>
<td>Question1</td>
<td> </td>
</tr>
<tr>
<td>Question</td>
<td> </td>
</tr>
<tr>
<td>Question</td>
<td> </td>
</tr>
<tr>
<td>Question</td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="customers">
<tr>
<th>Heading 2</th>
<th></th>
</tr>
<tr>
<td>Question 1?</td>
<td align="center">USD</td>
</tr>
<tr>
<td>Question 2?</td>
<td align="center">USD</td>
</tr>
<tr>
<td>Question 3?</td>
<td align="center">USD</td>
</tr>
<tr>
<td>Question 3?</td>
<td align="center">N/A</td>
</tr>
</table>
</td>
<td>
<table class="customers">
<tr>
<th>header 2</th>
<th></th>
</tr>
<tr>
<td>Question</td>
<td></td>
</tr>
<tr>
<td>Question</td>
<td align="center">Yes</td>
</tr>
<tr>
<td>Question?</td>
<td align="center">N/A</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="customers">
<tr>
<th>Heading 3</th>
<th></th>
</tr>
<tr>
<td>Question 1</td>
<td align="center">Yes</td>
</tr>
<tr>
<td>Question 2
</td>
<td>See Link
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Direct Debit</td>
<td></td>
</tr>
</table>
</td>
<td>
<table class="customers">
<tr>
<th>HEader 3</th>
<th></th>
</tr>
<tr>
<td>Question</td>
<td> </td>
</tr>
<tr>
<td>Question
</td>
<td align="center">See Link
</td>
</tr>
<tr>
<td>Question
</td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
How can I make the table header appear on the left side of the table as a column instead on the top as a row? I have this markup:
<table>
<thead>
<tr>
<th>a</th>
<th>b</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
Just use <th> as the first element in the row. Then add the scope attribute, which has no visual impact, but you could use it e.g. in CSS.
<table>
<tbody>
<tr>
<th scope="row">A</th>
<td>b</td>
</tr>
<tr>
<th scope="row">C</th>
<td>d</td>
</tr>
</tbody>
</table>
See also http://www.w3.org/TR/WCAG20-TECHS/H63
How's this?
Example
CSS
thead {
float: left;
}
thead th {
display: block;
}
tbody {
float: right;
}
jsFiddle.
Update
Well, the 1, 2 should also be as column, obviously.
jsFiddle.
It also looks like IE baulks at this. You may have to trade semantic-ness for cross browser compatibility.
You can see the result here. You mean like this?
<table border="1">
<thead>
<tr>
<th></th>
<th colspan="2">Letters</th>
</tr>
<tr>
<th></th>
<th>a</th>
<th>b</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">Numbers</td>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td>2</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>6</td>
</tr>
</tbody>
</table>
You usually use rowspan and colspan for cells spanning multiple columns/rows.
I needed something a little different, but the answers by #alex and #marion got me started in the right direction. The problem was that when you needed many items in the table, the "columns" started stacking funny on smaller screens.
Thanks to Serge for his answer here that led me in this solution. This solution allows for scrolling horizontally and doesn't stack funny regardless of the size of the screen/window. I tested it in Chrome, Firefox, Opera, Edge, and IE11. Here's the fiddle with the correct alignment for the new "rows" and "columns": https://jsfiddle.net/berrym/6r3zvaef/21/
And just in case it disappears from JSFiddle:
<style>
table{
display:block;
white-space:nowrap;
width:100%;
}
td, th {
border-bottom: 1px solid red;
border-collapse: collapse;
}
thead {
float: left;
background: yellow;
width: 10%;
}
thead tr {
width:100%;
float:left;
}
thead th {
display: block;
}
tbody {
float: left;
width: 90%;
}
tbody tr {
display: inline-block;
}
tbody td {
float:left;
width:100%;
}
</style>
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
</tbody>
</table>
This worked perfectly for me : (inspired from the first answer)
Example here
html :
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>a1</td>
<td>b1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
</tr>
</tbody>
</table>
css :
table, td, th {
border: 1px solid red;
}
thead {
float: left;
}
thead th {
display: block;
background: yellow;
}
tbody {
float: left;
}
tbody tr {
display: block;
float: left;
}
tbody td {
display: block;
}
If you use bootstrap, you can achieve this easily with the table-reflow style: http://v4-alpha.getbootstrap.com/content/tables/#reflow