title: Dompdf - how to display table and graph sidebyside?
body: <p>I have a question regarding dompdf as what I am trying to do is print everything in one line so 4 html different portion on one line:
  like this working fine screenshot 1:
  <a href="https://i.stack.imgur.com/iurUT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iurUT.png" alt="enter image description here"></a></p>
  
  <p>but if I have first table as long table then it breaks everything and I couldn't get the output same as the first screenshot.
  <a href="https://i.stack.imgur.com/eLXQm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eLXQm.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/kwN8F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kwN8F.png" alt="enter image description here"></a></p>
  
  <p>My Code is very simple and I know it's must be some quick html/css fix but what I have no idea or can I set pointer of print back on top so it manage screenshot- 1 even after printing the first long table?</p>
  
  <pre><code>    &lt;style&gt;
  #content_pdf {  margin-top:15px;    width: 100%; }
  #header {   top: -40px;   border-bottom: 0.1pt solid #aaa !important;   height:35px; position: fixed; /*    top: -115px;*/
      width: 100% !important;  
  
  }
  
  #footer {   bottom: 10;   border-top: 0.1pt solid #aaa; }
  #header table,
  #footer table {     width: 100%;    border-collapse: collapse;  border: none; }
  
  #header td,
  #footer td {   padding: 0;  width: 50%;      }
  
  .page-number {   text-align: center; }
  
  .page-number:before {   content: 'Page ' counter(page); } /* hr {   page-break-after: always;   border: 0; }*/ table{   font: arial !important;     font-size:9px !important; }
  
  
  .quarterPage {  width: 25% !important;  display: inline-block !important;   margin: 0px !important;     padding: 0px !important;    float: left !important;     height: auto !important; } &lt;/style&gt; &lt;/head&gt;
  
  &lt;body class=' page-footer-fixed-mobile page-sidebar-closed page-header-fixed page-quick-sidebar-over-content page-sidebar-fixed page-footer-fixed'&gt;
  
  
  &lt;div id='header'&gt;   &lt;table&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;strong&gt;&lt;em&gt; Report&lt;/em&gt;&lt;/strong&gt;&lt;/td&gt;
        &lt;td style='text-align: right;'&gt;&lt;img src='00' style='height: 30px; width:auto; padding:2px;' /&gt;&lt;/td&gt;
      &lt;/tr&gt;   &lt;/table&gt; &lt;/div&gt; &lt;div id='content_pdf'&gt;
  
  
                      &lt;div id="DataTables_Table_0_wrapper" class="dataTables_wrapper no-footer"&gt;&lt;div class="row"&gt;&lt;div class="col-md-6 col-sm-12"&gt;&lt;/div&gt;&lt;div class="col-md-6 col-sm-12"&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="table-scrollable"&gt;&lt;table class="table table-striped table-hover telco_datatable dataTable no-footer" id="DataTables_Table_0" role="grid" aria-describedby="DataTables_Table_0_info"&gt;
                      &lt;thead&gt;
                      &lt;tr role="row"&gt;&lt;th class="sorting_asc hidePrint" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-sort="ascending" aria-label=": activate to sort column ascending"&gt;&lt;/th&gt;&lt;th class="sorting hidePrint" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Source: activate to sort column ascending"&gt;Source&lt;/th&gt;&lt;th class="sorting hidePrint" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Service Number: activate to sort column ascending"&gt;Service Number&lt;/th&gt;&lt;th class="sorting hidePrint" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Date: activate to sort column ascending"&gt;Date&lt;/th&gt;&lt;th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Time: activate to sort column ascending"&gt;Time&lt;/th&gt;&lt;th class="sorting hidePrint" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Place Called: activate to sort column ascending"&gt;Place Called&lt;/th&gt;&lt;th class="sorting hidePrint" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Number Called: activate to sort column ascending"&gt;Number Called&lt;/th&gt;&lt;th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Usage Type: activate to sort column ascending"&gt;Usage Type&lt;/th&gt;&lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                      &lt;tr role="row" class="odd"&gt;
                              &lt;td&gt;23:57:00&lt;/td&gt;
                              &lt;td&gt;Calls and Services&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="even"&gt;
                              &lt;td&gt;20:19:00&lt;/td&gt;
                              &lt;td&gt;Calls and Services&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="odd"&gt;
                              &lt;td&gt;19:52:00&lt;/td&gt;
                              &lt;td&gt;Calls and Services&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="even"&gt;
                              &lt;td&gt;19:50:00&lt;/td&gt;
                              &lt;td&gt;Calls and Services&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="odd"&gt;
                              &lt;td&gt;19:36:00&lt;/td&gt;
                              &lt;td&gt;Calls and Services&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="even"&gt;
                              &lt;td&gt;19:34:00&lt;/td&gt;
                              &lt;td&gt;Calls and Services&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="odd"&gt;
                              &lt;td&gt;19:29:00&lt;/td&gt;
                              &lt;td&gt;Calls and Services&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="even"&gt;
                              &lt;td&gt;19:14:00&lt;/td&gt;
                              &lt;td&gt;Calls and Services&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="odd"&gt;
                              &lt;td&gt;18:47:00&lt;/td&gt;
                              &lt;td&gt;Calls and Services&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="even"&gt;
                              &lt;td&gt;18:30:00&lt;/td&gt;
                              &lt;td&gt;Calls and Services&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="odd"&gt;
                              &lt;td&gt;18:21:00&lt;/td&gt;
                              &lt;td&gt;Calls and Services&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="even"&gt;
                              &lt;td&gt;23:52:00&lt;/td&gt;
                              &lt;td&gt;Calls and Services&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="odd"&gt;
                              &lt;td&gt;18:20:00&lt;/td&gt;
                              &lt;td&gt;Calls and Services&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="even"&gt;
                              &lt;td&gt;18:10:00&lt;/td&gt;
                              &lt;td&gt;Calls and Services&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="odd"&gt;
                              &lt;td&gt;18:05:00&lt;/td&gt;
                              &lt;td&gt;Calls and Services&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="even"&gt;
                              &lt;td&gt;17:57:00&lt;/td&gt;
                              &lt;td&gt;Calls and Services&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="odd"&gt;
                              &lt;td&gt;17:37:00&lt;/td&gt;
                              &lt;td&gt;Calls and Services&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="even"&gt;
                              &lt;td&gt;17:28:00&lt;/td&gt;
                              &lt;td&gt;Calls and Services&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="odd"&gt;
                              &lt;td&gt;17:13:00&lt;/td&gt;
                              &lt;td&gt;Calls and Services&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="even"&gt;
                              &lt;td&gt;17:06:00&lt;/td&gt;
                              &lt;td&gt;Calls and Services&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="odd"&gt;
                              &lt;td&gt;17:05:00&lt;/td&gt;
                              &lt;td&gt;Calls and Services&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="even"&gt;
                              &lt;td&gt;17:02:00&lt;/td&gt;
                              &lt;td&gt;Calls and Services&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="odd"&gt;
                              &lt;td&gt;23:39:00&lt;/td&gt;
                              &lt;td&gt;Calls and Services&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="even"&gt;
                              &lt;td&gt;16:57:00&lt;/td&gt;
                              &lt;td&gt;Calls and Services&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="odd"&gt;
                              &lt;td&gt;16:55:00&lt;/td&gt;
                              &lt;td&gt;Calls and Services&lt;/td&gt;
                          &lt;/tr&gt;&lt;/tbody&gt;
                      &lt;/table&gt;&lt;/div&gt;&lt;div class="row"&gt;&lt;div class="col-md-5 col-sm-12"&gt;&lt;/div&gt;&lt;div class="col-md-7 col-sm-12"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
                  &lt;/div&gt;&lt;div class='quarterPage' style='border: 0px solid red; margin-left: 0px !important;'&gt;&lt;img style='width: 100% !important;' src='temp/4c8165e95198abe352c9eb42c37e3397.png' /&gt;&lt;/div&gt;&lt;div class='quarterPage' style='border: 0px solid red; margin-left: 0px !important;'&gt;&lt;img style='width: 100% !important;' src='temp/413375ced4a3b6e00bf588606be73539.png' /&gt;&lt;/div&gt;&lt;div class='quarterPage' style='margin-left: 0px !important;'&gt;
  
                      &lt;div id="DataTables_Table_1_wrapper" class="dataTables_wrapper no-footer"&gt;&lt;div class="row"&gt;&lt;div class="col-md-6 col-sm-12"&gt;&lt;/div&gt;&lt;div class="col-md-6 col-sm-12"&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="table-scrollable"&gt;&lt;table class="table table-striped table-hover user_datatable  dataTable no-footer" id="DataTables_Table_1" role="grid" aria-describedby="DataTables_Table_1_info"&gt;
                      &lt;thead&gt;
                      &lt;tr role="row"&gt;&lt;th class="sorting_asc hidePrint" tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1" aria-sort="ascending" aria-label=": activate to sort column ascending"&gt;&lt;/th&gt;&lt;th class="sorting hidePrint" tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1" aria-label="Username: activate to sort column ascending"&gt;Username&lt;/th&gt;&lt;th class="sorting" tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1" aria-label="First Name: activate to sort column ascending"&gt;First Name&lt;/th&gt;&lt;th class="sorting" tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1" aria-label="Last Name: activate to sort column ascending"&gt;Last Name&lt;/th&gt;&lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                      &lt;tr role="row" class="odd"&gt;
                              &lt;td&gt;2004&lt;/td&gt;
                              &lt;td&gt;7.80&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="even"&gt;
                              &lt;td&gt;2010&lt;/td&gt;
                              &lt;td&gt;10.40&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="odd"&gt;
                              &lt;td&gt;2010&lt;/td&gt;
                              &lt;td&gt;9.10&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="even"&gt;
                              &lt;td&gt;2010&lt;/td&gt;
                              &lt;td&gt;9.10&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="odd"&gt;
                              &lt;td&gt;2010&lt;/td&gt;
                              &lt;td&gt;9.10&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="even"&gt;
                              &lt;td&gt;2010&lt;/td&gt;
                              &lt;td&gt;9.10&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="odd"&gt;
                              &lt;td&gt;2011&lt;/td&gt;
                              &lt;td&gt;20.50&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="even"&gt;
                              &lt;td&gt;2011&lt;/td&gt;
                              &lt;td&gt;9.10&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="odd"&gt;
                              &lt;td&gt;2011&lt;/td&gt;
                              &lt;td&gt;9.10&lt;/td&gt;
                          &lt;/tr&gt;&lt;tr role="row" class="even"&gt;
                              &lt;td&gt;2011&lt;/td&gt;
                              &lt;td&gt;9.10&lt;/td&gt;
                          &lt;/tr&gt;&lt;/tbody&gt;
                      &lt;/table&gt;&lt;/div&gt;&lt;div class="row"&gt;&lt;div class="col-md-5 col-sm-12"&gt;&lt;/div&gt;&lt;div class="col-md-7 col-sm-12"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
                  &lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Hi Friends, please help me in this issue as I am trying to figure out from so long now or at least if anyone have an idea that how I can put printer printing pointer of dompdf to put again on first page to print rest of the next element to the long html table.</p>