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 -->
Related
I'm trying to have a table according to value from another table so if I choose an item from table 1 it will create a new items row in table 2 and these items will be ordered and every item from the same category will be list under the title of this category.
this is a picture of how the result will be :
this is the sample code.
$("#table tr").click(function(){
var row=$('<tr><td><td></tr>>')
row.appendTo('#add')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Add item</h1>
<table id="table">
<tr>
<th>item</th>
<th>Qty</th>
</tr>
<tr>
<td colspan="2">Class A</td>
</tr>
<tr class="A">
<td id="1">A1</td>
<td id="2">1</td>
</tr>
<tr class="A">
<td>A3</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">Class B</td>
</tr>
<tr class="B">
<td>B1</td>
<td>2</td>
</tr>
<tr class="B">
<td>B3</td>
<td>4</td>
</tr>
<tr class="B">
<td>B1</td>
<td>2</td>
</tr>
<tr class="B">
<td>B3</td>
<td>4</td>
</tr>
</table>
<div>
</div>
<div>
</div>
<br>
<table id="add">
<tr>
<th>item</th>
<th>Qty</th>
</tr>
<tr>
<td colspan="2">Class A</td>
</tr>
<tr>
<td>A1</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">Class B</td>
</tr>
<tr>
<td>B2</td>
<td>3</td>
</tr>
<tr>
<td>B3</td>
<td>2</td>
</tr>
</table>
</body>
</html>
One way to achieve this would be to use data attributes on each row of the source and destination tables. This way you can determine the group the source row came from so that you can place it in the same group in the destination table.
Also note that I added a class, .copyable-row, to each tr which is allowed to be cloned to the second table. Your current logic allowed the table headers themselves to be copied.
let $dest = $('#add');
$("#table tr.copyable-row").click(e => {
let $tr = $(e.currentTarget);
let group = $tr.data('group');
let $target = $dest.find(`tr[data-group="${group}"]:last`);
$tr.clone().insertAfter($target);
});
table {
margin: 0 0 10px;
}
table,
th,
td {
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tr>
<th>item</th>
<th>Qty</th>
</tr>
<tr>
<td colspan="2">Class A</td>
</tr>
<tr class="copyable-row" data-group="a">
<td>A1</td>
<td>1</td>
</tr>
<tr class="copyable-row" data-group="a">
<td>A3</td>
<td>4</td>
</tr>
<tr>
<td colspan="2">Class B</td>
</tr>
<tr class="copyable-row" data-group="b">
<td>B1</td>
<td>2</td>
</tr>
<tr class="copyable-row" data-group="b">
<td>B3</td>
<td>4</td>
</tr>
<tr class="copyable-row" data-group="b">
<td>B1</td>
<td>2</td>
</tr>
<tr class="copyable-row" data-group="b">
<td>B3</td>
<td>4</td>
</tr>
</table>
<table id="add">
<tr>
<th>item</th>
<th>Qty</th>
</tr>
<tr data-group="a">
<td colspan="2">Class A</td>
</tr>
<tr data-group="a">
<td>A1</td>
<td>4</td>
</tr>
<tr data-group="b">
<td colspan="2">Class B</td>
</tr>
<tr data-group="b">
<td>B2</td>
<td>3</td>
</tr>
<tr data-group="b">
<td>B3</td>
<td>2</td>
</tr>
</table>
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 wanna create something like this in my table
i try with this code, but the result far from what i want
<table>
<tr>
<td rowspan="3">No</td>
<td rowspan="3">Item1</td>
</tr>
<tr>
<td>SubItem1a</td>
<td>Subitem1b</td>
<td>Subitem1c</td>
</tr>
<tr>
<td>AnotherSub1a</td>
<td>AnotherSub1b</td>
<td>AnotherSub1c</td>
</tr>
</table>
or
<table>
<tr>
<td rowspan="3">No</td>
<td rowspan="3">Item1</td>
<td>
<tr>SubItem1a</tr>
<tr>Subitem1b</tr>
<tr>Subitem1c</tr>
</td>
<td>
<tr>AnotherSub1a</tr>
<tr>AnotherSub1b</tr>
<tr>AnotherSub1c</tr>
</td>
</tr>
</table>
how to archive table like image?
Now used to this code rowspan Attribute
<table border="1" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
<tr>
<td rowspan="3" align="center">No</td>
<td rowspan="3" align="center">Item1</td>
<td>SubItem1a</td>
<td>SubItem1a</td>
</tr>
<tr>
<td>Subitem1b</td>
<td>Subitem1c</td>
</tr>
<tr>
<td>AnotherSub1b</td>
<td>AnotherSub1c</td>
</tr>
</table>
This will help with your future reference.
I did some example hopefully you understand what is rowspan and colspan.
<h1> Without using Rowspan </h1>
<table border="1">
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td>10</td>
<td >20</td>
<td >30</td>
<td >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
<hr>
<h1> using Rowspan </h1>
<table border="1">
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td rowspan="2">10</td>
<td rowspan="2">20</td>
<td rowspan="2">30</td>
<td rowspan="2" >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
<hr>
<h1> using colspan </h1>
<table border="1">
<tr>
<th colspan="5">Hello World</th>
</tr>
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td rowspan="2">10</td>
<td rowspan="2">20</td>
<td rowspan="2">30</td>
<td rowspan="2" >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
DEMO
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/