Set Numbering <li> to top - html

Currently I have this output for my <li>
How can I move number 3 to top?
My expected output:
I have tried with these codes, but not success. Anyone can help me solve this problem?
<ol>
<li>Namakan kenderaan malaysia
<br>
<br>
<table width="80%" border="0">
<tbody>
<tr>
<td width="10%"><b>i)</b>
</td>
<td width="90%" style="border-bottom: 1px solid #000000;"> </td>
</tr>
<tr>
<td width="10%"><b>ii)</b>
</td>
<td width="90%" style="border-bottom: 1px solid #000000;"> </td>
</tr>
<tr>
<td width="10%"><b>iii)</b>
</td>
<td width="90%" style="border-bottom: 1px solid #000000;"> </td>
</tr>
<tr>
<td width="10%"><b>iv)</b>
</td>
<td width="90%" style="border-bottom: 1px solid #000000;"> </td>
</tr>
</tbody>
</table>
<br>
</li>
<li>Suatu hari ahmad <span style="text-decoration: underline"> a </span> pokok besar di tepi jalan. Ahmad berlari kerana <span style="text-decoration: underline"> b </span> Ahmad
telah diselamatkan oleh bapanya. Ahmad berasa <span style="text-decoration: underline"> c </span>
<br>
<br>
<table width="80%" border="0">
<tbody>
<tr>
<td width="10%"><b>a)</b>
</td>
<td width="90%" style="border-bottom: 1px solid #000000;"> </td>
</tr>
<tr>
<td width="10%"><b>b)</b>
</td>
<td width="90%" style="border-bottom: 1px solid #000000;"> </td>
</tr>
<tr>
<td width="10%"><b>c)</b>
</td>
<td width="90%" style="border-bottom: 1px solid #000000;"> </td>
</tr>
</tbody>
</table>
<br>
</li>
<li>
<div style="
display: inline-grid;
">
<img class="img-responsive" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBw8PDw8NDRAODw0NDQ0NDQ0NDQ8NDg0OFREWFhURFRUYHSggGBolGxUVITEhJSkrLi4uFx8zODMsNygtLisBCgoKDg0OFRAQFy0dHR0tLS0rKy0tLS0tKysrKy0tLS0tLS0tLSstKy0tKy8tLS0tLSsrLS0rLi0rLS0tLS0rK//AABEIALEBHAMBEQACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAABAwACBAUGB//EADYQAAICAQMBBgUCBQMFAAAAAAABAgMRBBIhMQUTQVFhcQYigZGhFDIjQnKxwTNS8Ac1c9Hh/8QAGgEAAwEBAQEAAAAAAAAAAAAAAAECAwQFBv/EAC4RAQEAAgEEAAQDCAMAAAAAAAABAhEDBBIhMRNBUWEFInEUMlKBkaGx8MHR4f/aAAwDAQACEQMRAD8A4qR9a+PHAEIgOACyQgKQEskILJCC+AIcCApASCMQJMAEwAFIRmwRNDXSZZHG2uRjY1laITM7FynwmZ2NJWmuRlY1laq2ZVrD4EVpDESqLZEpMgNqykMtlSkVIm0icjSRnaRKRcidlykVIW1HIehtRsei2q2B7TIG8Ij3nliILJAFkhEKQBZIRLJCCyQAUhEskICATAGmAJAA4ALRRNpnwiRaD4EUzozIsVKZGZFipWiqwjKLlbaZmGUb41sqkY2NZT4yIsaSmKROl7HcLR7ByDQ2rKRWitJnIqRFpE5GkiLSZSKkTsuUitFstyK0NhkNDYNhow3Bo9vFYPbeaKQEskILJABSES6QgKQiWSACAFIQEQQAgBAApADIk0GxIpr7haAqQaG14zJsM+uZFi5W2iwwyjbGttdhjY2laIWGVjSU1TJ0uUdwtHtHMehtSUx6LZM5FyJtInMuRFpUpFaTtRyK0NqOQ9FtVyHobTIaPYbgPbyCR7DzxSEFkgCyQiWSEBSESwAUAEQEQEAgBMABwAFIQXQgsmIDkWgKYBZMRn1szyVGuqRllGuLVXMysaytEJmVi5TozIsaSrbxaVsHMehtVzHpOypzLkTazWWGkxZ2lOwrRbDcGhsMj0NpkBtMi0pBm8okeq4RSES6QiFIAskICAFIRLJABEaAQ4ACkBxAAgQoVAiCCCAFkBnU1uTUYpylJ4UYptt+SSIysk3Txlt1PNdvs74f1Fk9rrlUlzKdsXFJenm/RHFzdZxYY7l3+jt4eh5s8tduvvXp6PhjTxSUt85eMnLb9kjy8uv5bdzUevj+G8Umru1XtH4eU7E6tlVaglLhtuWX0j7Y8SuLre3H827U83Qd2e8NYwYfDcEubJt+aUYr7ck3rsv4Tn4djrzlWfUdiSil3Uu8ecSWFDHrls0w6rG77ppln0WWOu27/sU+yL8dIe2/kr9p40/snL9v6sOohKuThNYkvDh8efB0Y2ZTcc2cywuspqkSmXpnsmcy5E2s05GkjO1RSK0na2SVbTIGGRhZMSomRG8wkeo4lkhEskAFIQECFIQWACIDgAIBAJAMQCABJIQMRBEAd74Y7BWrlLvJShCCi8KLzZl84b4X/wBODrOrvBJ2zdv9nf0XR/tFvddSf3e9q7Ppo2qmuEMLGVFbn7y6s8LLm5OTdzytfQ4cHHxamGMjTs4zH7GW2ww/KEEseF6hAWo+bK2Wlq+fRL8ipwX6ATz3xNpLJSjOuuc1txKUfmxjwwunXqeh0fJjJZldPM67iyuUyxx281OeOH1XgelI8q0mcy5CtJnIuRnapuHoGRZNiosIwA0A4OQN5xI9FxLIQWAIBCkILIAOBAQIQCCAgEA0ACAQRCgNp0GinfZGqtZlLx8Ix8ZP0Rly8uPFhcsmnFxZcucwx917vsz4e0+nWXHvrM57yyPC/pj0R4PP1vLy+Je2fSPoen/D+Li82d1+tdrS2Ylz0/scWUd+J+pfK8sE4qpcbcBYNm0vOX7Cois3lhDVxkey0dCOFgRptDYUm8eQ4VYO0+zKtRF70lPHy2pYnF/5Xozfh58+K+PX0c3P02HLPM8/V8/1MJVylXNYlBuMk/M9/CzKTKeq+bzxuNuOXuM0pmsiNqqQwbBkVUNIWgGAzgiN59I9FxLCAgQpCAgFkhAQJMCAgEAIAEQQAgBAAgH0j4K0MYaNTSXeXuUpSxzhNqK9sL8nzn4jy3Ln18sX034ZxTHgmXzy/wBjoSt8PLwOTTu2MZoVM5zTjh9V0ZHpTLbZt6iyy1DkSPaMI7YN4c5YT8M+RnnyzGzbTHiyyl18nRjA0ZilgAsnwIKyk+PUcKh3Y9jQNLPPh4JZAnzf4j1Ks1Nk1CdeWlKNnEspYzjw4S4Po+kwuPFjLZf0fMdZnM+bLKSz9XKydTl2tFCpw+CIq4aQsGAAZpkR7cNI9BxpgRLJABwILYAkwICAQAIEgGmBAQCAEACAdnsPs2E/4lz4ylXDGdzz1focHV9Rlj+XD+del0PSY5/n5PXyn1e00eosjiKU+Fwtsuh4meMvl7+Ns8OlClSW6cUn5qX/AKMLdeJWuti9LDza/It09Qn9K3lKT5TSaj0/IrNw5fLzdlGsokoWbZ1ytXzqUcKp/uaUurSy2n9MnFlLhO3f/r0LeLk8yORDVWafVqq9qStjaobbVKvCm1vxjrtaeOfHyyPOS8dyw86/5a4Yd0njT6FoMd1Bxk5RcU1J9Xk6OO7xledyyzKyzR2DRkrLgYCmD5cvovQMrBIbkk1Or4GTi/FPYq1FTlBfx603W11mvGH18PU7ei6n4Wer+7ff/bg6/pZzYbxn5p6/6fOkv+Phn0L5s+uBFq4fGJna0kHAGqwJRsZ7V3D0HJSOxyrJASyQgOACYAkwATAEOBGmA2WhwBoIkAIATABZR8uoth9C7E7P7jZB82bUpN44eMtL2PnOo5viW2en1nTcV48ccb7d21rhZOOOunV2Lb7ImzyralW19evr0HdwvZssLoSbm9uaadlDVWO9jlwzLY08NcPwZly8ffJI34M8cct5enzTX1X1Qr/VU2QdKgu8wnFPavm3R49Gg+FZll2+q9OdRx63L5fQPhTVOWmi5J7V+3PXb1z+RcEsxsvyrzepsvJbPm7Xeo2c4ppgFnNBoAxhE8dAAOeUGifOfiqiMNZZt43xhZJdMTa5++M/U+i6HK5cGO/l4fM9fhMeoyk+fn+d/wB2w1m9c+JqIaIwCkhxNImy5CLyVobYEdLmWQiWQgIggwgiTABACABAIATAbA4FsCkAMriRldTyvDG5ZTGe69t2b21OUczrirOP4sOMv+k8Dl4JL4vj6PrOPO2eff1daGocsOSWfQ5rjr03nlu00dyz4dPcyyVEshtYbI2iPi/oKqjN2jY0nt8A+Qnt857Z7S1Vlr0lFcpyt+TCjug03hpv+VYy8+hnx491u7r7Oi2SPcaCtUQr08mnYq05+Tk+ppjJj4c+VuXltr0/80H7xbyvoZ/Dky3D7tzydFtdTRI9RgdwaCsn5DhUYdMNe4B8z7a07q1NtblKW2S2ynJyk4tJxTb5eE0vofS9NnM+LHLWnynU4XDmzx3vX1JrZdZw5MjTSVMiPakmVE0iZcJTA9hhwdLnWSES2CQmAJAAgEAIAQAKQgOACABwAFIRtGmxlZMebdxunV0eWOPLLk9J2dDmKPH5L7fR4u7nBy1vHU7PtTgo5WVngwzl2uVbUzz8q92/IMYKS7tqzkeijnz7VW75oOUW8cR59+vQNaVoLtQlJd3BRbjJppJN4Xiy5JEea812fHUwtlbObslZJu3fypPjD9MJY4Mfzb3W3jWnrNDrpcKSX0yXraPTdPUxSy8+yWRdtLaleqjLp9schotmKafRAa20ArJ46BCfOfimxvWXZWNvdxXtsi8/k+j6LHXBj99/5fMdflvqM/tr/Ec+EjoscspqmRpWx3C0rYNjCgxAwCmLuzo7nKsoi2SYEEwMgwAHABMAEwATAAQCAEACAEQNrZGU2rG6u47Gl1Mnjwa6YPL5eOY2x9L0/LeTCZWe3Wq1U5cvDx5o5LjI65T3rJLpx7Lkz7YuVNPZOU8uUvN5b5FoN+3JFOCqUIzY1J7F4qNuP+fcQZZabDYxs2uGABmOvoFQjgn6PzQGNdzXyy+/RoO0bZO0O09Vp0pKpamnlylH+HZBeGUs590jo4eDh5fFy7L/AFlcnPz8/D5mPfj/AEs/ztgr+NaZf6lFseOHCcZZfl4HRfwvknrKOWfjHHfeFeO1eolbZO2bzKyTk/8AC+iwvoexx4TDGYz1HiZ8lzyuWXuqKRWk7WUydK2t3gaPYOwNHsO8DRyp3gtK2jRUYVXA0o0AVaGAGSAEwATAEgGgEIBACCNABkGTQ26W3B5/Pj+Z9D0WfdxYu5o5pxOLOO6HrHVmel7Wq1CjJPw6P2FYbrUS3ftw/ZmWU17OVaU0s56+SFo1aL2pJvz48kvILPBtsqoz/a1n/a+qI3r2NEuiSfKfv4FbhaqXx+TK/wByTCex8ldPHd9OoW6E8qa54kvVf2Hh6LJfTS3cZwwymhHlPjbsuFMq7q0o965RsiuE5pZ3JeGfE9f8N6jLOXDL5ev0eF+KdPjx5TPHx3e/1eYPTeUgwmRGm4NBVyHo1dw9GG8NG1GaKmBkAEGA2E2hsh2hsJtDYBoewrgCTAAQNAJMAaYALIQPq8DLPGX224ubPD926dDSyxnDaz15PO5pJX0PS55Zccyy910Kcvls58nTDdpC165YYtBtollfciwbNyTo9qXzzj0HIQ0tv5W3h8dfEKG/ST3RdUv3Z+V+ePAzymrs558LU/LLD4zx9QvmHPFYdbrKndHTuW23CcG/2vP8vo+PybYcOfw/ia3HPlz8fxfhW6pn6K2OW2opcuUmkkvPJPfjfDS42eb4eM+I+1HqLFFSUq6cxhJdJvxn+D3Oj6f4WG7PN9/b7PnOu6r4+fj1PX3+7k4OtxpgAqxhVjCrAwGaozdKNZz2lozuSe4+1R1D7k9qriPZaDAyTAAGgJVoolcDCAEAJgQTAAUgCyQgbWTVxsoWHnwyvocPNj83tdFzyycd9xvrsw1FdTluO3o90ntpjMzsabDcLQ2ZRc4+qfVCsDV+oTXTkntG0k+RaNoo8yaZs3zlcPr9Qk8ElvaSS/iqLius8Pcl9OrHjxW3WKc+WYy5Zeo8j8Qaqu63fVGUUkk3J5lJ+foez0nFlx4ayu3zvW8+PNyd2M059+pts/1LLJp4ypTbTx046HRjhhj+7JHNnyZ5/vZWkqBe0LKAtmjrDuGi5QKlGimitkrtHs02hs4ndhtTsVQOTKqkaNhnteipwLlRYzzgXKzsKaLRVRkjAKtDIMDAYACAQAmBBZIAZGBNq5D66jO5LmLZRWzHKyt8JZdxtppwnhYbT58TnunZM8srLldqb+Hnqk/oY3F6kylVrk2t3hlperQrDmXnS8bBaVtbvhdo20R1KfV8i7Bs6rUpeJNwFzkm6fZqU+fRfhYF2WeC+JMpuORr9WprbB5WeWvNeB2dPx6/NXm9bzbnZP5uVKrJ3TJ5faH6cO8uwHp2HeOwHVgfcO1VxHsaKnEqVOiZRLlLQbB7Gl4Vk3JchyqI7l6bq4GNpyHpGe1aVlAcpWFSqLmSLiROkuZIuJTqL7kXEO7HstBsDY0q4j2WlXEeyDAyTAgsohs9G115ItXMWymkxyybY4NlWnMcs2+PG1V0GVzbTBqhWZXJtMQv0kZp54bWNy4Ypk1xyuPoO4goqGPlXTz9w9l32XbLbpY+Da+xch/tFnyZ3TzzLPpjBcwRn1d14hbqfg/uP4ZY9Z9YdTW/P7C7ZBl1NympFO1KZSosUc7tkmsea5HNW6+rLG5TX2cX4W1HexnHq8RsXpnhr7r8kcF7cbL8q16vj3ccp83ejpTW8jlnGatIT8RfwlZ6Uc5CvGx3UYNcc2OWDJOBtKxsJlEvadFygVKWlVEewbBEVcMyStuiY0zESocAAaAtFSiVKiwmcS5WdijiVtKrQ4RckVCpbRUqdK4GSJAF4Im1Ua6IGWVbYx0tPUc2eTqwxbYQMLXRMTESsd6DQ7opO4cxK5s9moNJgxy5GWzUG0wY5cisXkd8FLtpqpyZZZtccGyrTmOWbpx4z1QZ97WcT53pIvQ9qypeVVObx5d3Zyn9H/Y2t3d/xT+/+/5XMe7Ht+j6IqTHuR2Ld2LuPsLsrKmScsXP1MDowrl5I51kDplcthTrK2WiZxLlTYS0UgMj0aneD7T23RvMbiXcZG4XYrvX70ntPuTvQ7R3FysKmKLkW5laTaq2PRbBjIGgLSrgPZaLcStloMAF4ipxs0zMc22FdXTs5M3bhWncZabbKstwXMWeWemeWoNJgyvITO4uYIuZMptmkmmdtqV1titOY7bqKTDLJ0YYOhTA58q68MWmCMq3kNRLR4r/AKiaXY9PrUs7JOi3HXbJfK/vn7m2H5sLPnPJY3tzl+r0XYOt7/TVW/zOCjL+pcMnOeRlNXTdKQtIuRNky5GWWTn6mZ0YRy51z7JHRI57SpTRUiNkTmXIm0mTLiSrGVIROSy2fGROmaykxaPZkZMmw9r5J0aDAqItlpeNYrVSGKknuV2rqgXefYjoF3jsKlQXM03AqVJUyRcVHWVtOjqTPJpi6enkc2cdeFPczPTW5MtszXGMMqzyZrGW1QBsIE2rxjTXAytbYxprMq2xaoSM7G2NNUyNNJkt3gtK7nP+INKtRpb6fGVb2/1rmP5RpxeMoWWXh5T/AKddpPbZp5eHzxXk+kkVlh7l+S+W+Jk9fZcEwcmXIz2XmkwZXkYdRcb4YsM83PttOiYue5EytL7U9yjsHotg5j0NlTkVINkuZeg3RiYbHasoBsdpkIE2nIcoEWq7RUBbHaZGsVyVMToVkXJcwOjWRclzAxQJ2rtRwDY7S5VlSpuJUqipki4FTqLmSLgrGsLkJi018GdbYwyUiZFVnskaYxlkTktmMWI40QZFaw5SI00lXjYTcVSnwsM7GkpneE6X3J3gdp9w96HaO58507/SdqWQXEHbuj/RZz/k3zn5pf4o3x/Pxa+n/D2ltpUxeblWedhcjO1luka4xnkyTNoypUiiUbK0SrY9GXOQ5BpmlZyaaVp3InFVmIQXiIGRJql4kqhsCacOgZ1pDkQtYADAlWUSsgBMy4iqFFDIkqgMARYXiyyKLQshU4fAzrXEwShiKqjRWZ1pDCTVYBVjKvAfFH/cof8Ajq/ubZfu4fzdnS+snr5f4RUeZfZci4hmtNIis8y4zpUiyLZZKgCbSopkl1NYuP/Z"
style="max-height:400px;/* display: inline-table; */">
</div>
<br>ssasa
<br>
<table width="80%" border="0">
<tbody>
<tr>
<td width="10%"><b>i)</b>
</td>
<td width="90%" style="border-bottom: 1px solid #000000;"> </td>
</tr>
<tr>
<td width="10%"><b>ii)</b>
</td>
<td width="90%" style="border-bottom: 1px solid #000000;"> </td>
</tr>
<tr>
<td width="10%"><b>iii)</b>
</td>
<td width="90%" style="border-bottom: 1px solid #000000;"> </td>
</tr>
<tr>
<td width="10%"><b>iv)</b>
</td>
<td width="90%" style="border-bottom: 1px solid #000000;"> </td>
</tr>
<tr>
<td width="10%"><b>v)</b>
</td>
<td width="90%" style="border-bottom: 1px solid #000000;"> </td>
</tr>
</tbody>
</table>
<br>
</li>
<li>
Apakah kesan jika pagar besi dicat?
<br>
<table style="width: 100%">
<tbody>
<tr>
<td width="5%" valign="top">
<b>A)</b>
</td>
<td width="45%" valign="top">
<p>Pagar itu akan berkilat</p>
</td>
<td width="5%" valign="top">
<b>C)</b>
</td>
<td width="45%" valign="top">
<p>Pagar itu tidak akan menyerap haba</p>
</td>
</tr>
<tr>
<td width="5%" valign="top">
<b>B)</b>
</td>
<td width="45%" valign="top">
<p>Pagar itu akan tahan lebih lama</p>
</td>
<td width="5%" valign="top">
<b>D)</b>
</td>
<td width="45%">
<p>Pagar itu tidak akan menyerap air</p>
</td>
</tr>
</tbody>
</table>
<br>
</li>
<li>
Pilih objek-objek yang boleh diletakkan dalam tong kitar semula berwarna jingga.
<br>
<table style="width: 100%">
<tbody>
<tr>
<td width="5%" valign="top">
<b>A)</b>
</td>
<td width="45%" valign="top">
<p>Cermin tingkap, bateri, pakaian</p>
</td>
<td width="5%" valign="top">
<b>C)</b>
</td>
<td width="45%" valign="top">
<p>Gelas minuman, telefon mudah-alih, tin susu</p>
</td>
</tr>
<tr>
<td width="5%" valign="top">
<b>B)</b>
</td>
<td width="45%" valign="top">
<p>Botol air mineral, tin minuman, baju hujan</p>
</td>
<td width="5%" valign="top">
<b>D)</b>
</td>
<td width="45%">
<p>Periuk tanah liat, spring, suratkhabar</p>
</td>
</tr>
</tbody>
</table>
<br>
</li>
<li>
Manakah objek <strong><em>tidak</em></strong> boleh menyukat jisim?
<br>
<table style="width: 100%">
<tbody>
<tr>
<td width="5%" valign="top">
<b>A)</b>
</td>
<td width="45%" valign="top">
<p>Neraca mampatan</p>
</td>
<td width="5%" valign="top">
<b>C)</b>
</td>
<td width="45%" valign="top">
<p>Neraca tuas</p>
</td>
</tr>
<tr>
<td width="5%" valign="top">
<b>B)</b>
</td>
<td width="45%" valign="top">
<p>Neraca elektronik</p>
</td>
<td width="5%" valign="top">
<b>D)</b>
</td>
<td width="45%">
<p>Jam matahari</p>
</td>
</tr>
</tbody>
</table>
<br>
</li>
<li>
Julia mempunyai 10 m reben. Dia menggunakan 1.5 m daripada reben itu untuk membuat sekuntum bunga.
<br>Berapakah kuntum bunga yang telah dibuatnya jika baki reben itu ialah 1 m?
<br>
<table style="width: 100%">
<tbody>
<tr>
<td width="5%" valign="top">
<b>A)</b>
</td>
<td width="45%" valign="top">
<p>4</p>
</td>
<td width="5%" valign="top">
<b>C)</b>
</td>
<td width="45%" valign="top">
<p>6</p>
</td>
</tr>
<tr>
<td width="5%" valign="top">
<b>B)</b>
</td>
<td width="45%" valign="top">
<p>5</p>
</td>
<td width="5%" valign="top">
<b>D)</b>
</td>
<td width="45%">
<p>7</p>
</td>
</tr>
</tbody>
</table>
<br>
</li>
<li>
Manakah antara berikut sesuai untuk mengukur panjang papan putih?
<br>
<table style="width: 100%">
<tbody>
<tr>
<td width="5%" valign="top">
<b>A)</b>
</td>
<td width="45%" valign="top">
<p>Kaki</p>
</td>
<td width="5%" valign="top">
<b>C)</b>
</td>
<td width="45%" valign="top">
<p>Depa</p>
</td>
</tr>
<tr>
<td width="5%" valign="top">
<b>B)</b>
</td>
<td width="45%" valign="top">
<p>Jengkal</p>
</td>
<td width="5%" valign="top">
<b>D)</b>
</td>
<td width="45%">
<p>Hasta</p>
</td>
</tr>
</tbody>
</table>
<br>
</li>
<li>
Manakah tumbuhan yang melindungi diri daripada dimakan haiwan dengan cara yang sama?
<br>
<table style="width: 100%">
<tbody>
<tr>
<td width="5%" valign="top">
<b>A)</b>
</td>
<td width="45%" valign="top">
<p>Pokok keladi, pokok tomato, pokok durian</p>
</td>
<td width="5%" valign="top">
<b>C)</b>
</td>
<td width="45%" valign="top">
<p>Pokok getah, pokok betik, pokok nangka</p>
</td>
</tr>
<tr>
<td width="5%" valign="top">
<b>B)</b>
</td>
<td width="45%" valign="top">
<p>Pokok mangga, pokok pisang, pokok jagung</p>
</td>
<td width="5%" valign="top">
<b>D)</b>
</td>
<td width="45%">
<p>Pokok bunga raya, pokok bunga ros, pokok nanas</p>
</td>
</tr>
</tbody>
</table>
<br>
</li>
<li>
Manakah antara berikut <strong><em>bukan</em></strong> inferens bagi manusia untuk membiak?
<br>
<table style="width: 100%">
<tbody>
<tr>
<td width="5%" valign="top">
<b>A)</b>
</td>
<td width="45%" valign="top">
<p>Untuk memastikan kemandirian spesisnya</p>
</td>
<td width="5%" valign="top">
<b>C)</b>
</td>
<td width="45%" valign="top">
<p>Untuk mengekalkan bilangan mereka</p>
</td>
</tr>
<tr>
<td width="5%" valign="top">
<b>B)</b>
</td>
<td width="45%" valign="top">
<p>Untuk mengekalkan keseimbangan alam</p>
</td>
<td width="5%" valign="top">
<b>D)</b>
</td>
<td width="45%">
<p>Untuk menambah bilangan mereka</p>
</td>
</tr>
</tbody>
</table>
<br>
</li>
<li>
Bagaimanakah nikotin dalam asap rokok menjejaskan kesihatan manusia?
<br>
<table style="width: 100%">
<tbody>
<tr>
<td width="5%" valign="top">
<b>A)</b>
</td>
<td width="45%" valign="top">
<p>Memusnahkan sel-sel dalam paru-paru.</p>
</td>
<td width="5%" valign="top">
<b>C)</b>
</td>
<td width="45%" valign="top">
<p>Menyebabkan barah tekak dan paru-paru.</p>
</td>
</tr>
<tr>
<td width="5%" valign="top">
<b>B)</b>
</td>
<td width="45%" valign="top">
<p>Memusnahkan sel darah merah.</p>
</td>
<td width="5%" valign="top">
<b>D)</b>
</td>
<td width="45%">
<p>Menyebabkan lelah dan bronkitis.</p>
</td>
</tr>
</tbody>
</table>
<br>
</li>
<li>
Pilih tujuan penyiasatan di mana ikan diletakkan dalam tangki bertutup.
<br>
<table style="width: 100%">
<tbody>
<tr>
<td width="5%" valign="top">
<b>A)</b>
</td>
<td width="45%" valign="top">
<p>Untuk menunjukkan bahawa air ialah keperluan asas ikan.</p>
</td>
<td width="5%" valign="top">
<b>C)</b>
</td>
<td width="45%" valign="top">
<p>Untuk menunjukkan bahawa ikan boleh disimpan dalam tangki bertutup.</p>
</td>
</tr>
<tr>
<td width="5%" valign="top">
<b>B)</b>
</td>
<td width="45%" valign="top">
<p>Untuk menunjukkan bahawa udara ialah keperluan asas ikan.</p>
</td>
<td width="5%" valign="top">
<b>D)</b>
</td>
<td width="45%">
<p>Untuk menyiasat sama ada ikan memerlukan makanan untuk terus hidup.</p>
</td>
</tr>
</tbody>
</table>
<br>
</li>
<li>
Mengapakah manusia purba tinggal dalam gua?
<br>
<table style="width: 100%">
<tbody>
<tr>
<td width="5%" valign="top">
<b>A)</b>
</td>
<td width="45%" valign="top">
<p>Untuk mendapat perlindungan daripada hujan, panas matahari, dan musuh.</p>
</td>
<td width="5%" valign="top">
<b>C)</b>
</td>
<td width="45%" valign="top">
<p>Mereka suka tinggal dalam gua.</p>
</td>
</tr>
<tr>
<td width="5%" valign="top">
<b>B)</b>
</td>
<td width="45%" valign="top">
<p>Untuk bersembunyi daripada hujan dan panas matahari.</p>
</td>
<td width="5%" valign="top">
<b>D)</b>
</td>
<td width="45%">
<p>Untuk mengelakkan musuh.</p>
</td>
</tr>
</tbody>
</table>
<br>
</li>
</ol>
Please refer to my fiddle

Try this:
li > div {
display:inline-block; /* not inline-grid */
vertical-align: top;
}
JSfiddle Demo

.. display: block; makes the element somewhat: 100% width and not act like an list-item so appears out of list. There are more elegant solutions.
i use the gt-selector > to be sure only the direct children are affected.
li > img {
display: block;
}
<ol>
<li>
<img src="http://lorempixel.com/400/200">Whatever you say, don't do it!</li>
<li>____</li>
<li>____</li>
<li>____</li>
<li>____</li>
</ol>

Related

How to exclude table from certain styles

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>

Overflow: auto in Firefox not working the same as in Chrome

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.

Header cell and row cell is not aligned when using display: block in tbody

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>

How can I make this HTML / CSS file UltraHD / 4k friendly in a CHtmlView?

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?

Removing bottom border of particular td

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>