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
Related
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>
I created a table using the bootstrap table , but the fields are not correct
How can i fix them ?
Only the first one is correct
"""<ngb-tab>
<ng-template ngbTabTitle>
<span jhiTranslate="mainPage.yearPlan">Jahresplanung</span>
</ng-template>
<ng-template ngbTabContent>
<table class="table table-striped table-responsive" aria-hidden="true">
<thead>
<tr>
<th class="yearPlan">#</th>
<th class="yearPlan" jhiTranslate="yearPlan.april"></th>
<th class="yearPlan" jhiTranslate="yearPlan.mai"></th>
<th class="yearPlan" jhiTranslate="yearPlan.june"></th>
<th class="yearPlan" jhiTranslate="yearPlan.july"></th>
<th class="yearPlan" jhiTranslate="yearPlan.august"></th>
<th class="yearPlan" jhiTranslate="yearPlan.september"></th>
<th class="yearPlan" jhiTranslate="yearPlan.october"></th>
<th class="yearPlan" jhiTranslate="yearPlan.november"></th>
<th class="yearPlan" jhiTranslate="yearPlan.december"></th>
<th class="yearPlan" jhiTranslate="yearPlan.january"></th>
<th class="yearPlan" jhiTranslate="yearPlan.february"></th>
<th class="yearPlan" jhiTranslate="yearPlan.march"></th>
<th class="yearPlan" jhiTranslate="yearPlan.average"></th>
</tr>
</thead>
<tbody>
<tr>
<th class="yearPlan">AT</th>
</tr>
<br>
<tr>
<th class="yearPlan">EPL Pakete pm</th>
...
<th><p></p></th>
</tr>
<tr>
<th class="yearPlan">EPL DF</th>
...
<th><p></p></th>
</tr>
<tr>
<th>EPL Stopps pm</th>
...
<th><p></p></th>
</tr>
<tr>
<th>EPL Pakete pd</th>
<th><p></p></th>
...
</tr>
<tr>
<th>EPL Stopps pm</th>
<th><p></p></th>
...
</tr>
<tr>
<th></th>
</tr>
<tr>
<th>APL Pakete pm</th>
<th><input size="3"></th>
...
<th><p></p></th>
</tr>
<tr>
<th>APL KDF</th>
<th><input size="3"></th>
...
<th><p></p></th>
</tr>
<tr>
<th>APL Stopps pm</th>
...
</tr>
<tr>
<th>APL Pakete pd</th>
<th><p></p></th>
...
<th><p></p></th>
</tr>
<tr>
<th>APL Stopps pm</th>
...
</tr>
<tr>
<th></th>
</tr>
<tr>
<th>Fahrzeuge</th>
...
<th><input size="3"></th>
<th><p></p></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th>EPL Pakete pro FZG</th>
<th><p></p></th>
...
</tr>
<tr>
<th>EPL Stopps pro FZG</th>
<th><p></p></th>
<th><p></p></th>
...
</tr>
<tr>
<th>APL Pakete pro FZG</th>
<th><p></p></th>
...
</tr>
<tr>
<th>APL Stopps pro FZG</th>
<th><p></p></th>
<th><p></p></th>
...
</tr>
<tr>
<th></th>
</tr>
</tbody>
</table>
</ng-template>
</ngb-tab>
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>
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/
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({});