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>
Related
I want to extend the "Water Body Classification" column until to the top of the "D" column, can't figure out how to do it...
Here's the table code
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Parameter</th>
<th scope="col">Unit</th>
<th scope="col" width="30px">Water Body Classification</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<th class="text-center" scope="col">AA</th>
<th class="text-center" scope="col">A</th>
<th class="text-center" scope="col">B</th>
<th class="text-center" scope="col">C</th>
<th class="text-center" scope="col">D</th>
</tr>
<tr>
<td>pH (Range)</td>
<td>mg/L</td>
<td class="text-center">6.5-8.5</td>
<td class="text-center">6.5-8.5</td>
<td class="text-center">6.5-8.5</td>
<td class="text-center">6.5-9.0</td>
<td class="text-center">6.5-9.0</td>
</tr>
</tbody>
</table>
You can use colspan in your CSS code. Like this:
colspan = "10"
The code below should show the result you want:
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Parameter</th>
<th scope="col">Unit</th>
<th scope="col" width="30px" colspan="5">Water Body Classification</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<th class="text-center" scope="col">AA</th>
<th class="text-center" scope="col">A</th>
<th class="text-center" scope="col">B</th>
<th class="text-center" scope="col">C</th>
<th class="text-center" scope="col">D</th>
</tr>
<tr>
<td>pH (Range)</td>
<td>mg/L</td>
<td class="text-center">6.5-8.5</td>
<td class="text-center">6.5-8.5</td>
<td class="text-center">6.5-8.5</td>
<td class="text-center">6.5-9.0</td>
<td class="text-center">6.5-9.0</td>
</tr>
</tbody>
</table>
If you want to use the <table> tag. check the colspan and rowspan method
https://www.w3schools.com/html/html_table_colspan_rowspan.asp
And also you can use div as well
<th scope="col" width="30px" colspan='6'>Water Body Classification</th>
Change your th like this
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
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>
Does anyone here knows how to make a table header like this (refer to the image below)?
I tried:
<thead>
<tr>
<th>No.</th>
<th>Creation Date</th>
<th>Week Day</th>
<th>Log Type</th>
<th colspan="5" rowspan="1" style="text-align: center">Time</th>
<th>action</th>
</tr>
<tr>
<th>IN/START</th>
<th>OUT/STOP</th>
</tr>
</thead>
but sadly, no luck, the table head is missed up, any help, suggestions, clues, recommendations, suggestions, ideas?
That's supposed to be colspan="2" on the one column and rowspan="2" on others. Use this:
table, th {border: 1px solid #ccc; border-collapse: collapse; font-weight: normal; font-family: 'Segoe UI'; margin: 0; padding: 0;}
table {width: 100%;}
th {padding: 5px;}
<table>
<thead>
<tr>
<th rowspan="2">No.</th>
<th rowspan="2">Creation Date</th>
<th rowspan="2">Week Day</th>
<th rowspan="2">Log Type</th>
<th colspan="2" style="text-align: center">Time</th>
<th rowspan="2">action</th>
</tr>
<tr>
<th>IN/START</th>
<th>OUT/STOP</th>
</tr>
</thead>
</table>
Used to colspan="" and rowspan="" carefully as like this
Try to this
th{
border:solid 1px red;
padding:5px;
}
<table border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th rowspan="2">No.</th>
<th rowspan="2">Creation Date</th>
<th rowspan="2">Week Day</th>
<th rowspan="2">Log Type</th>
<th colspan="2" style="text-align: center">Time</th>
<th rowspan="2">action</th>
</tr>
<tr>
<th>IN/START</th>
<th>OUT/STOP</th>
</tr>
</thead>
</table>
Try with following, It will be helpfull
<table>
<tr>
<th>No.</th>
<th>Creation Date</th>
<th>Week Day</th>
<th>Log Type</th>
<th>
<table>
<tr>Time</tr>
<tr>
<th>IN/START</th>
<th>OUT/STOP</th>
</tr>
</table>
</th>
<th>action</th>
</tr>
</table>
No need to use colspan and rowspan use this simple code and add your css according to your need.
<table border="1">
<tr>
<th>No.</th>
<th>Creation Date</th>
<th>Week Day</th>
<th>Log Type</th>
<th>
<table border="1">
<tr>
<p style="text-align: center !important;">Time</p>
</tr>
<tr>
<th>IN/START</th>
<th>OUT/STOP</th>
</tr>
</table>
</th>
<th>action</th>
</tr>
</table>
have a fun.
You Should use rowspan and colspan properly.
Tutorial
and here I wrote some HTML Code here, I hope it will be helpful.
<table cellpadding="0" cellspacing="0" >
<tr>
<th rowspan="2">No</th>
<th rowspan="2">CREATION DATE</th>
<th rowspan="2">WEEK DAY</th
<th rowspan="2">LOG TYPE</th>
<th colspan="2">TIME</th>
<th rowspan="2">ACTION</th>
</tr>
<tr>
<th >IN/START</th>
<th >OUT/STOP</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td>TBODY</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
I have the following table:
<table border="1">
<tr>
<th scope="col">Header</th>
<th scope="col">Header</th>
<th scope="col">Header</th>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td>Split this one into two columns</td>
</tr>
</table>
And I wish to split the cell which contains "Split this one into two columns" into two cells/columns. How do I go about this?
Fiddle
Like this http://jsfiddle.net/8ha9e/1/
Add colspan="2" to the 3rd <th> and then have 4 <td>'s in your second row.
<table border="1">
<tr>
<th scope="col">Header</th>
<th scope="col">Header</th>
<th scope="col" colspan="2">Header</th>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<!-- The following two cells will appear under the same header -->
<td>Col 1</td>
<td>Col 2</td>
</tr>
</table>
I came here for a similar problem I was facing with my table headers.
#MrMisterMan's answer, as well as others, were really helpful, but the borders were beating my game. So, I did some research to find the use rowspan.
Here's what I did and I guess it might help others facing something similar.
<table style="width: 100%; margin-top: 10px; font-size: 0.8em;" border="1px">
<tr align="center" >
<th style="padding:2.5px; width: 10%;" rowspan="2">Item No</th>
<th style="padding:2.5px; width: 55%;" rowspan="2">DESCRIPTION</th>
<th style="padding:2.5px;" rowspan="2">Quantity</th>
<th style="padding:2.5px;" colspan="2">Rate per Item</th>
<th style="padding:2.5px;" colspan="2">AMOUNT</th>
</tr>
<tr>
<th>Rs.</th>
<th>P.</th>
<th>Rs.</th>
<th>P.</th>
</tr>
</table>
You have two options.
Use an extra column in the header, and use <colspan> in your header to stretch a cell for two or more columns.
Insert a <table> with 2 columns inside the td you want extra columns in.
Change the <td> to be split to look like this:
<td><table><tr><td>split 1</td><td>split 2</td></tr></table></td>
is that what your looking for?
<table border="1">
<tr>
<th scope="col">Header</th>
<th scope="col">Header</th>
<th scope="col" colspan="2">Header</th>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td>Split this one</td>
<td>into two columns</td>
</tr>
</table>
Use this example, you can split with the colspan attribute
<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD>Item 1</TD>
<TD COLSPAN=2>Item 2</TD>
</TR>
<TR>
<TD>Item 3</TD>
<TD>Item 3</TD>
<TD>Item 4</TD>
<TD>Item 5</TD>
</TR>
</TABLE>
More examples at http://hypermedia.univ-paris8.fr/jean/internet/ex_table.html.
Please try the following way.
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
</table>
Please try this way.
<table border="1">
<tr>
<th scope="col">Header</th>
<th scope="col">Header</th>
<th colspan="2">Header</th>
</tr>
<tr>
<td scope="row"> </td>
<td scope="row"> </td>
<td scope="col">Split this one</td>
<td scope="col">into two columns</td>
</tr>
</table>
https://jsfiddle.net/SyedFayaz/ud0mpgoh/7/
<table class="table-bordered">
<col />
<col />
<col />
<colgroup span="4"></colgroup>
<col />
<tr>
<th rowspan="2" style="vertical-align: middle; text-align: center">
S.No.
</th>
<th rowspan="2" style="vertical-align: middle; text-align: center">Item</th>
<th rowspan="2" style="vertical-align: middle; text-align: center">
Description
</th>
<th
colspan="3"
style="horizontal-align: middle; text-align: center; width: 50%"
>
Items
</th>
<th rowspan="2" style="vertical-align: middle; text-align: center">
Rejected Reason
</th>
</tr>
<tr>
<th scope="col">Order</th>
<th scope="col">Received</th>
<th scope="col">Accepted</th>
</tr>
<tr>
<th>1</th>
<td>Watch</td>
<td>Analog</td>
<td>100</td>
<td>75</td>
<td>25</td>
<td>Not Functioning</td>
</tr>
<tr>
<th>2</th>
<td>Pendrive</td>
<td>5GB</td>
<td>250</td>
<td>165</td>
<td>85</td>
<td>Not Working</td>
</tr>
</table>