HTML how to align the columns in on line? - html

I have an HTML page in which I am displaying some values.
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!--Table Upper-->
<section class="row" style="margin-top: 10px;">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th scope="col">Energy Charge</th>
<th scope="col">E-Arrears</th>
<th scope="col">I-Tax</th>
<th scope="col">GST</th>
<th scope="col">E-Tax</th>
<th scope="col">F-Tax</th>
<th scope="col">R.G.S.T</th>
<th scope="col">Total Amount</th>
<th scope="col">Amt W Due date</th>
<th scope="col">Amt A Due date</th>
</tr>
</thead>
<tbody>
<tr>
<td>26,096</td>
<td>3,433</td>
<td>0</td>
<td>5,020</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>34,549</td>
<td>34,549</td>
<td>34,845</td>
</tr>
</tbody>
</table>
<!--End-->
<!--Horizontal Table 2-->
<table class="table table-hover table-bordered ">
<thead>
<tr>
<th scope="col ">C-Duty</th>
<th scope="col ">Rd Maint</th>
<th scope="col ">Mosque</th>
<th scope="col ">Conserve</th>
<th scope="col ">Sewerage</th>
<th scope="col ">Misc</th>
<th scope="col ">Sanitation</th>
<th scope="col ">Tv fee</th>
<th scope="col ">Rent</th>
<th scope="col ">Rent Arrear</th>
<th scope="col ">Amt W Due date</th>
<th scope="col ">Amt A Due date</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>100</td>
<td>5</td>
<td>350</td>
<td>350</td>
<td>650</td>
<td>925</td>
<td>35</td>
<td>0</td>
<td>0</td>
<td>24,15</td>
<td>24,15</td>
</tr>
</tbody>
</table>
<!--end-->
<!--Horizontal Table 3-->
<table class="table table-hover table-bordered ">
<thead>
<tr>
<th scope="col ">F/MRC</th>
<th scope="col ">F/MRC Arrears</th>
<th scope="col ">Water Charges</th>
<th scope="col ">Water Arrears</th>
<th scope="col ">Total Amount</th>
<th scope="col ">Amt W.Due Date</th>
<th scope="col ">Amt A.Due Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>0</td>
<td>1,060</td>
<td>0</td>
<td>1,060</td>
<td>1,060</td>
<td>1,070</td>
</tr>
</tbody>
</table>
<!--end-->
<!--Horizontal Table 4-->
<table class="table table-hover table-bordered ">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Grand Total</td>
<td>38,024</td>
<td>39,339</td>
</tr>
</tbody>
</table>
</section>
Output
Expected output
I want to set the column size to the size of the first Amt W Due date and Amt A Due date. i.e. all the amounts with due and after due date till grand total values should be aligned in one column.
Any help would be highly appreciated.
Note: I have more than one sections and each section have tables inside it.


