table attributes are not correct with bootstrap - html

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>

Related

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/

Semantic way to add a "caption" inside a table

I have a table that has a caption. To group related information together, I used colspan on the <th> rows (Total divisions and Elevation) so that they serve as "captions" for the cells below them. However, I am not sure if this is the appropriate way of doing it semantically. Particularly, how will I make sure that Total divisions and Elevation would only refer to the rows below them?
<table>
<caption>Summary</caption>
<tr>
<th>Name</th>
<td>Santo Cristo</td>
</tr>
<tr>
<th>Area</th>
<td>67.99 km<sup>2</sup></td>
</tr>
<tr>
<th scope="row" colspan="2">Total divisions</th>
</tr>
<tr>
<th scope="row">Cities</th>
<td>4</td>
</tr>
<tr>
<th scope="row">Villages</th>
<td>45</td>
</tr>
<tr>
<th scope="row" colspan="2">Elevation (masl)</th>
</tr>
<tr>
<th scope="row">Highest point</th>
<td>12 meters</td>
</tr>
<tr>
<th scope="row">Lowest point</th>
<td>0 meters</td>
</tr>
</table>

Group your rows into <tbody> elements and scope each summary <th> to its parent <tbody> with scope="rowgroup" in lieu of scope="row", like so:
<table>
<caption>Summary</caption>
<thead>
<tr>
<th>Name</th>
<td>Santo Cristo</td>
</tr>
<tr>
<th>Area</th>
<td>67.99 km<sup>2</sup></td>
</tr>
</thead>
<tbody>
<tr>
<th scope="rowgroup" colspan="2">Total divisions</th>
</tr>
<tr>
<th scope="row">Cities</th>
<td>4</td>
</tr>
<tr>
<th scope="row">Villages</th>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="rowgroup" colspan="2">Elevation (masl)</th>
</tr>
<tr>
<th scope="row">Highest point</th>
<td>12 meters</td>
</tr>
<tr>
<th scope="row">Lowest point</th>
<td>0 meters</td>
</tr>
</tbody>
</table>
(The first group can be either a <thead> or another <tbody> depending on your preference, but what's important are the two groups you're trying to scope the <th> elements to.)

Header with a rowspan

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>

Splitting a table cell into two columns in HTML

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>