Sir I creat a website I use a ms world table in my post buy after use my table title column separate left site
My post
Hello !
For tables we recommend you using a html table generator like this: https://www.tablesgenerator.com/html_tables#
Thank you !
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;border-color:#aaa;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:17px 20px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#aaa;color:#333;background-color:#fff;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:17px 20px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#aaa;color:#fff;background-color:#f38630;}
.tg .tg-swmu{font-size:12px;font-family:"Arial Black", Gadget, sans-serif !important;;border-color:inherit;text-align:center;vertical-align:top;position:sticky;position:-webkit-sticky;top:-1px;will-change:transform}
.tg .tg-f4iu{font-size:12px;border-color:inherit;text-align:center;vertical-align:top}
.tg-sort-header::-moz-selection{background:0 0}.tg-sort-header::selection{background:0 0}.tg-sort-header{cursor:pointer}.tg-sort-header:after{content:'';float:right;margin-top:7px;border-width:0 5px 5px;border-style:solid;border-color:#404040 transparent;visibility:hidden}.tg-sort-header:hover:after{visibility:visible}.tg-sort-asc:after,.tg-sort-asc:hover:after,.tg-sort-desc:after{visibility:visible;opacity:.4}.tg-sort-desc:after{border-bottom:none;border-width:5px 5px 0}</style>
<table id="tg-1P1ck" class="tg">
<tr>
<th class="tg-swmu" colspan="4">Total Vacancy Details</th>
</tr>
<tr>
<td class="tg-f4iu" colspan="4">Graduate Executive Trainee</td>
</tr>
<tr>
<td class="tg-f4iu">S.no</td>
<td class="tg-f4iu">Post name</td>
<td class="tg-f4iu">Number of Post</td>
<td class="tg-f4iu">Qualification</td>
</tr>
<tr>
<td class="tg-f4iu">1</td>
<td class="tg-f4iu">Mechanical</td>
<td class="tg-f4iu">125</td>
<td class="tg-f4iu">Bachelor Degree (Mechanical Engg)</td>
</tr>
<tr>
<td class="tg-f4iu">2</td>
<td class="tg-f4iu">Electrical (EEE)</td>
<td class="tg-f4iu">65</td>
<td class="tg-f4iu">Bachelor Degree (Electrical Engg)</td>
</tr>
<tr>
<td class="tg-f4iu">3</td>
<td class="tg-f4iu">Electrical (ECE)</td>
<td class="tg-f4iu">10</td>
<td class="tg-f4iu">Bachelor Degree (Electronics & Communication Engg)</td>
</tr>
<tr>
<td class="tg-f4iu">4</td>
<td class="tg-f4iu">Civil</td>
<td class="tg-f4iu">5</td>
<td class="tg-f4iu">Bachelor Degree (Civil Engg)</td>
</tr>
<tr>
<td class="tg-f4iu">5</td>
<td class="tg-f4iu">Control & Instrumentation</td>
<td class="tg-f4iu">15</td>
<td class="tg-f4iu">Bachelor Degree (Instrumentation &</td>
</tr>
<tr>
<td class="tg-f4iu">6</td>
<td class="tg-f4iu">Computer</td>
<td class="tg-f4iu">5</td>
<td class="tg-f4iu">Bachelor Degree (Computer Science/ Computer Engg/ Information Technology)/ PG Degree (Computer)</td>
</tr>
<tr>
<td class="tg-f4iu">7</td>
<td class="tg-f4iu">Mining</td>
<td class="tg-f4iu">5</td>
<td class="tg-f4iu">Bachelor Degree (Mining Engineering)</td>
</tr>
<tr>
<td class="tg-f4iu">8</td>
<td class="tg-f4iu">Geology</td>
<td class="tg-f4iu">5</td>
<td class="tg-f4iu">M.Tech/ M.Sc (Geology)</td>
</tr>
<tr>
<td class="tg-f4iu">9</td>
<td class="tg-f4iu">Finance</td>
<td class="tg-f4iu">14</td>
<td class="tg-f4iu">CA/ CMA/ Degree (Any Discipline)</td>
</tr>
<tr>
<td class="tg-f4iu">10</td>
<td class="tg-f4iu">Human Resource</td>
<td class="tg-f4iu">10</td>
<td class="tg-f4iu">Degree (Any Discipline), PG Degree/ Diploma (Relevant Discipline)</td>
</tr>
</table>
<script charset="utf-8">var TGSort=window.TGSort||function(n){"use strict";function r(n){return n?n.length:0}function t(n,t,e,o=0){for(e=r(n);o<e;++o)t(n[o],o)}function e(n){return n.split("").reverse().join("")}function o(n){var e=n[0];return t(n,function(n){for(;!n.startsWith(e);)e=e.substring(0,r(e)-1)}),r(e)}function u(n,r,e=[]){return t(n,function(n){r(n)&&e.push(n)}),e}var a=parseFloat;function i(n,r){return function(t){var e="";return t.replace(n,function(n,t,o){return e=t.replace(r,"")+"."+(o||"").substring(1)}),a(e)}}var s=i(/^(?:\s*)([+-]?(?:\d+)(?:,\d{3})*)(\.\d*)?$/g,/,/g),c=i(/^(?:\s*)([+-]?(?:\d+)(?:\.\d{3})*)(,\d*)?$/g,/\./g);function f(n){var t=a(n);return!isNaN(t)&&r(""+t)+1>=r(n)?t:NaN}function d(n){var e=[],o=n;return t([f,s,c],function(u){var a=[],i=[];t(n,function(n,r){r=u(n),a.push(r),r||i.push(n)}),r(i)<r(o)&&(o=i,e=a)}),r(u(o,function(n){return n==o[0]}))==r(o)?e:[]}function v(n){if("TABLE"==n.nodeName){for(var a=function(r){var e,o,u=[],a=[];return function n(r,e){e(r),t(r.childNodes,function(r){n(r,e)})}(n,function(n){"TR"==(o=n.nodeName)?(e=[],u.push(e),a.push(n)):"TD"!=o&&"TH"!=o||e.push(n)}),[u,a]}(),i=a[0],s=a[1],c=r(i),f=c>1&&r(i[0])<r(i[1])?1:0,v=f+1,p=i[f],h=r(p),l=[],g=[],N=[],m=v;m<c;++m){for(var T=0;T<h;++T){r(g)<h&&g.push([]);var C=i[m][T],L=C.textContent||C.innerText||"";g[T].push(L.trim())}N.push(m-v)}t(p,function(n,t){l[t]=0;var a=n.classList;a.add("tg-sort-header"),n.addEventListener("click",function(){var n=l[t];!function(){for(var n=0;n<h;++n){var r=p[n].classList;r.remove("tg-sort-asc"),r.remove("tg-sort-desc"),l[n]=0}}(),(n=1==n?-1:+!n)&&a.add(n>0?"tg-sort-asc":"tg-sort-desc"),l[t]=n;var i,f=g[t],m=function(r,t){return n*f[r].localeCompare(f[t])||n*(r-t)},T=function(n){var t=d(n);if(!r(t)){var u=o(n),a=o(n.map(e));t=d(n.map(function(n){return n.substring(u,r(n)-a)}))}return t}(f);(r(T)||r(T=r(u(i=f.map(Date.parse),isNaN))?[]:i))&&(m=function(r,t){var e=T[r],o=T[t],u=isNaN(e),a=isNaN(o);return u&&a?0:u?-n:a?n:e>o?n:e<o?-n:n*(r-t)});var C,L=N.slice();L.sort(m);for(var E=v;E<c;++E)(C=s[E].parentNode).removeChild(s[E]);for(E=v;E<c;++E)C.appendChild(s[v+L[E-v]])})})}}n.addEventListener("DOMContentLoaded",function(){for(var t=n.getElementsByClassName("tg"),e=0;e<r(t);++e)try{v(t[e])}catch(n){}})}(document)</script>
-
This reply was modified 6 years by
rajneeshhaldkar.
-
This reply was modified 6 years by
rajneeshhaldkar.
i creat table http://tablesgenerator.com/ but not work in my post please explane how to use my table is
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;border-color:#aaa;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:17px 20px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#aaa;color:#333;background-color:#fff;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:17px 20px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#aaa;color:#fff;background-color:#f38630;}
.tg .tg-swmu{font-size:12px;font-family:"Arial Black", Gadget, sans-serif !important;;border-color:inherit;text-align:center;vertical-align:top;position:sticky;position:-webkit-sticky;top:-1px;will-change:transform}
.tg .tg-f4iu{font-size:12px;border-color:inherit;text-align:center;vertical-align:top}
.tg-sort-header::-moz-selection{background:0 0}.tg-sort-header::selection{background:0 0}.tg-sort-header{cursor:pointer}.tg-sort-header:after{content:'';float:right;margin-top:7px;border-width:0 5px 5px;border-style:solid;border-color:#404040 transparent;visibility:hidden}.tg-sort-header:hover:after{visibility:visible}.tg-sort-asc:after,.tg-sort-asc:hover:after,.tg-sort-desc:after{visibility:visible;opacity:.4}.tg-sort-desc:after{border-bottom:none;border-width:5px 5px 0}</style>
<table id="tg-1P1ck" class="tg">
<tr>
<th class="tg-swmu" colspan="4">Total Vacancy Details</th>
</tr>
<tr>
<td class="tg-f4iu" colspan="4">Graduate Executive Trainee</td>
</tr>
<tr>
<td class="tg-f4iu">S.no</td>
<td class="tg-f4iu">Post name</td>
<td class="tg-f4iu">Number of Post</td>
<td class="tg-f4iu">Qualification</td>
</tr>
<tr>
<td class="tg-f4iu">1</td>
<td class="tg-f4iu">Mechanical</td>
<td class="tg-f4iu">125</td>
<td class="tg-f4iu">Bachelor Degree (Mechanical Engg)</td>
</tr>
<tr>
<td class="tg-f4iu">2</td>
<td class="tg-f4iu">Electrical (EEE)</td>
<td class="tg-f4iu">65</td>
<td class="tg-f4iu">Bachelor Degree (Electrical Engg)</td>
</tr>
<tr>
<td class="tg-f4iu">3</td>
<td class="tg-f4iu">Electrical (ECE)</td>
<td class="tg-f4iu">10</td>
<td class="tg-f4iu">Bachelor Degree (Electronics & Communication Engg)</td>
</tr>
<tr>
<td class="tg-f4iu">4</td>
<td class="tg-f4iu">Civil</td>
<td class="tg-f4iu">5</td>
<td class="tg-f4iu">Bachelor Degree (Civil Engg)</td>
</tr>
<tr>
<td class="tg-f4iu">5</td>
<td class="tg-f4iu">Control & Instrumentation</td>
<td class="tg-f4iu">15</td>
<td class="tg-f4iu">Bachelor Degree (Instrumentation &</td>
</tr>
<tr>
<td class="tg-f4iu">6</td>
<td class="tg-f4iu">Computer</td>
<td class="tg-f4iu">5</td>
<td class="tg-f4iu">Bachelor Degree (Computer Science/ Computer Engg/ Information Technology)/ PG Degree (Computer)</td>
</tr>
<tr>
<td class="tg-f4iu">7</td>
<td class="tg-f4iu">Mining</td>
<td class="tg-f4iu">5</td>
<td class="tg-f4iu">Bachelor Degree (Mining Engineering)</td>
</tr>
<tr>
<td class="tg-f4iu">8</td>
<td class="tg-f4iu">Geology</td>
<td class="tg-f4iu">5</td>
<td class="tg-f4iu">M.Tech/ M.Sc (Geology)</td>
</tr>
<tr>
<td class="tg-f4iu">9</td>
<td class="tg-f4iu">Finance</td>
<td class="tg-f4iu">14</td>
<td class="tg-f4iu">CA/ CMA/ Degree (Any Discipline)</td>
</tr>
<tr>
<td class="tg-f4iu">10</td>
<td class="tg-f4iu">Human Resource</td>
<td class="tg-f4iu">10</td>
<td class="tg-f4iu">Degree (Any Discipline), PG Degree/ Diploma (Relevant Discipline)</td>
</tr>
</table>
<script charset="utf-8">var TGSort=window.TGSort||function(n){"use strict";function r(n){return n?n.length:0}function t(n,t,e,o=0){for(e=r(n);o<e;++o)t(n[o],o)}function e(n){return n.split("").reverse().join("")}function o(n){var e=n[0];return t(n,function(n){for(;!n.startsWith(e);)e=e.substring(0,r(e)-1)}),r(e)}function u(n,r,e=[]){return t(n,function(n){r(n)&&e.push(n)}),e}var a=parseFloat;function i(n,r){return function(t){var e="";return t.replace(n,function(n,t,o){return e=t.replace(r,"")+"."+(o||"").substring(1)}),a(e)}}var s=i(/^(?:\s*)([+-]?(?:\d+)(?:,\d{3})*)(\.\d*)?$/g,/,/g),c=i(/^(?:\s*)([+-]?(?:\d+)(?:\.\d{3})*)(,\d*)?$/g,/\./g);function f(n){var t=a(n);return!isNaN(t)&&r(""+t)+1>=r(n)?t:NaN}function d(n){var e=[],o=n;return t([f,s,c],function(u){var a=[],i=[];t(n,function(n,r){r=u(n),a.push(r),r||i.push(n)}),r(i)<r(o)&&(o=i,e=a)}),r(u(o,function(n){return n==o[0]}))==r(o)?e:[]}function v(n){if("TABLE"==n.nodeName){for(var a=function(r){var e,o,u=[],a=[];return function n(r,e){e(r),t(r.childNodes,function(r){n(r,e)})}(n,function(n){"TR"==(o=n.nodeName)?(e=[],u.push(e),a.push(n)):"TD"!=o&&"TH"!=o||e.push(n)}),[u,a]}(),i=a[0],s=a[1],c=r(i),f=c>1&&r(i[0])<r(i[1])?1:0,v=f+1,p=i[f],h=r(p),l=[],g=[],N=[],m=v;m<c;++m){for(var T=0;T<h;++T){r(g)<h&&g.push([]);var C=i[m][T],L=C.textContent||C.innerText||"";g[T].push(L.trim())}N.push(m-v)}t(p,function(n,t){l[t]=0;var a=n.classList;a.add("tg-sort-header"),n.addEventListener("click",function(){var n=l[t];!function(){for(var n=0;n<h;++n){var r=p[n].classList;r.remove("tg-sort-asc"),r.remove("tg-sort-desc"),l[n]=0}}(),(n=1==n?-1:+!n)&&a.add(n>0?"tg-sort-asc":"tg-sort-desc"),l[t]=n;var i,f=g[t],m=function(r,t){return n*f[r].localeCompare(f[t])||n*(r-t)},T=function(n){var t=d(n);if(!r(t)){var u=o(n),a=o(n.map(e));t=d(n.map(function(n){return n.substring(u,r(n)-a)}))}return t}(f);(r(T)||r(T=r(u(i=f.map(Date.parse),isNaN))?[]:i))&&(m=function(r,t){var e=T[r],o=T[t],u=isNaN(e),a=isNaN(o);return u&&a?0:u?-n:a?n:e>o?n:e<o?-n:n*(r-t)});var C,L=N.slice();L.sort(m);for(var E=v;E<c;++E)(C=s[E].parentNode).removeChild(s[E]);for(E=v;E<c;++E)C.appendChild(s[v+L[E-v]])})})}}n.addEventListener("DOMContentLoaded",function(){for(var t=n.getElementsByClassName("tg"),e=0;e<r(t);++e)try{v(t[e])}catch(n){}})}(document)</script>
-
This reply was modified 6 years by
rajneeshhaldkar.
Hi,
The problem is that your table is set to 100% width and if you want to display it like that you need to remove the sidebar from this post like this -> https://i.imgur.com/NFN923G.png
Hope this will help you!
Thank you!
This is a scrolling table so not a 100% width problem
Tell me how to use this table because I paste this code in html code not show any deta because code contains css+html , and I paste only table code without using CSS table is work (<table..... .....</table>)
Please tell us where a past this code
Because I use a simple table but simple column separate to left side Table post solve tha problem
-
This reply was modified 6 years by
rajneeshhaldkar.
Hi,
So the problem is that you do not know where to set the code to display in the proper way the table, if this is the problem, then you can set this code in post in code editor like this -> https://i.imgur.com/DiFnhcj.png and the results will be this -> https://i.imgur.com/4Z2IWhR.png
Hope this is what you need!
Thank you!
your table is normal but my table code is css contain
Hi,
So there is more code? I set exactly the same code you provide, if there is more code and this is css code, you can set it in theme pane > custom code> custom css.
If this is not what you mean, please provide some more detects and some screenshots with the way it should look the tables.
Thank you for your understanding!
I create a table website – https://www.tablesgenerator.com/html_tables#
I also give image blow i create a design table in website and website give a html code so i copy this code and paste post not show this type table I gave u a all image or website please solve the problem
creating table – https://www.screencast.com/t/Bjy4DXhNv
i want a this type – https://www.screencast.com/t/s9UZiOiEuce
scrollable table – https://www.screencast.com/t/LJwVCz9YK
-
This reply was modified 6 years by
rajneeshhaldkar.
-
This reply was modified 6 years by
rajneeshhaldkar.
table code is <style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;border-color:#bbb;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#bbb;color:#594F4F;background-color:#E0FFEB;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#bbb;color:#493F3F;background-color:#9DE0AD;}
.tg .tg-c3ow{border-color:inherit;text-align:center;vertical-align:top}
.tg .tg-4qqe{font-weight:bold;font-size:22px;border-color:inherit;text-align:center;vertical-align:top}
.tg .tg-7jts{font-size:18px;border-color:inherit;text-align:center;vertical-align:top}
.tg-sort-header::-moz-selection{background:0 0}.tg-sort-header::selection{background:0 0}.tg-sort-header{cursor:pointer}.tg-sort-header:after{content:'';float:right;margin-top:7px;border-width:0 5px 5px;border-style:solid;border-color:#404040 transparent;visibility:hidden}.tg-sort-header:hover:after{visibility:visible}.tg-sort-asc:after,.tg-sort-asc:hover:after,.tg-sort-desc:after{visibility:visible;opacity:.4}.tg-sort-desc:after{border-bottom:none;border-width:5px 5px 0}</style>
<table id="tg-WD84p" class="tg">
<tr>
<th class="tg-4qqe" colspan="4"><br> Total Vacancy Details<br> </th>
</tr>
<tr>
<td class="tg-7jts" colspan="4"><br> Graduate Executive Trainee<br> NEW JOB NOTIFICATION</td>
</tr>
<tr>
<td class="tg-c3ow"><br> S.No<br> </td>
<td class="tg-c3ow"><br> Post name<br> </td>
<td class="tg-c3ow"><br> Number of Post<br> </td>
<td class="tg-c3ow"><br> Qualification<br> </td>
</tr>
<tr>
<td class="tg-c3ow"><br> 1<br> </td>
<td class="tg-c3ow"><br> Mechanical<br> </td>
<td class="tg-c3ow"><br> 125<br> </td>
<td class="tg-c3ow"><br> Bachelor Degree (Mechanical<br> Engg)<br> </td>
</tr>
<tr>
<td class="tg-c3ow"><br> 2<br> </td>
<td class="tg-c3ow"><br> Electrical (EEE)<br> </td>
<td class="tg-c3ow"><br> 65<br> </td>
<td class="tg-c3ow"><br> Bachelor Degree (Electrical<br> Engg)<br> </td>
</tr>
<tr>
<td class="tg-c3ow"><br> 3<br> </td>
<td class="tg-c3ow"><br> Electrical (ECE)<br> </td>
<td class="tg-c3ow"><br> 10<br> </td>
<td class="tg-c3ow"><br> Bachelor Degree (Electronics<br> & Communication Engg)<br> </td>
</tr>
<tr>
<td class="tg-c3ow"><br> 4<br> </td>
<td class="tg-c3ow"><br> Civil<br> </td>
<td class="tg-c3ow"><br> 5<br> </td>
<td class="tg-c3ow"><br> Bachelor Degree (Civil Engg)<br> </td>
</tr>
<tr>
<td class="tg-c3ow"><br> 5<br> </td>
<td class="tg-c3ow"><br> Control &<br> Instrumentation<br> </td>
<td class="tg-c3ow"><br> 15<br> </td>
<td class="tg-c3ow"><br> Bachelor Degree<br> (Instrumentation &<br> </td>
</tr>
<tr>
<td class="tg-c3ow"><br> 6<br> </td>
<td class="tg-c3ow"><br> Computer<br> </td>
<td class="tg-c3ow"><br> 5<br> </td>
<td class="tg-c3ow"><br> Bachelor Degree (Computer<br> Science/ Computer Engg/ Information Technology)/ PG Degree (Computer)<br> </td>
</tr>
<tr>
<td class="tg-c3ow"><br> 7<br> </td>
<td class="tg-c3ow"><br> Mining<br> </td>
<td class="tg-c3ow"><br> 5<br> </td>
<td class="tg-c3ow"><br> Bachelor Degree (Mining<br> Engineering)<br> </td>
</tr>
<tr>
<td class="tg-c3ow"><br> 8<br> </td>
<td class="tg-c3ow"><br> Geology<br> </td>
<td class="tg-c3ow"><br> 5<br> </td>
<td class="tg-c3ow"><br> M.Tech/ M.Sc (Geology)<br> </td>
</tr>
<tr>
<td class="tg-c3ow"><br> 9<br> </td>
<td class="tg-c3ow"><br> Finance<br> </td>
<td class="tg-c3ow"><br> 14<br> </td>
<td class="tg-c3ow"><br> CA/ CMA/ Degree (Any<br> Discipline)<br> </td>
</tr>
<tr>
<td class="tg-c3ow"><br> 10<br> </td>
<td class="tg-c3ow"><br> Human Resource<br> </td>
<td class="tg-c3ow"><br> 10<br> </td>
<td class="tg-c3ow"><br> Degree (Any Discipline), PG<br> Degree/ Diploma (Relevant Discipline)<br> </td>
</tr>
</table>
<script charset="utf-8">var TGSort=window.TGSort||function(n){"use strict";function r(n){return n?n.length:0}function t(n,t,e,o=0){for(e=r(n);o<e;++o)t(n[o],o)}function e(n){return n.split("").reverse().join("")}function o(n){var e=n[0];return t(n,function(n){for(;!n.startsWith(e);)e=e.substring(0,r(e)-1)}),r(e)}function u(n,r,e=[]){return t(n,function(n){r(n)&&e.push(n)}),e}var a=parseFloat;function i(n,r){return function(t){var e="";return t.replace(n,function(n,t,o){return e=t.replace(r,"")+"."+(o||"").substring(1)}),a(e)}}var s=i(/^(?:\s*)([+-]?(?:\d+)(?:,\d{3})*)(\.\d*)?$/g,/,/g),c=i(/^(?:\s*)([+-]?(?:\d+)(?:\.\d{3})*)(,\d*)?$/g,/\./g);function f(n){var t=a(n);return!isNaN(t)&&r(""+t)+1>=r(n)?t:NaN}function d(n){var e=[],o=n;return t([f,s,c],function(u){var a=[],i=[];t(n,function(n,r){r=u(n),a.push(r),r||i.push(n)}),r(i)<r(o)&&(o=i,e=a)}),r(u(o,function(n){return n==o[0]}))==r(o)?e:[]}function v(n){if("TABLE"==n.nodeName){for(var a=function(r){var e,o,u=[],a=[];return function n(r,e){e(r),t(r.childNodes,function(r){n(r,e)})}(n,function(n){"TR"==(o=n.nodeName)?(e=[],u.push(e),a.push(n)):"TD"!=o&&"TH"!=o||e.push(n)}),[u,a]}(),i=a[0],s=a[1],c=r(i),f=c>1&&r(i[0])<r(i[1])?1:0,v=f+1,p=i[f],h=r(p),l=[],g=[],N=[],m=v;m<c;++m){for(var T=0;T<h;++T){r(g)<h&&g.push([]);var C=i[m][T],L=C.textContent||C.innerText||"";g[T].push(L.trim())}N.push(m-v)}t(p,function(n,t){l[t]=0;var a=n.classList;a.add("tg-sort-header"),n.addEventListener("click",function(){var n=l[t];!function(){for(var n=0;n<h;++n){var r=p[n].classList;r.remove("tg-sort-asc"),r.remove("tg-sort-desc"),l[n]=0}}(),(n=1==n?-1:+!n)&&a.add(n>0?"tg-sort-asc":"tg-sort-desc"),l[t]=n;var i,f=g[t],m=function(r,t){return n*f[r].localeCompare(f[t])||n*(r-t)},T=function(n){var t=d(n);if(!r(t)){var u=o(n),a=o(n.map(e));t=d(n.map(function(n){return n.substring(u,r(n)-a)}))}return t}(f);(r(T)||r(T=r(u(i=f.map(Date.parse),isNaN))?[]:i))&&(m=function(r,t){var e=T[r],o=T[t],u=isNaN(e),a=isNaN(o);return u&&a?0:u?-n:a?n:e>o?n:e<o?-n:n*(r-t)});var C,L=N.slice();L.sort(m);for(var E=v;E<c;++E)(C=s[E].parentNode).removeChild(s[E]);for(E=v;E<c;++E)C.appendChild(s[v+L[E-v]])})})}}n.addEventListener("DOMContentLoaded",function(){for(var t=n.getElementsByClassName("tg"),e=0;e<r(t);++e)try{v(t[e])}catch(n){}})}(document)</script>
Hi,
Is look that the css is not applied because is not set write, the works are connected between theme and this is not good, this should look like this -> https://i.imgur.com/e4qtYEb.png so in order to work properly, you need to set the css code and js code in theme panel> custom code> this code will be set in css
.tg {border-collapse:collapse;border-spacing:0;border-color:#bbb;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#bbb;color:#594F4F;background-color:#E0FFEB;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#bbb;color:#493F3F;background-color:#9DE0AD;}
.tg .tg-c3ow{border-color:inherit;text-align:center;vertical-align:top}
.tg .tg-4qqe{font-weight:bold;font-size:22px;border-color:inherit;text-align:center;vertical-align:top}
.tg .tg-7jts{font-size:18px;border-color:inherit;text-align:center;vertical-align:top}
.tg-sort-header::-moz-selection{background:0 0}.tg-sort-header::selection{background:0 0}.tg-sort-header{cursor:pointer}.tg-sort-header:after{content:'';float:right;margin-top:7px;border-width:0 5px 5px;border-style:solid;border-color:#404040 transparent;visibility:hidden}.tg-sort-header:hover:after{visibility:visible}.tg-sort-asc:after,.tg-sort-asc:hover:after,.tg-sort-desc:after{visibility:visible;opacity:.4}.tg-sort-desc:after{border-bottom:none;border-width:5px 5px 0}
-> https://i.imgur.com/uKTfHei.png
this code will be set in custom javascript
var TGSort=window.TGSort||function(n){"use strict";function r(n){return n?n.length:0}function t(n,t,e,o=0){for(e=r(n);o<e;++o)t(n[o],o)}function e(n){return n.split("").reverse().join("")}function o(n){var e=n[0];return t(n,function(n){for(;!n.startsWith(e);)e=e.substring(0,r(e)-1)}),r(e)}function u(n,r,e=[]){return t(n,function(n){r(n)&&e.push(n)}),e}var a=parseFloat;function i(n,r){return function(t){var e="";return t.replace(n,function(n,t,o){return e=t.replace(r,"")+"."+(o||"").substring(1)}),a(e)}}var s=i(/^(?:\s*)([+-]?(?:\d+)(?:,\d{3})*)(\.\d*)?$/g,/,/g),c=i(/^(?:\s*)([+-]?(?:\d+)(?:\.\d{3})*)(,\d*)?$/g,/\./g);function f(n){var t=a(n);return!isNaN(t)&&r(""+t)+1>=r(n)?t:NaN}function d(n){var e=[],o=n;return t([f,s,c],function(u){var a=[],i=[];t(n,function(n,r){r=u(n),a.push(r),r||i.push(n)}),r(i)<r(o)&&(o=i,e=a)}),r(u(o,function(n){return n==o[0]}))==r(o)?e:[]}function v(n){if("TABLE"==n.nodeName){for(var a=function(r){var e,o,u=[],a=[];return function n(r,e){e(r),t(r.childNodes,function(r){n(r,e)})}(n,function(n){"TR"==(o=n.nodeName)?(e=[],u.push(e),a.push(n)):"TD"!=o&&"TH"!=o||e.push(n)}),[u,a]}(),i=a[0],s=a[1],c=r(i),f=c>1&&r(i[0])<r(i[1])?1:0,v=f+1,p=i[f],h=r(p),l=[],g=[],N=[],m=v;m<c;++m){for(var T=0;T<h;++T){r(g)<h&&g.push([]);var C=i[m][T],L=C.textContent||C.innerText||"";g[T].push(L.trim())}N.push(m-v)}t(p,function(n,t){l[t]=0;var a=n.classList;a.add("tg-sort-header"),n.addEventListener("click",function(){var n=l[t];!function(){for(var n=0;n<h;++n){var r=p[n].classList;r.remove("tg-sort-asc"),r.remove("tg-sort-desc"),l[n]=0}}(),(n=1==n?-1:+!n)&&a.add(n>0?"tg-sort-asc":"tg-sort-desc"),l[t]=n;var i,f=g[t],m=function(r,t){return n*f[r].localeCompare(f[t])||n*(r-t)},T=function(n){var t=d(n);if(!r(t)){var u=o(n),a=o(n.map(e));t=d(n.map(function(n){return n.substring(u,r(n)-a)}))}return t}(f);(r(T)||r(T=r(u(i=f.map(Date.parse),isNaN))?[]:i))&&(m=function(r,t){var e=T[r],o=T[t],u=isNaN(e),a=isNaN(o);return u&&a?0:u?-n:a?n:e>o?n:e<o?-n:n*(r-t)});var C,L=N.slice();L.sort(m);for(var E=v;E<c;++E)(C=s[E].parentNode).removeChild(s[E]);for(E=v;E<c;++E)C.appendChild(s[v+L[E-v]])})})}}n.addEventListener("DOMContentLoaded",function(){for(var t=n.getElementsByClassName("tg"),e=0;e<r(t);++e)try{v(t[e])}catch(n){}})}(document)
-> https://i.imgur.com/rOUKtOt.png
and this code will be set in the post content in code editor
<table id="tg-WD84p" class="tg">
<tbody>
<tr>
<th class="tg-4qqe" colspan="4"> Total Vacancy Details</th>
</tr>
<tr>
<td class="tg-7jts" colspan="4"> Graduate Executive Trainee
NEW JOB NOTIFICATION</td>
</tr>
<tr>
<td class="tg-c3ow"> S.No</td>
<td class="tg-c3ow"> Post name</td>
<td class="tg-c3ow"> Number of Post</td>
<td class="tg-c3ow"> Qualification</td>
</tr>
<tr>
<td class="tg-c3ow"> 1</td>
<td class="tg-c3ow"> Mechanical</td>
<td class="tg-c3ow"> 125</td>
<td class="tg-c3ow"> Bachelor Degree (Mechanical
Engg)</td>
</tr>
<tr>
<td class="tg-c3ow"> 2</td>
<td class="tg-c3ow"> Electrical (EEE)</td>
<td class="tg-c3ow"> 65</td>
<td class="tg-c3ow"> Bachelor Degree (Electrical
Engg)</td>
</tr>
<tr>
<td class="tg-c3ow"> 3</td>
<td class="tg-c3ow"> Electrical (ECE)</td>
<td class="tg-c3ow"> 10</td>
<td class="tg-c3ow"> Bachelor Degree (Electronics
& Communication Engg)</td>
</tr>
<tr>
<td class="tg-c3ow"> 4</td>
<td class="tg-c3ow"> Civil</td>
<td class="tg-c3ow"> 5</td>
<td class="tg-c3ow"> Bachelor Degree (Civil Engg)</td>
</tr>
<tr>
<td class="tg-c3ow"> 5</td>
<td class="tg-c3ow"> Control &
Instrumentation</td>
<td class="tg-c3ow"> 15</td>
<td class="tg-c3ow"> Bachelor Degree
(Instrumentation &</td>
</tr>
<tr>
<td class="tg-c3ow"> 6</td>
<td class="tg-c3ow"> Computer</td>
<td class="tg-c3ow"> 5</td>
<td class="tg-c3ow"> Bachelor Degree (Computer
Science/ Computer Engg/ Information Technology)/ PG Degree (Computer)</td>
</tr>
<tr>
<td class="tg-c3ow"> 7</td>
<td class="tg-c3ow"> Mining</td>
<td class="tg-c3ow"> 5</td>
<td class="tg-c3ow"> Bachelor Degree (Mining
Engineering)</td>
</tr>
<tr>
<td class="tg-c3ow"> 8</td>
<td class="tg-c3ow"> Geology</td>
<td class="tg-c3ow"> 5</td>
<td class="tg-c3ow"> M.Tech/ M.Sc (Geology)</td>
</tr>
<tr>
<td class="tg-c3ow"> 9</td>
<td class="tg-c3ow"> Finance</td>
<td class="tg-c3ow"> 14</td>
<td class="tg-c3ow"> CA/ CMA/ Degree (Any
Discipline)</td>
</tr>
<tr>
<td class="tg-c3ow"> 10</td>
<td class="tg-c3ow"> Human Resource</td>
<td class="tg-c3ow"> 10</td>
<td class="tg-c3ow"> Degree (Any Discipline), PG
Degree/ Diploma (Relevant Discipline)</td>
</tr>
</tbody>
</table>
-> https://i.imgur.com/JE2jQlG.png
Hope this will work better now!
Thank you!