You can do this in two ways:
Using inline style: adding style="width:10%" to the columns
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!--Table Upper-->
<section class="row" style="margin-top: 10px;">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th scope="col">Energy Charge</th>
<th scope="col">E-Arrears</th>
<th scope="col">I-Tax</th>
<th scope="col">GST</th>
<th scope="col">E-Tax</th>
<th scope="col">F-Tax</th>
<th scope="col">R.G.S.T</th>
<th scope="col">Total Amount</th>
<th scope="col" style="width:10%">Amt W Due date</th>
<th scope="col" style="width:10%">Amt A Due date</th>
</tr>
</thead>
<tbody>
<tr>
<td>26,096</td>
<td>3,433</td>
<td>0</td>
<td>5,020</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>34,549</td>
<td>34,549</td>
<td>34,845</td>
</tr>
</tbody>
</table>
<!--End-->
<!--Horizontal Table 2-->
<table class="table table-hover table-bordered ">
<thead>
<tr>
<th scope="col ">C-Duty</th>
<th scope="col ">Rd Maint</th>
<th scope="col ">Mosque</th>
<th scope="col ">Conserve</th>
<th scope="col ">Sewerage</th>
<th scope="col ">Misc</th>
<th scope="col ">Sanitation</th>
<th scope="col ">Tv fee</th>
<th scope="col ">Rent</th>
<th scope="col ">Rent Arrear</th>
<th scope="col " style="width:10%">Amt W Due date</th>
<th scope="col " style="width:10%">Amt A Due date</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>100</td>
<td>5</td>
<td>350</td>
<td>350</td>
<td>650</td>
<td>925</td>
<td>35</td>
<td>0</td>
<td>0</td>
<td>24,15</td>
<td>24,15</td>
</tr>
</tbody>
</table>
<!--end-->
<!--Horizontal Table 3-->
<table class="table table-hover table-bordered ">
<thead>
<tr>
<th scope="col ">F/MRC</th>
<th scope="col ">F/MRC Arrears</th>
<th scope="col ">Water Charges</th>
<th scope="col ">Water Arrears</th>
<th scope="col ">Total Amount</th>
<th scope="col " style="width:10%">Amt W.Due Date</th>
<th scope="col " style="width:10%">Amt A.Due Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>0</td>
<td>1,060</td>
<td>0</td>
<td>1,060</td>
<td>1,060</td>
<td>1,070</td>
</tr>
</tbody>
</table>
<!--end-->
<!--Horizontal Table 4-->
<table class="table table-hover table-bordered ">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Grand Total</td>
<td style="width:10%">38,024</td>
<td style="width:10%">39,339</td>
</tr>
</tbody>
</table>
</section>
(if you open the result in full page you can see the correct allignment)
using external style: i.e. by adding a class to the two columns, then setting the style in the CSS file
.eqAllign {
width:10%
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!--Table Upper-->
<section class="row" style="margin-top: 10px;">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th scope="col">Energy Charge</th>
<th scope="col">E-Arrears</th>
<th scope="col">I-Tax</th>
<th scope="col">GST</th>
<th scope="col">E-Tax</th>
<th scope="col">F-Tax</th>
<th scope="col">R.G.S.T</th>
<th scope="col">Total Amount</th>
<th scope="col" class="eqAllign">Amt W Due date</th>
<th scope="col" class="eqAllign">Amt A Due date</th>
</tr>
</thead>
<tbody>
<tr>
<td>26,096</td>
<td>3,433</td>
<td>0</td>
<td>5,020</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>34,549</td>
<td>34,549</td>
<td>34,845</td>
</tr>
</tbody>
</table>
<!--End-->
<!--Horizontal Table 2-->
<table class="table table-hover table-bordered ">
<thead>
<tr>
<th scope="col ">C-Duty</th>
<th scope="col ">Rd Maint</th>
<th scope="col ">Mosque</th>
<th scope="col ">Conserve</th>
<th scope="col ">Sewerage</th>
<th scope="col ">Misc</th>
<th scope="col ">Sanitation</th>
<th scope="col ">Tv fee</th>
<th scope="col ">Rent</th>
<th scope="col ">Rent Arrear</th>
<th scope="col " class="eqAllign">Amt W Due date</th>
<th scope="col " class="eqAllign">Amt A Due date</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>100</td>
<td>5</td>
<td>350</td>
<td>350</td>
<td>650</td>
<td>925</td>
<td>35</td>
<td>0</td>
<td>0</td>
<td>24,15</td>
<td>24,15</td>
</tr>
</tbody>
</table>
<!--end-->
<!--Horizontal Table 3-->
<table class="table table-hover table-bordered ">
<thead>
<tr>
<th scope="col ">F/MRC</th>
<th scope="col ">F/MRC Arrears</th>
<th scope="col ">Water Charges</th>
<th scope="col ">Water Arrears</th>
<th scope="col ">Total Amount</th>
<th scope="col " class="eqAllign">Amt W.Due Date</th>
<th scope="col " class="eqAllign">Amt A.Due Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>0</td>
<td>1,060</td>
<td>0</td>
<td>1,060</td>
<td>1,060</td>
<td>1,070</td>
</tr>
</tbody>
</table>
<!--end-->
<!--Horizontal Table 4-->
<table class="table table-hover table-bordered ">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Grand Total</td>
<td class="eqAllign">38,024</td>
<td class="eqAllign">39,339</td>
</tr>
</tbody>
</table>
</section>

Related

How to use col and rowspan at the same time?

I'm trying to replicate this table:
I have trouble with the third table head, I don't know how to make that double row and those 5 columns and how to do the table rows and table data to make it fit the head.
I never used colgroup and rowspan before, I tried to mix some examples I've found but i'm not having success.
This is what I have so far:
<table border="1">
<caption>
Poster availability
</caption>
<col>
<colgroup span="5"></colgroup>
<col>
<thead>
<tr>
<th scope="col">Poster name</th>
<td rowspan="2"></td>
<th scope="colrow" colspan="5">Color</th>
<th scope="col">Sizes available</th>
</tr>
<tr>
<th>1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">4</th>
<th scope="col">5</th>
<th scope="col">6</th>
<th>7</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="col">1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">4</th>
<th scope="col">5</th>
<th scope="col">6</th>
<th scope="col">7</th>
</tr>
</tbody>

This is the way I solved it, just in case other newbie like me has the same problem
<table border="1">
<col>
<col>
<colgroup span="5"></colgroup>
<col>
<tr>
<td rowspan="2">EVIDENCIA DE APRENDIZAJE</td>
<th rowspan="2">%</th>
<th colspan="5" scope="colgroup">INDICADOR DE ALCANCE</th>
<th rowspan="2">INSTRUMENTOS DE EVALUACIÓN</th>
</tr>
<tr>
<th scope="col">A</th>
<th scope="col">B</th>
<th scope="col">C</th>
<th scope="col">D</th>
<th scope="col">E</th>
</tr>
<tr>
<td>EVIDENCIA 1</td>
<td>50%</td>
<td>A1</td>
<td>B2</tds>
<td>C3</td>
<td>D4</td>
<TD>E1</TD>
<td>Instrumento 1</td>
</tr>
</table>

Yii2 Unable to convert html to pdf

I am trying to convert an HTML page into pdf using mpdf.
public function actionIndex()
{
$type = "";
$dataProvider = "";
$columns = "";
if(isset($_POST['cust_id']))
{
$type = "bill";
$content = $this->renderPartial('_bill', ['dataProvider' => $dataProvider]);
$pdf = new Pdf([
// set to use core fonts only
'mode' => Pdf::MODE_UTF8,
// A4 papr format
'format' => Pdf::FORMAT_A4,
// portrait orientation
'orientation' => Pdf::ORIENT_PORTRAIT,
// stream to browser inline
'destination' => Pdf::DEST_DOWNLOAD,
// your html content input
'content' => $content,
// format content from your own css file if needed or use the
// enhanced bootstrap css built by Krajee for mPDF formatting
//'cssFile' => '#vendor/kartik-v/yii2-mpdf/assets/kv-mpdf-bootstrap.min.css',
// any css to be embedded if required
//'cssInline' => '.kv-heading-1{font-size:14px}',
// set mPDF properties on the fly
'options' => ['title' => 'Bill'],
// call mPDF methods on the fly
'methods' => [
'SetHeader' => ['Generated On: ' . date("Y-m-d h:i:sa")],
'SetFooter' => ['{PAGENO}']
]
]);
$pdf->filename = "Bill.pdf";
try {
return $pdf->render();
} catch (MpdfException $e) {
} catch (CrossReferenceException $e) {
} catch (PdfTypeException $e) {
} catch (PdfParserException $e) {
} catch (InvalidConfigException $e) {
}
}
try {
return $this->render('index', [
'dataProvider' => $dataProvider,
'type' => $type
/*'searchModel' => $searchModel*/
]);
} catch (NotFoundHttpException $e) {
}
}
HTML Page
<?PHP
/* #var $dataProvider yii\data\ActiveDataProvider */
$this->params['breadcrumbs'][] = $this->title;
?>
<!doctype HTML>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!--Css-->
<link rel="stylesheet" href="index.css">
<title>Electricity Bill</title>
</head>
<body>
<!--Main body-->
<div class="container">
<!--Header-->
<section class="row" style="border-bottom: tomato 2px solid; padding: 25px;">
<div class="col-3">
<img src="logo.jpg" alt="logo" class="size">
</div>
<div class="col-7 text">
<h5>Company</h5>
<h6>Web Site</h6>
<h6>Telephones:</h6>
<h6><u>Bill for electricity, Water and Allied Charges</u></h6>
</div>
</section>
<!--Ends-->
<!--Table Upper-->
<section class="row" style="margin-top: 10px;">
<!--Left Side-->
<div class="col-3 ">
<table class="table table-hover table-borderless ">
<tbody>
<tr>
<td>Consumer no</td>
<td>12345789</td>
</tr>
<tr>
<td>Address</td>
<td>Model Town</td>
</tr>
<tr>
<td>Consumer Name</td>
<td>Faisal</td>
</tr>
<tr>
<td>Meter No</td>
<td>43748</td>
</tr>
<tr>
<td>Meter Type</td>
<td>1/Phase</td>
</tr>
<tr>
<td>Previous Reading</td>
<td>178923</td>
</tr>
<tr>
<td>Current Reading</td>
<td>180199</td>
</tr>
<tr>
<td>Difference</td>
<td>1275</td>
</tr>
<tr>
<td>Average Units</td>
<td>0</td>
</tr>
<tr>
<td>Total Units</td>
<td>1275</td>
</tr>
</tbody>
</table>
</div>
<!--Ends-->
<!--Right Side-->
<div class="col-9">
<table class="table table-hover table-bordered ">
<thead>
<tr>
<th scope="col ">Billing Month</th>
<th scope="col ">M.R Date</th>
<th scope="col ">Issue Date</th>
<th scope="col ">Due Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>4 - 2020</td>
<td>27-APRIL-2020</td>
<td>05-MAY-2020</td>
<td>12-MAY-2020</td>
</tr>
</tbody>
</table>
<!--Second Table-->
<div class="row" style="margin-top: 10px;">
<div class="col-3">
<table class="table table-hover table-borderless">
<thead>
<tr>
<th scope="col" style="font-size: 16px;">Tariff</th>
<th scope="col">Member</th>
</tr>
<tr>
<th scope="col">Units</th>
<th scope="col">UnitRates</th>
</tr>
</thead>
<tbody>
<tr>
<td>1-100</td>
<td>14</td>
</tr>
<tr>
<td>1-100</td>
<td>14</td>
</tr>
<tr>
<td>101-300</td>
<td>17</td>
</tr>
<tr>
<td>101-300</td>
<td>17</td>
</tr>
<tr>
<td>301-700</td>
<td>20</td>
</tr>
<tr>
<td>301-700</td>
<td>20</td>
</tr>
<tr>
<td>above</td>
<td>21</td>
</tr>
<tr>
<td>above</td>
<td>21</td>
</tr>
</tbody>
</table>
</div>
<!--Bill History-->
<div class="col-9 ">
<table class="table table-hover table-bordered">
<thead>
<h4>Bill History</h4>
<tr>
<th scope="col">Month/Year</th>
<th scope="col">Units</th>
<th scope="col">Bill Amount</th>
<th scope="col">Payment</th>
</tr>
</thead>
</table>
<table class="table table-hover table-borderless">
<tbody>
<tr>
<td>3/2020</td>
<td>1,188</td>
<td>35,378</td>
<td>35,378</td>
</tr>
<tr>
<td>2/2020</td>
<td>1,405</td>
<td>35,378</td>
<td>35,378</td>
</tr>
<tr>
<td>1/2020</td>
<td>2,395</td>
<td>67,893</td>
<td>67,893</td>
</tr>
<tr>
<td>12/2019</td>
<td>3/2020</td>
<td>3/2020</td>
<td>3/2020</td>
</tr>
<tr>
<td>11/2019</td>
<td>877</td>
<td>33,034</td>
<td>33,034</td>
</tr>
<tr>
<td>10/2019</td>
<td>1,507</td>
<td>43,348</td>
<td>43,348</td>
</tr>
<tr>
<td>9/2019</td>
<td>1,812</td>
<td>51,798</td>
<td>51,798</td>
</tr>
<tr>
<td>8/2019</td>
<td>2,246</td>
<td>57,052</td>
<td>57,052</td>
</tr>
<tr>
<td>7/2019</td>
<td>2700</td>
<td>69,044</td>
<td>69,044</td>
</tr>
<tr>
<td>6/2019</td>
<td>2,383</td>
<td>60,375</td>
<td>60,375</td>
</tr>
<tr>
<td>5/2019</td>
<td>2,372</td>
<td>61,485</td>
<td>61,485</td>
</tr>
<tr>
<td>4/2019</td>
<td>1,728</td>
<td>48,804</td>
<td>48,804</td>
</tr>
<tr>
<td>3/2019</td>
<td>1,405</td>
<td>28,598</td>
<td>28,598</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--End-->
</div>
<!--Horizontal Table 1-->
<table class="table table-hover table-bordered">
<thead>
<tr>
<th scope="col ">Energy Charge</th>
<th scope="col ">E-Arrears</th>
<th scope="col ">I-Tax</th>
<th scope="col ">GST</th>
<th scope="col ">E-Tax</th>
<th scope="col ">F-Tax</th>
<th scope="col ">R.G.S.T</th>
<th scope="col ">Total Amount</th>
<th scope="col ">Amt W Due date</th>
<th scope="col ">Amt A Due date</th>
</tr>
</thead>
<tbody>
<tr>
<td>26,096</td>
<td>3,433</td>
<td>0</td>
<td>5,020</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>34,549</td>
<td>34,549</td>
<td>34,845</td>
</tr>
</tbody>
</table>
<!--End-->
<!--Horizontal Table 2-->
<table class="table table-hover table-bordered ">
<thead>
<tr>
<th scope="col ">C-Duty</th>
<th scope="col ">Rd Maint</th>
<th scope="col ">Mosque</th>
<th scope="col ">Conserve</th>
<th scope="col ">Sewerage</th>
<th scope="col ">Misc</th>
<th scope="col ">Sanitation</th>
<th scope="col ">Tv fee</th>
<th scope="col ">Rent</th>
<th scope="col ">Rent Arrear</th>
<th scope="col ">Amt W Due date</th>
<th scope="col ">Amt A Due date</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>100</td>
<td>5</td>
<td>350</td>
<td>350</td>
<td>650</td>
<td>925</td>
<td>35</td>
<td>0</td>
<td>0</td>
<td>24,15</td>
<td>24,15</td>
</tr>
</tbody>
</table>
<!--end-->
<!--Horizontal Table 3-->
<table class="table table-hover table-bordered ">
<thead>
<tr>
<th scope="col ">F/MRC</th>
<th scope="col ">F/MRC Arrears</th>
<th scope="col ">Water Charges</th>
<th scope="col ">Water Arrears</th>
<th scope="col ">Total Amount</th>
<th scope="col ">Amt W.Due Date</th>
<th scope="col ">Amt A.Due Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>0</td>
<td>1,060</td>
<td>0</td>
<td>1,060</td>
<td>1,060</td>
<td>1,070</td>
</tr>
</tbody>
</table>
<!--end-->
<!--Horizontal Table 4-->
<table class="table table-hover table-bordered ">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Grand Total</td>
<td>38,024</td>
<td>39,339</td>
</tr>
</tbody>
</table>
<!--end-->
</section>
<!--Second Table-->
<!-- <section>
<div class="row ">
<img src="1.jpg" alt="" class="size-default">
</div>
</section>-->
<section>
<div class="row">
<div class=" col-2 cl">
<img src=" logo.jpg " alt=" logo " class=" size ">
</div>
<div class="col-8 text padding">
<h5>Company.</h5>
<h6><u>Bill for electricity, Water and Allied Charges</u></h6>
</div>
</div>
</section>
<section class="row">
<!--Horizontal Table 1-->
<table class=" table table-hover table-bordered ">
<thead>
<tr>
<th scope=" col ">Energy Charge</th>
<th scope=" col ">E-Arrears</th>
<th scope=" col ">I-Tax</th>
<th scope=" col ">GST</th>
<th scope=" col ">E-Tax</th>
<th scope=" col ">F-Tax</th>
<th scope=" col ">R.G.S.T</th>
<th scope=" col ">Total Amount</th>
<th scope=" col ">Amt W Due date</th>
<th scope=" col ">Amt A Due date</th>
</tr>
</thead>
<tbody>
<tr>
<td>26,096</td>
<td>3,433</td>
<td>0</td>
<td>5,020</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>34,549</td>
<td>34,549</td>
<td>34,845</td>
</tr>
</tbody>
</table>
<!--End-->
<!--Horizontal Table 2-->
<table class=" table table-hover table-bordered ">
<thead>
<tr>
<th scope=" col ">C-Duty</th>
<th scope=" col ">Rd Maint</th>
<th scope=" col ">Mosque</th>
<th scope=" col ">Conserve</th>
<th scope=" col ">Sewerage</th>
<th scope=" col ">Misc</th>
<th scope=" col ">Sanitation</th>
<th scope=" col ">Tv fee</th>
<th scope=" col ">Rent</th>
<th scope=" col ">Rent Arrear</th>
<th scope=" col ">Amt W Due date</th>
<th scope=" col ">Amt A Due date</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>100</td>
<td>5</td>
<td>350</td>
<td>350</td>
<td>650</td>
<td>925</td>
<td>35</td>
<td>0</td>
<td>0</td>
<td>24,15</td>
<td>24,15</td>
</tr>
</tbody>
</table>
<!--end-->
<!--Horizontal Table 3-->
<table class=" table table-hover table-bordered ">
<thead>
<tr>
<th scope=" col ">F/MRC</th>
<th scope=" col ">F/MRC Arrears</th>
<th scope=" col ">Water Charges</th>
<th scope=" col ">Water Arrears</th>
<th scope=" col ">Total Amount</th>
<th scope=" col ">Amt W.Due Date</th>
<th scope=" col ">Amt A.Due Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>0</td>
<td>1,060</td>
<td>0</td>
<td>1,060</td>
<td>1,060</td>
<td>1,070</td>
</tr>
</tbody>
</table>
<!--end-->
<!--Horizontal Table 4-->
<table class=" table table-hover table-bordered ">
<tbody>
<tr>
<td>Consumer No</td>
<td></td>
<td>Billing Month</td>
<td></td>
<td>Grand Total</td>
<td>38,024</td>
<td>39,339</td>
</tr>
</tbody>
</table>
<!--end-->
</section>
Ther error I am getting is Undefined offset: -1 at if ($this->mpdf->cell[$this->mpdf->row][$this->mpdf->col]['s'] > 0 && !$this->mpdf->nestedtablejustfinished)
/* -- TABLES -- */
if ($this->mpdf->tableLevel) {
// If already something on the line
if ($this->mpdf->cell[$this->mpdf->row][$this->mpdf->col]['s'] > 0 && !$this->mpdf->nestedtablejustfinished) {
$this->mpdf->_saveCellTextBuffer("\n");
if (!isset($this->mpdf->cell[$this->mpdf->row][$this->mpdf->col]['maxs'])) {
$this->mpdf->cell[$this->mpdf->row][$this->mpdf->col]['maxs'] = $this->mpdf->cell[$this->mpdf->row][$this->mpdf->col]['s'];
} elseif ($this->mpdf->cell[$this->mpdf->row][$this->mpdf->col]['maxs'] < $this->mpdf->cell[$this->mpdf->row][$this->mpdf->col]['s']) {
$this->mpdf->cell[$this->mpdf->row][$this->mpdf->col]['maxs'] = $this->mpdf->cell[$this->mpdf->row][$this->mpdf->col]['s'];
}
$this->mpdf->cell[$this->mpdf->row][$this->mpdf->col]['s'] = 0; // reset
}
Here is the Fiddle

How to set inner to full width

I'm developing collapsible tables, like outer and inner table for every row click.
My Code:
HTML:
<table class="table outerTbl mb-0">
<thead>
<tr>
<th scope="col">SL No.</th>
<th scope="col">Program Details</th>
<th scope="col">Program Levels</th>
<th scope="col">Program Start Date</th>
<th scope="col">Program End Date</th>
<th scope="col">Total Duration</th>
<th scope="col">Start</th>
<th scope="col">Cacel</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="collapsed" data-toggle="collapse" data-target="#row1" aria-expanded="false" aria-controls="row1">View</th>
<td>Stay Active & Win</td>
<td>03</td>
<td>03/12/2018</td>
<td>03/02/2019</td>
<td>5 Days, 240secs.</td>
<td><img src="images/start.png"></td>
<td><img src="images/cancel.png"></td>
</tr>
<tr id="row1" class="table collapse innerTbl text-center col-11">
<td>
<table>
<thead>
<tr>
<th scope="col">Program Details</th>
<th scope="col">Program Levels</th>
<th scope="col">Progrma Duration</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Power Up <img src="images/trophy.png"/></td>
<td>Level 1</td>
<td>240 secs</td>
<td>Play</td>
</tr>
<tr>
<td>Warriors <img src="images/trophy.png"/></td>
<td>Level 2</td>
<td>5 Days</td>
<td>Play</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<th scope="row" class="collapsed" data-toggle="collapse" data-target="#row2" aria-expanded="false" aria-controls="row2">View</th>
<td>New Year Goals</td>
<td>01</td>
<td>01/01/2019</td>
<td>01/02/2019</td>
<td>5 Days, 240secs.</td>
<td><img src="images/start.png"/></td>
<td><img src="images/cancel.png"/></td>
</tr>
<tr id="row2" class="table collapse innerTbl text-center col-11">
<td>
<table >
<thead>
<tr>
<th scope="col">Program Details</th>
<th scope="col">Program Levels</th>
<th scope="col">Progrma Duration</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Power Up <img src="images/trophy.png"/></td>
<td>Level 1</td>
<td>240 secs</td>
<td>Play</td>
</tr>
<tr>
<td>Warriors <img src="images/trophy.png"/></td>
<td>Level 2</td>
<td>5 Days</td>
<td>Play</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I tried to put width:100% on every level between the actual table but did not help.
Tried Examples none of them worked:
table {
width: 100%;
}
and One of the tables has no 100% in width, added this line,
td > table { width:100%; }
Using Bootstrap v4.1
In for inner table tr td is not setting full width? How to set inner table to full width?

Hope this would help you. Below is the code for your reference codepen
<table class="table outerTbl mb-0">
<thead>
<tr>
<th scope="col">SL No.</th>
<th scope="col">Program Details</th>
<th scope="col">Program Levels</th>
<th scope="col">Program Start Date</th>
<th scope="col">Program End Date</th>
<th scope="col">Total Duration</th>
<th scope="col">Start</th>
<th scope="col">Cacel</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="collapsed" data-toggle="collapse" data-target="#row1" aria-expanded="false" aria-controls="row1">View</th>
<td>Stay Active & Win</td>
<td>03</td>
<td>03/12/2018</td>
<td>03/02/2019</td>
<td>5 Days, 240secs.</td>
<td><img src="images/start.png"></td>
<td><img src="images/cancel.png"></td>
</tr>
<tr id="row1" class="table collapse innerTbl text-center col-11">
<td colspan="8">
<table width="100%">
<thead>
<tr>
<th scope="col">Program Details</th>
<th scope="col">Program Levels</th>
<th scope="col">Progrma Duration</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Power Up <img src="images/trophy.png"/></td>
<td>Level 1</td>
<td>240 secs</td>
<td>Play</td>
</tr>
<tr>
<td>Warriors <img src="images/trophy.png"/></td>
<td>Level 2</td>
<td>5 Days</td>
<td>Play</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<th scope="row" class="collapsed" data-toggle="collapse" data-target="#row2" aria-expanded="false" aria-controls="row2">View</th>
<td>New Year Goals</td>
<td>01</td>
<td>01/01/2019</td>
<td>01/02/2019</td>
<td>5 Days, 240secs.</td>
<td><img src="images/start.png"/></td>
<td><img src="images/cancel.png"/></td>
</tr>
<tr id="row2" class="table collapse innerTbl text-center col-11">
<td>
<table >
<thead>
<tr>
<th scope="col">Program Details</th>
<th scope="col">Program Levels</th>
<th scope="col">Progrma Duration</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Power Up <img src="images/trophy.png"/></td>
<td>Level 1</td>
<td>240 secs</td>
<td>Play</td>
</tr>
<tr>
<td>Warriors <img src="images/trophy.png"/></td>
<td>Level 2</td>
<td>5 Days</td>
<td>Play</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

you can use style="width: 100vw;"
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" type="text/css" />
<table class="table outerTbl mb-0">
<thead>
<tr>
<th scope="col">SL No.</th>
<th scope="col">Program Details</th>
<th scope="col">Program Levels</th>
<th scope="col">Program Start Date</th>
<th scope="col">Program End Date</th>
<th scope="col">Total Duration</th>
<th scope="col">Start</th>
<th scope="col">Cacel</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="collapsed" data-toggle="collapse" data-target="#row1" aria-expanded="false" aria-controls="row1">
View </th>
<td>Stay Active & Win</td>
<td>03</td>
<td>03/12/2018</td>
<td>03/02/2019</td>
<td>5 Days, 240secs.</td>
<td> <img src="images/start.png"/> </td>
<td> <img src="images/cancel.png"/> </td>
</tr>
<tr id="row1" class="table collapse innerTbl text-center col-11"><td>
<table style="width: 100vw;">
<thead>
<tr>
<th scope="col">Program Details</th>
<th scope="col">Program Levels</th>
<th scope="col">Progrma Duration</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Power Up <img src="images/trophy.png"/></td>
<td>Level 1</td>
<td>240 secs</td>
<td>Play</td>
</tr>
<tr>
<td>Warriors <img src="images/trophy.png"/></td>
<td>Level 2</td>
<td>5 Days</td>
<td>Play</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<th scope="row" class="collapsed" data-toggle="collapse" data-target="#row2" aria-expanded="false" aria-controls="row2">View</th>
<td>New Year Goals</td>
<td>01</td>
<td>01/01/2019</td>
<td>01/02/2019</td>
<td>5 Days, 240secs.</td>
<td><img src="images/start.png"/></td>
<td><img src="images/cancel.png"/></td>
</tr>
<tr id="row2" class="table collapse innerTbl text-center col-11"> <td>
<table style="width: 100vw;">
<thead>
<tr>
<th scope="col">Program Details</th>
<th scope="col">Program Levels</th>
<th scope="col">Progrma Duration</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Power Up <img src="images/trophy.png"/></td>
<td>Level 1</td>
<td>240 secs</td>
<td>Play</td>
</tr>
<tr>
<td>Warriors <img src="images/trophy.png"/></td>
<td>Level 2</td>
<td>5 Days</td>
<td>Play</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>

Print HTML Table with Multiple Table Header

Please help me, on How to Print HTML Table with Multiple Table Header?
Sample code of my table header below:
<table>
<thead>
<tr>
<th colspan="6">January 2018</th>
</tr>
<tr>
<th colspan="2">TARGET</th>
<th colspan="2">ORDERED</th>
<th colspan="2">SALES</th>
</tr>
<tr>
<th>QTY</th> <th>AMOUNT</th>
<th>QTY</th> <th>AMOUNT</th>
<th>QTY</th> <th>AMOUNT</th>
<th>QTY</th> <th>AMOUNT</th>
<th>QTY</th> <th>AMOUNT</th>
<th>QTY</th> <th>AMOUNT</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
This is what i want to see in printable page for the Table Header:

<table border="2" >
<thead>
<tr>
<th colspan="2"></th>
<th colspan="6" ></th>
<th colspan="6">January 2018</th>
</tr>
<tr>
<th colspan="2"></th>
<th colspan="6"></th>
<th colspan="2">TARGET</th>
<th colspan="2">ORDERED</th>
<th colspan="2">SALES</th>
</tr>
<tr>
<th colspan="2">item</th>
<th colspan="6">Description</th>
<th colspan="1">QTY</th> <th colspan="1">AMOUNT</th>
<th colspan="1">QTY</th> <th colspan="1">AMOUNT</th>
<th colspan="1">QTY</th> <th colspan="1">AMOUNT</th>
</tr>
</thead>
<tbody>
</tbody>

See below code..
<table border="2" >
<thead>
<tr>
<th colspan="6" ></th>
<th colspan="6">January 2018</th>
</tr>
<tr>
<th colspan="6"></th>
<th colspan="2">TARGET</th>
<th colspan="2">ORDERED</th>
<th colspan="2">SALES</th>
</tr>
<tr>
</tr>
<tr>
<th colspan="2">item</th>
<th colspan="4">Description</th>
<th colspan="1">QTY</th> <th colspan="1">AMOUNT</th>
<th colspan="1">QTY</th> <th colspan="1">AMOUNT</th>
<th colspan="1">QTY</th> <th colspan="1">AMOUNT</th>
</tr>
</thead>
<tbody>
</tbody>
here is working example :: https://jsfiddle.net/deepakvaishnav/0L48mvcz/

Use HTML Table as a datasource to bind data to Kendo UI Template

I created a service that will return a set of HTML tables based on a request parameter. Currently, I return the data (HTML Page) back as a string. A sample output is below:
<!DOCTYPE html>
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>Person</h1>
<table name="name">
<thead>
<tr>
<th data-field="propertyID"> Property ID</th>
<th data-field="property"> Property</th>
<th data-field="valueID"> Value ID</th>
<th data-field="value"> Value</th>
</tr>
</thead>
<tr>
<td>http://topbraid.org/examples/kennedys#name</td>
<td>Name</td>
<td>Alfred Tucker</td>
<td>Alfred Tucker</td>
</tr>
</table>
<table name="firstName">
<thead>
<tr>
<th data-field="propertyID"> Property ID</th>
<th data-field="property"> Property</th>
<th data-field="valueID"> Value ID</th>
<th data-field="value"> Value</th>
</tr>
</thead>
<tr>
<td>http://topbraid.org/examples/kennedys#firstName</td>
<td>First Name</td>
<td>Alfred</td>
<td>Alfred</td>
</tr>
</table>
<table name="lastName">
<thead>
<tr>
<th data-field="propertyID"> Property ID</th>
<th data-field="property"> Property</th>
<th data-field="valueID"> Value ID</th>
<th data-field="value"> Value</th>
</tr>
</thead>
<tr>
<td>http://topbraid.org/examples/kennedys#lastName</td>
<td>Last Name</td>
<td>Tucker</td>
<td>Tucker</td>
</tr>
</table>
<table name="gender">
<thead>
<tr>
<th data-field="propertyID"> Property ID</th>
<th data-field="property"> Property</th>
<th data-field="valueID"> Value ID</th>
<th data-field="value"> Value</th>
</tr>
</thead>
<tr>
<td>http://topbraid.org/examples/kennedys#gender</td>
<td>Gender</td>
<td>http://topbraid.org/examples/kennedys#male</td>
<td>male</td>
</tr>
</table>
<table name="birthYear">
<thead>
<tr>
<th data-field="propertyID"> Property ID</th>
<th data-field="property"> Property</th>
<th data-field="valueID"> Value ID</th>
<th data-field="value"> Value</th>
</tr>
</thead>
<tr>
<td>http://topbraid.org/examples/kennedys#birthYear</td>
<td>Birth Year</td>
<td>1967</td>
<td>1967</td>
</tr>
</table>
<table name="spouse">
<thead>
<tr>
<th data-field="propertyID"> Property ID</th>
<th data-field="property"> Property</th>
<th data-field="valueID"> Value ID</th>
<th data-field="value"> Value</th>
</tr>
</thead>
<tr>
<td>http://topbraid.org/examples/kennedys#spouse</td>
<td>Spouce</td>
<td>http://topbraid.org/examples/kennedys#KymSmith</td>
<td>Kym Smith</td>
</tr>
</table>
<table name="type">
<thead>
<tr>
<th data-field="propertyID"> Property ID</th>
<th data-field="property"> Property</th>
<th data-field="valueID"> Value ID</th>
<th data-field="value"> Value</th>
</tr>
</thead>
<tr>
<td>http://www.w3.org/1999/02/22-rdf-syntax-ns#type</td>
<td>Type</td>
<td>http://topbraid.org/examples/kennedys#Person</td>
<td>Person</td>
</tr>
</table>
</body>
</html>
Now that I get the HTML string back, I would like to somehow bind each table to a Grid in the Kendo UI. How can this be done? If not, what would be the proper way to be doing this?

I'm not sure if this is exactly what you want, but you can just inject that HTML into your page (my example uses jQuery)
<div id="contentArea"></div>
$("#contentArea").html(serviceResult);
then turn all the tables into Kendo grids:
$("#contentArea table").kendoGrid({});