Pardon me for the title, i couldn't find more accurate description for it.
I'm breaking a long rows in a table into several pages.
Everything is ok with page-break-after for TR.
My only problem is, it starts at very beginning and ends at very bottom of a page making my header & footer covered with table data.
I tried putting margin and padding everywhere but none seems to work.
Below is my CSS,
#media print {
html, body {
width: 210mm;
height: 297mm;
background:#fff;
}
.page-layout {
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
table.report { page-break-after:auto }
table.report tr { page-break-inside:avoid; page-break-after:auto }
table.report td { page-break-inside:avoid; page-break-after:auto }
table.report thead { display:table-header-group; margin-top:50px; }
table.report tfoot { display:table-footer-group }
.header {
display:block;
position:fixed;
top: 0px;
font-weight:bold;
font-size:14px;
text-align:right;
right:0px;
}
.footer {
z-index: 1;
position: fixed;
left: 0;
bottom: 0;
text-align: left;
left: 0;
width:100%;
display:block;
}
}
Below is my HTML
<div class="header">MY HEADER</div>
<div class="page-layout">
<div style="font-weight:bold; font-size:14px; text-align:center; margin-bottom:20px">REPORT TITLE</div>
<table width="100%" border="1" style="border-collapse:collapse" class="report">
<thead>
<tr>
<th width="10%">Col1</th>
<th width="60%">Col2</th>
<th width="10%">Col3</th>
<th width="20%">Col4</th>
</tr>
</thead>
<tbody>
<?php for ($x=1; $x<100; $x++) {//loop ?>
<tr>
<td align="center"><?=$x?></td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<?php } //endloop ?>
</tbody>
</table>
</div>
<div class="footer">MY FOOTER</div>
Here is what it looks like when printing,
After intensive research on the net, i found that there is no proper way to do it.
There is a discussion about #page rule that likely what i intended to achieve. Unfortunately it didn't work. I learned that this feature have not been implemented on most browser yet. I don't know which browser support it.
Finally, i have came across some trick. THEAD and TFOOT are designed to repeat on print. So i put a blank row on the thead top, leaving an empty space every time it was repeated, just enough for the header to show up. And also an empty row below tfoot for footer area.
Unfortunately, tfoot didn't repeat itself on chrome. IE and Firefox are ok.
If you have this kind of problems when after and before table start needs some extra space for other page footer, like this:
you can fix it this way:
<style>
#media print {
.table-breaked {
page-break-before: auto;
}
.no-border{
border: none !important;
}
.footer-repeat {
display: table-footer-group;
}
}
</style>
<div class="table-breaked">
<table class="pt-20">
<thead>
<tr class="no-border">
<td class="no-border"> </td>
</tr>
<!-- add extra space for printing -->
<tr class="no-border">
<td class="no-border"> </td>
</tr>
<!-- add extra space for printing -->
<tr>
<th class="text-center">Value 1<br/>№ Date</th>
<th class="text-center">Value 2</th>
<th class="text-center">Value 3</th>
<th class="text-center">Value 4</th>
<th class="text-center">Value 5</th>
</tr>
</thead>
<tbody>
<!-- more trs here -->
<tr>
<th>Data</th>
<th>Data</th>
<th>Data</th>
<th>Data</th>
<th>Data</th>
</tr>
</tbody>
<tfoot class="footer-repeat">
<!-- add repeated tfoot for extra space -->
<tr class="no-border">
<td class="no-border"> </td>
</tr>
<tr class="no-border">
<td class="no-border"> </td>
</tr>
<tr class="no-border">
<td class="no-border"> </td>
</tr>
<tr class="no-border">
<td class="no-border"> </td>
</tr>
<tr class="no-border">
<td class="no-border"> </td>
</tr>
</tfoot>
</table>
</div>
Here is a result:
You can use
#page{
size: A4;
margin-top: 50px;
margin-bottom: 50px;
}
Adding page-break-inside:avoid to the cells worked for me:
table td, table th {
page-break-inside: avoid;
}
I've been able to solve this for my use case by setting position: relative; top: 100px; on the top-most element.
Try this
#media print {
html, body {
width: 210mm;
height: 297mm;
background:#fff;
}
.page-layout {
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
table.report { page-break-after:auto }
table.report tr { page-break-inside:avoid; page-break-after:auto }
table.report td { page-break-inside:avoid; page-break-after:auto }
table.report thead { display:table-header-group; margin-top:50px; }
table.report tfoot { display:table-footer-group }
.header {
display:block;
position:fixed;
top: 0px;
font-weight:bold;
font-size:14px;
text-align:right;
right:0px;
}
.footer {
z-index: 1;
position: fixed;
left: 0;
bottom: 0;
text-align: left;
left: 0;
width:100%;
display:block;
}
}
<div class="header">MY HEADER</div>
<div class="page-layout">
<div style="font-weight:bold; font-size:14px; text-align:center; margin-bottom:20px">REPORT TITLE</div>
<table width="100%" border="1" style="border-collapse:collapse" class="report">
<thead>
<tr>
<th width="10%">Col1</th>
<th width="60%">Col2</th>
<th width="10%">Col3</th>
<th width="20%">Col4</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">1</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">2</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">3</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">4</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">5</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">6</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">7</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">8</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">9</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">10</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">11</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">12</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">13</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">14</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">15</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">16</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">17</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">18</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">19</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">20</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">21</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">22</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">23</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">24</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">25</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">26</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">27</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">28</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">29</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">30</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">31</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">32</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">33</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">34</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">35</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">36</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">37</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">38</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">39</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">40</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">41</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">42</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">43</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">44</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">45</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">46</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">47</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">48</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">49</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">50</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">51</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">52</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">53</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">54</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">55</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">56</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">57</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">58</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">59</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">60</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">61</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">62</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">63</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">64</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">65</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">66</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">67</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">68</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">69</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">70</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">71</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">72</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">73</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">74</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">75</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">76</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">77</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">78</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">79</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">80</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">81</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">82</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">83</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">84</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">85</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">86</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">87</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">88</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">89</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">90</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">91</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">92</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">93</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">94</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">95</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">96</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">97</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">98</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">99</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="footer">MY FOOTER</div>
Related
I am building an html table to be used in an html email. I'm encountering a weird problem where anytime I put an image into a <td> it expands the td(and those below it to maximum width, rendering all columns to the right to their minimum width. The Google Chrome Inspector tool is indicating that the image is much wider than it really is. I have resized the image to 100x136px but the still expands to 1078px. I have also tried other images but get the same result. What could be causing this? Below is my code:
<!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>
<style>
table {
width: 100%;
margin: 20px auto;
border-collapse: collapse;
}
td {
border: 1px solid black;
}
.header {
height: 150px;
}
.bar {
height: 40px;
}
.greeting {
height: 300px;
}
.itemRow {
height: 250px;
}
.footer {
height: 75px;
}
.measure {
height: 25px;
}
img {
}
</style>
</head>
<body>
<table>
<tr class="header">
<td colspan="2" class="crest"><img src="crest.jpg" alt="" /></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="bar">
<td colspan="14"></td>
</tr>
<tr class="greeting">
<td colspan="14"></td>
</tr>
<tr class="itemRow">
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr class="measure">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="itemRow">
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr class="measure">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="itemRow">
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr class="footer">
<td colspan="12"></td>
<td colspan="1"></td>
<td colspan="1"></td>
</tr>
</table>
</body>
</html>
That's due to the nature of automatic table layout - the cells will shrink and grow according to their contents. But you can use table-layout: fixed; on the tabletag to avoid that and width: 100%; height: auto on the image itself to fit it into the cell:
table {
width: 100%;
margin: 20px auto;
border-collapse: collapse;
table-layout: fixed;
}
td {
border: 1px solid black;
}
.header {
height: 150px;
}
.bar {
height: 40px;
}
.greeting {
height: 300px;
}
.itemRow {
height: 250px;
}
.footer {
height: 75px;
}
.measure {
height: 25px;
}
img {
width: 100%;
height: auto;
}
<table>
<tr class="header">
<td colspan="2" class="crest"><img src="https://placehold.it/500x300/ea8" alt="" /></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="bar">
<td colspan="14"></td>
</tr>
<tr class="greeting">
<td colspan="14"></td>
</tr>
<tr class="itemRow">
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr class="measure">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="itemRow">
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr class="measure">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="itemRow">
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr class="footer">
<td colspan="12"></td>
<td colspan="1"></td>
<td colspan="1"></td>
</tr>
</table>
I've spent some time figuring out how to do this, and I figured out I'm really not good at html tables..
Need help how to actually do this.
Here is my base code I'm stuck with, No need for the table header
<table border="1" width="100%" height="300px">
<tbody>
<tr>
<td rowspan="3">
Physical Accomplishment
</td>
<td>Projected</td>
<td>Weekly Cumulative</td>
</tr>
<tr>
<td>Actual</td>
<td>Weekly Cumulative</td>
</tr>
<tr>
<td>Slippage</td>
<td>Weekly Cumulative</td>
</tr>
</tbody>
</table>
Here's what I'm aiming for:
Use rowspan 6 for the first column and rowspan 2 for the second and third column
<table border="1" width="100%" height="300px">
<tbody>
<tr>
<td rowspan="6">
Physical Accomplishment
</td>
<td rowspan="2">Projected</td>
<td rowspan="2">Weekly Cumulative</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>40%</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2">Actual</td>
<td rowspan="2">Weekly Cumulative</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2">Slippage</td>
<td rowspan="2">Weekly Cumulative</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>40%</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
I use LibreOffice to draw out the table, then export the HTML to produce this:
<table border="1" width="100%" height="300px">
<tr>
<td rowspan=6>Physical Accomplishment</td>
<td rowspan=2>Projected</td>
<td rowspan=2>Weekly cumulative</td>
<td>0.15%</td>
<td>0.15%</td>
<td>0.15%</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td rowspan=2>Actual</td>
<td rowspan=2>Weekly cumulative</td>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
<td>I</td>
</tr>
<tr>
<td rowspan=2>Slippage</td>
<td rowspan=2>Weekly cumulative</td>
<td>0.15%</td>
<td>0.15%</td>
<td>0.15%</td>
</tr>
<tr>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
</table>
You need to learn these 2 important attributes in HTML table, rowspan= and colspan=.
Please find this link for tutorial Tutorial link.
For now this what you need...
<table border="1" width="100%" height="300px">
<tbody>
<tr>
<td rowspan="6">
Physical Accomplishment
</td>
<td rowspan="2">Projected</td>
<td rowspan="2">Weekly Cumulative</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>40%</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2">Actual</td>
<td rowspan="2">Weekly Cumulative</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2">Slippage</td>
<td rowspan="2">Weekly Cumulative</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>40%</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
https://jsfiddle.net/tn7rd9sq/
I need create the table of this image:
<table border='1'>
<tr>
<th rowspan="3">text</th>
<th colspan="2">text</th>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>other text</td>
<td>2</td>
<td>2</td>
</tr>
</table>
I do not know how to do the part when there are 3 together
td {
width: 20px;
height: 20px;
}
td.wider {
width: 60px;
}
tr.taller {
height: 40px;
}
<table border='1'>
<tr class="taller">
<td class="wider" rowspan="3"></td>
<td colspan="6"></td>
</tr>
<tr>
<td colspan="3"></td>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
I have to create table similar to this
so I've created following table structure in HTML
<table class="table table-bordered">
<tbody>
<tr>
<td colspan="2">asd</td>
</tr>
<tr>
<td colspan="2" rowspan="4">left box</td>
</tr>
<tr>
<td colspan="2">asd</td>
</tr>
<tr>
<td colspan="2">asd</td>
</tr>
<tr>
<td colspan="2">asd</td>
</tr>
<tr>
<td colspan="2">asd</td>
</tr>
<tr>
<td colspan="2" rowspan="5">right box</td>
</tr>
</tbody>
The structure is simplified to show only general problem. Left box is working fine, but right is not.
Demo with only left: http://jsfiddle.net/rfDms/2/
Demo with left and right: http://jsfiddle.net/rfDms/
How to make similar table?
http://jsfiddle.net/AaGJ8/
<table width=100% border=1 class="table table-bordered">
<tbody>
<tr>
<td>asd</td>
<td>asd</td>
<td>asd</td>
<td>asd</td>
<td>asd</td>
<td>asd</td>
<td>asd</td>
</tr>
<tr>
<td colspan="2" rowspan="4">box</td>
<td>asd</td>
<td>asd</td>
<td>asd</td>
<td colspan="2" rowspan="4">box</td>
</tr>
<tr>
<td>asd</td>
<td>asd</td>
<td>asd</td>
</tr>
<tr>
<td>asd</td>
<td>asd</td>
<td>asd</td>
</tr>
<tr>
<td>asd</td>
<td>asd</td>
<td>asd</td>
</tr>
</tbody>
jsFiddle example
<table style="width: 100%">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2" rowspan="5"></td>
<td></td>
<td></td>
<td></td>
<td colspan="2" rowspan="5"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Hi
The form is a word document and I have been trying to recreate it exactly as is with html but having difficulty unfotunately.
This is what I have so far. Perhaps, css is the reason why it isn't laying out correctly.
Thanks for your assistance.
CSS - Must have:
<style type="text/css">
table .mystyle
{
border-width: 0 0 1px 1px;
border-spacing: 0;
border-collapse: collapse;
border-style: solid;
border-color:#000;
width:900px;
}
.mystyle td, .mystyle th
{
margin: 0;
padding: 4px;
border-width: 1px 1px 0 0;
border-style: solid;
font-size:medium;
border-color:#000;
}
</style>
Current html:
<table class="mystyle">
<tr>
<td style="width:50px;" class="style7"> </td>
<td style="width:158px;" class="style7">Milestone</td>
<td style="width:158px;" class="style7">Owner</td>
<td style="width:108px;white-space:nowrap;">
<TABLE border="1">
<TR>
<TD colspan="2">Completion Date</TD>
</TR>
<TR>
<TD>Target</TD>
<TD>Actual</TD>
</TR>
</TABLE>
</td>
<td style="width:358px;" class="style7">Comments</td>
</tr>
<tr>
</tr>
</table>
Extreme left are Qtr 1 through Qtr4
The key to laying out that table is using rowspan and colspan attributes.
http://tinker.io/174de/1
<table class="mystyle">
<thead>
<tr>
<th rowspan="2">Quarter</th>
<th rowspan="2">Milestone</th>
<th rowspan="2">Owner</th>
<th colspan="2">Completion Date</th>
<th rowspan="2">Comments</th>
</tr>
<tr>
<th>Target</th>
<th>Actual</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="3">Q1</th>
<td>a</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>b</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>c</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<th rowspan="3">Q2</th>
<td>a</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>b</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>c</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>