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>
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>
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 separate nested table in lower table as conspicuously as in upper table?
Upper table is not proper though.
I am trying to get Settlements Finance Time 3 Time 5 Bad Good in a single line in lower table.
Here is my code:
.my-table {
border: 1px solid #000;
}
.my-table tr:nth-child(even) {
background: #ddd;
}
.my-table tr:nth-child(odd) {
background: #fff;
}
<table class="my-table">
<tr>
<th>Service</th>
<th>Provider</th>
<th>Check</th>
<th>Marker</th>
<th>Captured Time</th>
<th>Final Time</th>
<th>Status</th>
<th>Comments</th>
</tr>
<tr>
<th>Sub Heading</th>
</tr>
<tr>
<td>Custody C</td>
<td>I</td>
<td>
<table>
<tr>
<td>Settlements</td>
<td>Finance</td>
<td>Time 3</td>
<td>Time 5</td>
<td>Bad</td>
<td>Good</td>
</tr>
</table>
<table>
<tr>
<td>Crossroad</td>
<td>
<table>
<tr>
<td>Complete</td>
</tr>
<tr>
<td>Partial</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Time 4a</td>
</tr>
<tr>
<td>Time 4b</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Time 6a</td>
</tr>
<tr>
<td>Time 6b</td>
</tr>
</table>
</td>
<td>Ok</td>
<td>danke</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<table class="my-table">
<tr>
<th>Service</th>
<th>Provider</th>
<th>Check</th>
<th>Marker</th>
<th>Captured Time</th>
<th>Final Time</th>
<th>Status</th>
<th>Comments</th>
</tr>
<tr>
<th>Sub Heading</th>
</tr>
<tr>
<td>Custody T</td>
<td>G</td>
<td>
<table>
<tr>
<td>Trades</td>
</tr>
<tr>
<td>Position</td>
</tr>
</table>
</td>
<td>Latest</td>
<td>TIME 1</td>
<td>TIME 2</td>
<td>Good</td>
<td>My Comments</td>
</tr>
<tr>
<td>Custody C</td>
<td>I</td>
<td>
<table>
<tr>
<td>Settlements</td>
</tr>
<tr>
<td>Crossroad</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Finance</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>Complete</td>
</tr>
<tr>
<td>Partial</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Time 3</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>Time 4a</td>
</tr>
<tr>
<td>Time 4b</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Time 5
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>Time 6a</td>
</tr>
<tr>
<td>Time 6b</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Bad</td>
</tr>
<tr>
<td>Ok</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Good</td>
</tr>
<tr>
<td>danke</td>
</tr>
</table>
</td>
</tr>
<tr>
</tr>
</table>
To answer the question:
I am trying to get Settlements Finance Time 3 Time 5 Bad Good in a single line in lower table.
Vertically aligning your table cells will bring the content to the top of the cells, regardless of how many lines of content follows.
.my-table td {
vertical-align: top;
}
JSFiddle Example: https://jsfiddle.net/jennifergoncalves/y1Lr0mzw/
Please let me know if I missed what you were trying to accomplish.
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>