I have a <table> that I am trying to make mobile-friendly with some CSS. However, I do not want this 'mobile-friendly' CSS to apply to all our tables. The CSS should not be applied to tables that have the class no-wrap. All of the tables we use have the class .table2. We also have a lot of nested tables. And these nested tables are the main problem. Here is an example with jsfiddle.
As you can see in the example, the first table has 2 classes; table2 and no-wrap. I do not want to apply the 'mobile-friendly' CSS to tables that have the no-wrap class. So the first example works fine because the CSS is not applied. However, the second table also has the no-wrap class, but I guess because it is nested inside another table (that also has the class table2), it does not look at the :not(.no-wrap) selector and the CSS is applied.
Code for reference:
.table2 {
color: #000000;
width: 100%;
table-layout: fixed;
overflow: hidden;
border-spacing: 10px 5px;
border: 1px solid gray;
}
#media only screen and (max-width: 1024px) {
.track table.table2:not(.no-wrap),
.track .table2:not(.no-wrap) thead,
.track .table2:not(.no-wrap) tbody,
.track .table2:not(.no-wrap) th,
.track .table2:not(.no-wrap) td,
.track .table2:not(.no-wrap) tr {
display: block;
}
.track .table2:not(.no-wrap) tr {
margin: 20px;
}
.track .table2:not(.no-wrap) tr[height] {
height: 0;
}
.track .table2:not(.no-wrap) td {
position: relative;
margin: 5px 0;
}
}
<div class="track">
<table cellspacing="0" cellpadding="0" class="table2 no-wrap">
<tbody>
<tr height="19">
<td width="170"></td>
<td></td>
<td width="80"></td>
<td width="80"></td>
<td width="80"></td>
<td width="80"></td>
<td width="100"></td>
</tr>
<tr>
<td class="trackFormHeaderTitle">Artikel</td>
<td class="trackFormHeaderTitle">Omschrijving</td>
<td class="trackFormHeaderTitle" align="right">Aantal </td>
<td class="trackFormHeaderTitle" align="right">Bruto prijs </td>
<td class="trackFormHeaderTitle" align="right">Netto prijs </td>
<td class="trackFormHeaderTitle" align="right">Kostprijs </td>
<td class="trackFormHeaderTitle"> BTW</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="inpAll trackFormBodyCellLink">
<font size="2">BBA</font>
</td>
<td bgcolor="#FFFFFF" class="inpTRB">
<font size="2">Bezoek Bedrijfsarts</font>
</td>
<td bgcolor="#FFFFFF" class="inpTRB" align="right">
<font size="2">1,000</font>
</td>
<td bgcolor="#FFFFFF" class="inpTRB" align="right">
<font size="2">175,00</font>
</td>
<td bgcolor="#FFFFFF" class="inpTRB" align="right">
<font size="2">175,00</font>
</td>
<td bgcolor="#FFFFFF" class="inpTRB" align="right">
<font size="2">100,00</font>
</td>
<td bgcolor="#FFFFFF" class="inpTRB">
<font size="2">Hoog-tarief</font>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="inpLRB"> </td>
<td bgcolor="#FFFFFF" class="inpRB"> </td>
<td bgcolor="#FFFFFF" class="inpRB" align="right"> </td>
<td bgcolor="#FFFFFF" class="inpRB" align="right"> </td>
<td bgcolor="#FFFFFF" class="inpRB" align="right"> </td>
<td bgcolor="#FFFFFF" class="inpRB" align="right"> </td>
<td bgcolor="#FFFFFF" class="inpRB"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="inpLRB trackFormBodyCellLink">
<font size="2">REISKOSTEN</font>
</td>
<td bgcolor="#FFFFFF" class="inpRB">
<font size="2">Reiskosten</font>
</td>
<td bgcolor="#FFFFFF" class="inpRB" align="right">
<font size="2">1,000</font>
</td>
<td bgcolor="#FFFFFF" class="inpRB" align="right">
<font size="2">75,00</font>
</td>
<td bgcolor="#FFFFFF" class="inpRB" align="right">
<font size="2">75,00</font>
</td>
<td bgcolor="#FFFFFF" class="inpRB" align="right">
<font size="2">0,00</font>
</td>
<td bgcolor="#FFFFFF" class="inpRB">
<font size="2">Geen</font>
</td>
</tr>
</tbody>
</table>
<div style="margin: 100px 0;">
<hr />
</div>
<table class="table2">
<tr>
<td>
<table cellspacing="0" cellpadding="0" class="table2 no-wrap">
<tbody>
<tr height="19">
<td width="170"></td>
<td></td>
<td width="80"></td>
<td width="80"></td>
<td width="80"></td>
<td width="80"></td>
<td width="100"></td>
</tr>
<tr>
<td class="trackFormHeaderTitle">Artikel</td>
<td class="trackFormHeaderTitle">Omschrijving</td>
<td class="trackFormHeaderTitle" align="right">Aantal </td>
<td class="trackFormHeaderTitle" align="right">Bruto prijs </td>
<td class="trackFormHeaderTitle" align="right">Netto prijs </td>
<td class="trackFormHeaderTitle" align="right">Kostprijs </td>
<td class="trackFormHeaderTitle"> BTW</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="inpAll trackFormBodyCellLink">
<font size="2">BBA</font>
</td>
<td bgcolor="#FFFFFF" class="inpTRB">
<font size="2">Bezoek Bedrijfsarts</font>
</td>
<td bgcolor="#FFFFFF" class="inpTRB" align="right">
<font size="2">1,000</font>
</td>
<td bgcolor="#FFFFFF" class="inpTRB" align="right">
<font size="2">175,00</font>
</td>
<td bgcolor="#FFFFFF" class="inpTRB" align="right">
<font size="2">175,00</font>
</td>
<td bgcolor="#FFFFFF" class="inpTRB" align="right">
<font size="2">100,00</font>
</td>
<td bgcolor="#FFFFFF" class="inpTRB">
<font size="2">Hoog-tarief</font>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="inpLRB"> </td>
<td bgcolor="#FFFFFF" class="inpRB"> </td>
<td bgcolor="#FFFFFF" class="inpRB" align="right"> </td>
<td bgcolor="#FFFFFF" class="inpRB" align="right"> </td>
<td bgcolor="#FFFFFF" class="inpRB" align="right"> </td>
<td bgcolor="#FFFFFF" class="inpRB" align="right"> </td>
<td bgcolor="#FFFFFF" class="inpRB"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="inpLRB trackFormBodyCellLink">
<font size="2">REISKOSTEN</font>
</td>
<td bgcolor="#FFFFFF" class="inpRB">
<font size="2">Reiskosten</font>
</td>
<td bgcolor="#FFFFFF" class="inpRB" align="right">
<font size="2">1,000</font>
</td>
<td bgcolor="#FFFFFF" class="inpRB" align="right">
<font size="2">75,00</font>
</td>
<td bgcolor="#FFFFFF" class="inpRB" align="right">
<font size="2">75,00</font>
</td>
<td bgcolor="#FFFFFF" class="inpRB" align="right">
<font size="2">0,00</font>
</td>
<td bgcolor="#FFFFFF" class="inpRB">
<font size="2">Geen</font>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
Solution
Don't use :not() because it's quirks make it unreliable and difficult with nested selectors.
Use an additional class to the other <table>s (ex. .wrap) and make it diametrically oppose .no-wrap.
Do not use a class that both types of <table> share (ie .table2).
Other Problems
<font> is HTML4 not HTML5, use a <span> and apply CSS to it.
Attributes cellspacing, cellpadding, bgcolor, and align are deprecated. Use CSS properties border-spacing, padding, background-color, and text-align.
In the example, there are 2 <table>s with .no-wrap (one of them is nested within another <table>) and 2 <table>s with .wrap (one of them is also nested within another <table>).
.table2 {
color: #000000;
width: 100%;
table-layout: fixed;
overflow: hidden;
border-spacing: 10px 5px;
border: 1px solid gray;
}
tbody > tr:first-of-type {height: 19px}
tr, td {outline: 1px dashed red;}
.wrap {outline: 3px dotted cyan}
.no-wrap {outline: 3px dotted lime}
#media only screen and (max-width: 1024px) {
table.wrap,
table.wrap > :is(thead, tbody, tfoot),
table.wrap > :is(thead, tbody, tfoot) > tr,
table.wrap > :is(thead, tbody, tfoot) > tr > :is(th, td) {display: block}
table.wrap > :is(thead, tbody, tfoot) > tr {margin: 20px}
table.wrap > tbody > tr:first-of-type {height:0}
table.wrap > :is(thead, tbody, tfoot) > tr > td {position:relative;margin:5px 0}
table.no-wrap,
table.no-wrap > :is(thead, tbody, tfoot),
table.no-wrap > :is(thead, tbody, tfoot) > tr,
table.no-wrap > :is(thead, tbody, tfoot) > tr > :is(th, td) {display: default;}
table.no-wrap > :is(thead, tbody, tfoot) > tr {margin: 0;}
table.no-wrap > tbody > tr:first-of-type {height: 19px;}
table.no-wrap > :is(thead, tbody, tfoot) > tr > td {position: static;margin: 0;}
}
<div class="track">
<table class="table2 no-wrap">
<tbody> <tr> <td width="170"></td> <td></td> <td width="80"></td> <td width="80"></td> <td width="80"></td> <td width="80"></td> <td width="100"></td> </tr> <tr> <td>Artikel</td> <td>Omschrijving</td> <td align="right">Aantal </td> <td align="right">Bruto prijs </td> <td align="right">Netto prijs </td> <td align="right">Kostprijs </td> <td> BTW</td> </tr> <tr> <td> <span>BBA</span> </td> <td> <span>Bezoek Bedrijfsarts</span> </td> <td align="right"> <span>1,000</span> </td> <td align="right"> <span>175,00</span> </td> <td align="right"> <span>175,00</span> </td> <td align="right"> <span>100,00</span> </td> <td> <span>Hoog-tarief</span> </td> </tr> <tr> <td> </td> <td> </td> <td align="right"> </td> <td align="right"> </td> <td align="right"> </td> <td align="right"> </td> <td> </td> </tr> <tr> <td> <span>REISKOSTEN</span> </td> <td> <span>Reiskosten</span> </td> <td align="right"> <span>1,000</span> </td> <td align="right"> <span>75,00</span> </td> <td align="right"> <span>75,00</span> </td> <td align="right"> <span>0,00</span> </td> <td> <span>Geen</span> </td> </tr> </tbody> </table> <hr />
<table class="table2"> <tr> <td>
<table class="table2 no-wrap"> <tbody> <tr> <td width="170"></td> <td></td> <td width="80"></td> <td width="80"></td> <td width="80"></td> <td width="80"></td> <td width="100"></td> </tr> <tr> <td>Artikel</td> <td>Omschrijving</td> <td align="right">Aantal </td> <td align="right">Bruto prijs </td> <td align="right">Netto prijs </td> <td align="right">Kostprijs </td> <td> BTW</td> </tr> <tr> <td> <span>BBA</span> </td> <td> <span>Bezoek Bedrijfsarts</span> </td> <td align="right"> <span>1,000</span> </td> <td align="right"> <span>175,00</span> </td> <td align="right"> <span>175,00</span> </td> <td align="right"> <span>100,00</span> </td> <td> <span>Hoog-tarief</span> </td> </tr> <tr> <td> </td> <td> </td> <td align="right"> </td> <td align="right"> </td> <td align="right"> </td> <td align="right"> </td> <td> </td> </tr> <tr> <td> <span>REISKOSTEN</span> </td> <td> <span>Reiskosten</span> </td> <td align="right"> <span>1,000</span> </td> <td align="right"> <span>75,00</span> </td> <td align="right"> <span>75,00</span> </td> <td align="right"> <span>0,00</span> </td> <td> <span>Geen</span> </td> </tr> </tbody> </table> </td> </tr> </table> <hr>
<table class="table2 wrap">
<tbody> <tr> <td width="170"></td> <td></td> <td width="80"></td> <td width="80"></td> <td width="80"></td> <td width="80"></td> <td width="100"></td> </tr> <tr> <td>Artikel</td> <td>Omschrijving</td> <td align="right">Aantal </td> <td align="right">Bruto prijs </td> <td align="right">Netto prijs </td> <td align="right">Kostprijs </td> <td> BTW</td> </tr> <tr> <td> <span>BBA</span> </td> <td> <span>Bezoek Bedrijfsarts</span> </td> <td align="right"> <span>1,000</span> </td> <td align="right"> <span>175,00</span> </td> <td align="right"> <span>175,00</span> </td> <td align="right"> <span>100,00</span> </td> <td> <span>Hoog-tarief</span> </td> </tr> <tr> <td> </td> <td> </td> <td align="right"> </td> <td align="right"> </td> <td align="right"> </td> <td align="right"> </td> <td> </td> </tr> <tr> <td> <span>REISKOSTEN</span> </td> <td> <span>Reiskosten</span> </td> <td align="right"> <span>1,000</span> </td> <td align="right"> <span>75,00</span> </td> <td align="right"> <span>75,00</span> </td> <td align="right"> <span>0,00</span> </td> <td> <span>Geen</span> </td> </tr> </tbody> </table>
<table class="table2"> <tr> <td>
<table class="table2 wrap"> <tbody> <tr> <td width="170"></td> <td></td> <td width="80"></td> <td width="80"></td> <td width="80"></td> <td width="80"></td> <td width="100"></td> </tr> <tr> <td>Artikel</td> <td>Omschrijving</td> <td align="right">Aantal </td> <td align="right">Bruto prijs </td> <td align="right">Netto prijs </td> <td align="right">Kostprijs </td> <td> BTW</td> </tr> <tr> <td> <span>BBA</span> </td> <td> <span>Bezoek Bedrijfsarts</span> </td> <td align="right"> <span>1,000</span> </td> <td align="right"> <span>175,00</span> </td> <td align="right"> <span>175,00</span> </td> <td align="right"> <span>100,00</span> </td> <td> <span>Hoog-tarief</span> </td> </tr> <tr> <td> </td> <td> </td> <td align="right"> </td> <td align="right"> </td> <td align="right"> </td> <td align="right"> </td> <td> </td> </tr> <tr> <td> <span>REISKOSTEN</span> </td> <td> <span>Reiskosten</span> </td> <td align="right"> <span>1,000</span> </td> <td align="right"> <span>75,00</span> </td> <td align="right"> <span>75,00</span> </td> <td align="right"> <span>0,00</span> </td> <td> <span>Geen</span> </td> </tr> </tbody> </table> </td> </tr> </table>
</div>
Depending on where you open this HTML, you will see the vertical scroll bar. In Chrome the table doesn't exceeds 180 pixels it has a height. However, in Firefox it expands and exceeds the 180 pixels it has as height. The div with id detailFee has the style of overflow: auto and the height and width are 100%. Is there any solution so the table in Firefox has the same look as Chrome?
Firefox
Chrome
<style>
#detailFee {
background: window;
height: 100%;
width: 100%;
overflow: auto;
border-style: inset;
border-width: 1;
border-color: lightgray;
box-sizing: border-box;
}
</style>
<table
width="800px"
height="180px"
style="background-color: lightblue; border-collapse: collapse"
>
<tbody>
<tr height="100%">
<td>
<div id="detailFee">
<table
style="height: 100%"
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<thead>
<tr height="19px">
<td
style="width: 15px; flex-flow: column nowrap; display: none"
nowrap=""
align="center"
>
+
</td>
<td
style="width: 15px; flex-flow: column"
nowrap=""
align="center"
>
-
</td>
<td width="60%" nowrap="" align="left">Test</td>
<td width="110px" nowrap="" align="right">Test</td>
<td width="85px" nowrap="" align="right">Test</td>
<td width="85px" nowrap="" align="right">Test</td>
</tr>
</thead>
<tbody>
<tr>
<td
style="display: none"
valign="middle"
nowrap=""
align="center"
>
+
</td>
<td
style="display: table-cell"
valign="middle"
nowrap=""
align="center"
>
Test
</td>
<td nowrap="">Test</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td style="display: none" nowrap="" align="center">
+
</td>
<td
style="display: table-cell"
nowrap=""
align="center"
>
Test
</td>
<td width="60%" nowrap="">Test</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td
style="display: none"
valign="top"
nowrap=""
align="center"
>
+
</td>
<td
style=""
valign="top"
nowrap=""
align="center"
>
-
</td>
<td width="60%" valign="top">Test</td>
</tr>
<tr style="display: none">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
height="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td nowrap=""> </td>
<td nowrap=""> </td>
<td nowrap=""> </td>
<td width="30%" nowrap="">Test</td>
<td width="30%" nowrap="">Test</td>
<td
width="110px"
nowrap=""
align="right"
>
Total Assessed
</td>
<td
width="85px"
nowrap=""
align="right"
>
Total Paid
</td>
<td
width="85px"
nowrap=""
align="right"
>
Total Due
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="6" nowrap="">Test</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td style="display: none" nowrap="" align="center">
+
</td>
<td
style="display: table-cell"
nowrap=""
align="center"
>
Test
</td>
<td width="60%" nowrap="">Test</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td
style="display: none"
valign="top"
nowrap=""
align="center"
>
+
</td>
<td
style=""
valign="top"
nowrap=""
align="center"
>
-
</td>
<td width="60%" valign="top">Test</td>
</tr>
<tr style="display: none">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
height="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td nowrap=""> </td>
<td nowrap=""> </td>
<td nowrap=""> </td>
<td width="30%" nowrap="">Test</td>
<td width="30%" nowrap="">Test</td>
<td
width="110px"
nowrap=""
align="right"
>
Total Assessed
</td>
<td
width="85px"
nowrap=""
align="right"
>
Total Paid
</td>
<td
width="85px"
nowrap=""
align="right"
>
Total Due
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="6" nowrap="">Test</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td style="display: none" nowrap="" align="center">
+
</td>
<td
style="display: table-cell"
nowrap=""
align="center"
>
Test
</td>
<td width="60%" nowrap="">Test</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td
style="display: none"
valign="top"
nowrap=""
align="center"
>
+
</td>
<td
style=""
valign="top"
nowrap=""
align="center"
>
-
</td>
<td width="60%" valign="top">Test</td>
</tr>
<tr style="display: none">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
height="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td nowrap=""> </td>
<td nowrap=""> </td>
<td nowrap=""> </td>
<td width="30%" nowrap="">Test</td>
<td width="30%" nowrap="">Test</td>
<td
width="110px"
nowrap=""
align="right"
>
Total Assessed
</td>
<td
width="85px"
nowrap=""
align="right"
>
Total Paid
</td>
<td
width="85px"
nowrap=""
align="right"
>
Total Due
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="6" nowrap="">Test</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td style="display: none" nowrap="" align="center">
+
</td>
<td
style="display: table-cell"
nowrap=""
align="center"
>
Test
</td>
<td width="60%" nowrap="">Test</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="display: none">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td nowrap="" align="center">+</td>
<td style="display: none" nowrap="" align="center">
-
</td>
<td width="60%" nowrap="">Jointly/Severally Fees</td>
<td width="110px" nowrap="" align="right">$0.00</td>
<td width="85px" nowrap="" align="right">$0.00</td>
<td width="85px" nowrap="" align="right">$0.00</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
style="display: none"
valign="middle"
nowrap=""
align="center"
>
+
</td>
<td
style="display: table-cell"
valign="middle"
nowrap=""
align="center"
>
Test
</td>
</tr>
<tr style="display: none">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td nowrap="" align="center">+</td>
<td style="display: none" nowrap="" align="center">
-
</td>
<td width="60%" nowrap="">Jointly/Severally Fees</td>
<td width="110px" nowrap="" align="right">$0.00</td>
<td width="85px" nowrap="" align="right">$0.00</td>
<td width="85px" nowrap="" align="right">$0.00</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
Edit:
Here I have the same result in Chrome, Safari, Opera and Firefox
body{
position :absolute;
}
table{
border-collapse: collapse;
}
#mainContainer{
height:180px;
overflow-y: scroll;
}
#detailFee {
background: window;
height: 100%;
width: 100%;
overflow: auto;
border-style: inset;
border-width: 1;
border-color: lightgray;
box-sizing: border-box;
}
Try to put the main table inside a "mainContainer" div like this...
<div id="mainContainer">
<table
width="800px"
height="180px"
style="background-color: lightblue; border-collapse: collapse"
>
And at the end of your html :
</table>
</div>
</body>
</html>
Have a nice day.
I want to align the header and cell value, but couldn't able to do that.
I am using display block for table body scrolling.
I want table data scrolling with the aligned header.
My table data will be dynamic, so couldn't use fixed length for header and cell.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<table style="width: 100%; padding: 2px;">
<thead style="display: table-row;">
<tr>
<th nowrap="nowrap" align="center">Name</th>
<th nowrap="nowrap" align="center">Adreess</th>
<th align="left" nowrap="nowrap" width="100%">Country</th>
</tr>
</thead>
<tbody style="display: block; width: 100%; max-height: 100px; overflow-y: auto;">
<tr>
<td style="padding: 2px;" align="right">H</td>
<td align="left" nowrap="nowrap">Dhaka</td>
<td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
</tr>
<tr>
<td style="padding: 2px;" align="right">H</td>
<td align="left" nowrap="nowrap">Dhaka</td>
<td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
</tr>
<tr>
<td style="padding: 2px;" align="right">H</td>
<td align="left" nowrap="nowrap">Dhaka</td>
<td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
</tr>
<tr>
<td style="padding: 2px;" align="right">H</td>
<td align="left" nowrap="nowrap">Dhaka</td>
<td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
</tr>
<tr>
<td style="padding: 2px;" align="right">H</td>
<td align="left" nowrap="nowrap">Dhaka</td>
<td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
</tr>
<tr>
<td style="padding: 2px;" align="right">H</td>
<td align="left" nowrap="nowrap">Dhaka</td>
<td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
</tr>
</tbody>
</table>
</body>
</html>
display: block overrides the default rendering of the table so you lose the column alignment. There are certain hacks you can use but they have inconsistent results across browsers. There is no good way to achieve what you want without losing semantics or resorting to javascript to size the columns.
My recommendation is to resort to a position: sticky header.
thead th {
position: sticky;
top: 0;
background: white;
}
<table style="width: 100%; padding: 2px;">
<thead>
<tr>
<th nowrap="nowrap" align="center">Name</th>
<th nowrap="nowrap" align="center">Adreess</th>
<th align="left" nowrap="nowrap" width="100%">Country</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 2px;" align="right">H</td>
<td align="left" nowrap="nowrap">Dhaka</td>
<td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
</tr>
<tr>
<td style="padding: 2px;" align="right">H</td>
<td align="left" nowrap="nowrap">Dhaka</td>
<td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
</tr>
<tr>
<td style="padding: 2px;" align="right">H</td>
<td align="left" nowrap="nowrap">Dhaka</td>
<td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
</tr>
<tr>
<td style="padding: 2px;" align="right">H</td>
<td align="left" nowrap="nowrap">Dhaka</td>
<td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
</tr>
<tr>
<td style="padding: 2px;" align="right">H</td>
<td align="left" nowrap="nowrap">Dhaka</td>
<td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
</tr>
<tr>
<td style="padding: 2px;" align="right">H</td>
<td align="left" nowrap="nowrap">Dhaka</td>
<td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
</tr>
<tr>
<td style="padding: 2px;" align="right">H</td>
<td align="left" nowrap="nowrap">Dhaka</td>
<td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
</tr>
<tr>
<td style="padding: 2px;" align="right">H</td>
<td align="left" nowrap="nowrap">Dhaka</td>
<td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
</tr>
<tr>
<td style="padding: 2px;" align="right">H</td>
<td align="left" nowrap="nowrap">Dhaka</td>
<td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
</tr>
<tr>
<td style="padding: 2px;" align="right">H</td>
<td align="left" nowrap="nowrap">Dhaka</td>
<td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
</tr>
<tr>
<td style="padding: 2px;" align="right">H</td>
<td align="left" nowrap="nowrap">Dhaka</td>
<td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
</tr>
<tr>
<td style="padding: 2px;" align="right">H</td>
<td align="left" nowrap="nowrap">Dhaka</td>
<td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
</tr>
<tr>
<td style="padding: 2px;" align="right">H</td>
<td align="left" nowrap="nowrap">Dhaka</td>
<td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
</tr>
<tr>
<td style="padding: 2px;" align="right">H</td>
<td align="left" nowrap="nowrap">Dhaka</td>
<td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
</tr>
<tr>
<td style="padding: 2px;" align="right">H</td>
<td align="left" nowrap="nowrap">Dhaka</td>
<td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
</tr>
<tr>
<td style="padding: 2px;" align="right">H</td>
<td align="left" nowrap="nowrap">Dhaka</td>
<td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
</tr>
<tr>
<td style="padding: 2px;" align="right">H</td>
<td align="left" nowrap="nowrap">Dhaka</td>
<td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
</tr>
<tr>
<td style="padding: 2px;" align="right">H</td>
<td align="left" nowrap="nowrap">Dhaka</td>
<td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
</tr>
<tr>
<td style="padding: 2px;" align="right">H</td>
<td align="left" nowrap="nowrap">Dhaka</td>
<td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
</tr>
<tr>
<td style="padding: 2px;" align="right">H</td>
<td align="left" nowrap="nowrap">Dhaka</td>
<td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
</tr>
<tr>
<td style="padding: 2px;" align="right">H</td>
<td align="left" nowrap="nowrap">Dhaka</td>
<td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
</tr>
<tr>
<td style="padding: 2px;" align="right">H</td>
<td align="left" nowrap="nowrap">Dhaka</td>
<td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
</tr>
<tr>
<td style="padding: 2px;" align="right">H</td>
<td align="left" nowrap="nowrap">Dhaka</td>
<td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
</tr>
<tr>
<td style="padding: 2px;" align="right">H</td>
<td align="left" nowrap="nowrap">Dhaka</td>
<td align="left" nowrap="nowrap">Bangladesh-South Asia</td>
</tr>
</tbody>
</table>
I have a simple HTML / CSS file.
<style type="text/css">
table {
font-family: "Arial Unicode MS";
border-collapse: collapse;
width: 100%;
}
thead tr td {
font-family: "Arial Unicode MS";
font-weight: 700;
font-size: 12pt;
background-color: gray;
}
td {
font-family: "Arial Unicode MS";
border-bottom: 1px black solid;
border-top: 1px black solid;
border-left: 2px black solid;
border-right: 2px black solid;
}
h1 {
font-family: "Arial Unicode MS";
text-align: center;
}
.columnStudyPoint {
}
.columnDate {
text-align: center;
/*width: 10%;*/
}
.textStudyPoint {
font-weight:700;
}
.textStudyDescription {
}
#media print {
thead {
display: table-header-group;
}
table tbody tr td:before,
table tbody tr td:after {
content : "" ;
height : 4px ;
display : block ;
}
}
</style>
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="CounselForm.css" rel="stylesheet" type="text/css" />
<title>Student Counsel Forms</title>
</head>
<body>
<h1>Counsel Form for Happy Face</h1>
<table align="center" cellpadding="2" cellspacing="0">
<colgroup>
<col width="100%" /><col /><col />
</colgroup>
<thead>
<tr>
<td class="columnStudyPoint">Study Point</td>
<td class="columnDate">Date Assigned</td>
<td class="columnDate">Date Completed</td>
</tr>
</thead>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">1</span> <span class="textStudyDescription">Accurate
Reading</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">2</span> <span class="textStudyDescription">Words
Clearly Spoken</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">3</span> <span class="textStudyDescription">Correct
Pronunciation</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">4</span> <span class="textStudyDescription">Fluent
Delivery</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">5</span> <span class="textStudyDescription">Appropriate
Pausing</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">6</span> <span class="textStudyDescription">Proper
Sense Stress</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">7</span> <span class="textStudyDescription">Principal
Ideas Emphasized</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">8</span> <span class="textStudyDescription">Suitable
Volume</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">9</span> <span class="textStudyDescription">Modulation</span>
</td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">10</span> <span class="textStudyDescription">Enthusiasm</span>
</td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">11</span> <span class="textStudyDescription">Warmth
And Feeling</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">12</span> <span class="textStudyDescription">Gestures
and Facial Expressions</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">13</span> <span class="textStudyDescription">Visual
Contact</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">14</span> <span class="textStudyDescription">Naturalness</span>
</td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">15</span> <span class="textStudyDescription">Good
Personal Appearance</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">16</span> <span class="textStudyDescription">Poise</span>
</td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">17</span> <span class="textStudyDescription">Use
of Microphone</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">18</span> <span class="textStudyDescription">Use
of Bible in Replying</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">19</span> <span class="textStudyDescription">Use
of Bible Encouraged</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">20</span> <span class="textStudyDescription">Scriptures
Effectively Introduced</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">21</span> <span class="textStudyDescription">Scriptures
Read With Proper Emphasis</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">22</span> <span class="textStudyDescription">Scriptures
Correctly Applied</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">23</span> <span class="textStudyDescription">Practical
Value Made Clear</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">24</span> <span class="textStudyDescription">Choice
of Words</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">25</span> <span class="textStudyDescription">Use
of an Outline</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">26</span> <span class="textStudyDescription">Logical
Development of Material</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">27</span> <span class="textStudyDescription">Extemporaneous
Delivery</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">28</span> <span class="textStudyDescription">Conversational
Manner</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">29</span> <span class="textStudyDescription">Voice
Quality</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">30</span> <span class="textStudyDescription">Interest
Shown in the Other Person</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">31</span> <span class="textStudyDescription">Respect
Shown to Others</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">32</span> <span class="textStudyDescription">Expressed
With Conviction</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">33</span> <span class="textStudyDescription">Tactful
Yet Firm</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">34</span> <span class="textStudyDescription">Upbuilding
And Positive</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">35</span> <span class="textStudyDescription">Repetition
for Emphasis</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">36</span> <span class="textStudyDescription">Theme
Developed</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">37</span> <span class="textStudyDescription">Main
Points Made to Stand Out</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">38</span> <span class="textStudyDescription">Interest
- Arousing Introduction</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">39</span> <span class="textStudyDescription">Effective
Conclusion</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">40</span> <span class="textStudyDescription">Accuracy
of Statement</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">41</span> <span class="textStudyDescription">Understandable
to Others</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">42</span> <span class="textStudyDescription">Informative
to Your Audience</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">43</span> <span class="textStudyDescription">Use
of Assigned Material</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">44</span> <span class="textStudyDescription">Effective
Use of Questions</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">45</span> <span class="textStudyDescription">Illustrations
/ Examples That Teach</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">46</span> <span class="textStudyDescription">Illustrations
From Familiar Situations</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">47</span> <span class="textStudyDescription">Effective
Use of Visual Aids</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">48</span> <span class="textStudyDescription">Reasoning
Manner</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">49</span> <span class="textStudyDescription">Sound
Arguments Given</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">50</span> <span class="textStudyDescription">Effort
To Reach the Heart</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">51</span> <span class="textStudyDescription">Accurately
Timed, Properly Proportioned</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
</table>
</body>
</html>
My CSS file sets font sizes and line thicknesses. These are what I am interested in.
The results look fine on my computer running a high resolution (but not UltraHD etc.). I don't have a UltraHD monitor in order to test this out to see if it will work correctly.
Ultimately this webpage will be shown in a CHtmlView browser control so it does not need to be compatible with all mobile devices.
Thank you.
Update
Here you see it in context in my application:
I note the comments state that I should not be specifying font heights myself. I saw this:
https://websemantics.uk/articles/font-size-conversion/
It refers to 1em for 12pt.
Update
Someone has just tried my CHtmlView application on a Ultra HD computer. The preview is fine. But the printing to PDF or a Printer looks like this:
It is cropped.
If I get them to open the same file directly in Internet Explorer and print it it prints correctly to the printer and PDF.
So why is CHtmlView playing up?
I have a table which is like
You can see the border below Operation Research, under the course column. I want that border to be removed, but the code I've written is not working, what exactly should I do?
<html>
<body>
<table width="100%" border="1" rules="cols" style="border-collapse : collapse;">
<tr>
<td align="center" width="54%" style="border : solid thin;">Courses</td>
<td align="center" width="23%" style="border : solid thin;">CGPA</td>
<td align="center" width="23%" style="border : solid thin;">Credit</td>
</tr>
<tr>
<td>English Language Course</td>
<td align="center">8.1</td>
<td align="center">19</td>
</tr>
<tr>
<td>Additional Language Course<br> French</td>
<td align="center">8.1</td>
<td align="center">19</td>
</tr>
<tr>
<td>Foundation Course</td>
<td align="center">8.1</td>
<td align="center">19</td>
</tr>
<tr>
<td>Core Course<br>Physics<br> Physics</td>
<td align="center">8.1</td>
<td align="center">19</td>
</tr>
<tr>
<td>Complementary Course(s) <br> Mathematics <br> Chemsitry </td>
<td align="center">8.1</td>
<td align="center">19</td>
</tr>
<tr>
<td style="border-bottom : none;">Open Course <br> Operations Research</td>
<td align="center" style="border-bottom : solid thin;">8.1</td>
<td align="center" style="border-bottom : solid thin;">19</td>
</tr>
<tr height="35px">
<td></td>
<td align="center" colspan="2">Semester wise SCPA</td>
</tr>
</table>
<table width="100%">
<tr>
</tr>
</table>
</body>
</html>
Since it is border of table you have to remove that.
Use following code
<html>
<body>
<table width="100%" border="1" rules="cols" style="border : none;">
<tr>
<td align="center" width="54%" style="border : solid thin;">Courses</td>
<td align="center" width="23%" style="border : solid thin;">CGPA</td>
<td align="center" width="23%" style="border : solid thin;">Credit</td>
</tr>
<tr>
<td>English Language Course</td>
<td align="center">8.1</td>
<td align="center">19</td>
</tr>
<tr>
<td>Additional Language Course<br> French</td>
<td align="center">8.1</td>
<td align="center">19</td>
</tr>
<tr>
<td>Foundation Course</td>
<td align="center">8.1</td>
<td align="center">19</td>
</tr>
<tr>
<td>Core Course<br>Physics<br> Physics</td>
<td align="center">8.1</td>
<td align="center">19</td>
</tr>
<tr>
<td>Complementary Course(s) <br> Mathematics <br> Chemsitry </td>
<td align="center">8.1</td>
<td align="center">19</td>
</tr>
<tr>
<td style="border-bottom : none;">Open Course <br> Operations Research</td>
<td align="center" style="border-bottom : solid thin;">8.1</td>
<td align="center" style="border-bottom : solid thin;">19</td>
</tr>
<tr height="35px">
<td></td>
<td align="center" colspan="2" style="border : solid thin;">Semester wise SCPA</td>
</tr>
</table>
<table width="100%">
<tr>
</tr>
</table>
</body>
</html>
If you mean the border-bottom of main table then just set it's border-bottom:none; as below,
<table width="100%" border="1" rules="cols" style="border-collapse : collapse;border-bottom:none">
<tr>
<td align="center" width="54%" style="border : solid thin;">Courses</td>
<td align="center" width="23%" style="border : solid thin;">CGPA</td>
<td align="center" width="23%" style="border : solid thin;">Credit</td>
</tr>
<tr>
<td>English Language Course</td>
<td align="center">8.1</td>
<td align="center">19</td>
</tr>
<tr>
<td>Additional Language Course<br> French</td>
<td align="center">8.1</td>
<td align="center">19</td>
</tr>
<tr>
<td>Foundation Course</td>
<td align="center">8.1</td>
<td align="center">19</td>
</tr>
<tr>
<td>Core Course<br>Physics<br> Physics</td>
<td align="center">8.1</td>
<td align="center">19</td>
</tr>
<tr>
<td>Complementary Course(s) <br> Mathematics <br> Chemsitry </td>
<td align="center">8.1</td>
<td align="center">19</td>
</tr>
<tr>
<td style="border-bottom : none;">Open Course <br> Operations Research</td>
<td align="center" style="border-bottom : solid thin;">8.1</td>
<td align="center" style="border-bottom : solid thin;">19</td>
</tr>
<tr height="35px">
<td></td>
<td align="center" colspan="2" style="border-bottom:solid thin">Semester wise SCPA</td>
</tr>
</table>
<table width="100%">
<tr>
</tr>
</table>