Problem with column order on mobile version

Tagged: CSS, data tables, responsive mode, supsystic, Table

This topic has 10 replies, 3 voices, and was last updated 4 years, 7 months ago by Ole_Support.

Viewing 11 posts - 1 through 11 (of 11 total)

Author
Posts
December 20, 2017 at 18:37 #16171

Anonymous
Inactive
Hey
First of all, thanks for the amazing plugins. Have been using ‘Tables’ and ‘Pricing Tables’, both brilliant.
I had to create the pricing table in the table plugin, as it had to be 5 columns wide and 12 rows high. I am experiencing two issues.
Website: http://www.loxdale.com/general-english-course/ under the ‘Tuition Prices’.
1) I can’t seem to get rid of that 1px black border at the top. I tried finding solution online (including this forum) but everything I tried is giving me either the border at the top, or at the bottom. The current CSS code that I have is:
#supsystic-table-1 {
border-top: none;
border-bottom: none;
}
Oddly enough, if I change the first line of the above code to ‘table#supsystic-table-1 * {‘, it will give me the border at the bottom instead of the top.
2) I have a problem with column order on the mobile version. There are 5 ‘weeks’ columns followed by 5 ‘price’ columns. I understand that this is happening because it reads the table as A1, A2…A5, B1, B2 etc. I was wondering if there is a way of changing that order to A1, A2, B1, B2.
Many Thanks
Jack
December 20, 2017 at 23:40 #16178

mila_support
Member
Hi @admin136089
Thank you for contacting us about Data Tables questions.
1. Your issue was redirected to our developer. I will inform you about the progress.
2. Try to use the Horizontal Scroll Responsive Mode at the Design Tab of Table Settings.
December 21, 2017 at 02:11 #16182
mila_support
Member
Hi
Please insert the next code to hide the top line:
```
#supsystic-table-237 thead th, thead td {
    border-bottom: none;
}
```
where 237 – is your table id.
On the CSS tab of your table – http://prntscr.com/hq9ngl
December 21, 2017 at 15:39 #16192

Anonymous
Inactive
Dear Mila
Thank you for a prompt reply.
I started with adding the code to the CSS tab and it worked brilliantly!
I then changed to horizontal scroll and the table looks decent on a mobile phone but the top and the bottom border is back :(.
Any ideas how I could adjust the CSS code?
Best Wishes
Jack
December 29, 2017 at 19:25 #16224

Anonymous
Inactive
Dear Mila
I received a reply e-mail from you today but I can’t see that singular post in this topic. I imagine it was a mistake, as the e-mail read:
I’m sorry for a long delay.
Please provide the screenshot with detailed description where you want social share buttons be.
And provide the code, you want to work there.
The problem that I am currently having is that I switched the view of the table to ‘horizontal’, and the border at the top and bottom of the table is back. The above code suggestions do not work.
Best Wishes
Jack
December 30, 2017 at 16:44 #16225

mila_support
Member
Hi @admin136089
Yes, it was a mistake. I’m sorry.
About your question – the issue was redirected to our developer and I will inform you about the progress.
January 3, 2018 at 00:19 #16237
mila_support
Member
Hi @admin136089
I’m sorry for a long delay
Please replace this –
```
#supsystic-table-1 thead th, thead td {
    border-bottom: none;
}
```
with this code
```
#supsystic-table-1 thead th, #supsystic-table-1 thead td {
    border: none !important;
}
```
Happy Holidays!
January 4, 2018 at 19:45 #16258

Anonymous
Inactive
Dear Mila
Unfortunately changing the above code does not work :(.
I am stuck with 1px, black border at both top and the bottom.
Any code that I have tried after switching to horizontal layout doesn’t seem to work, beforehand I could at least remove either the top border or the bottom.
I am pasting this image in case I am doing something wrong:
As you can see under this address, the table is still there:
http://www.loxdale.com/general-english-course/
Best Wishes
Jack
January 10, 2018 at 13:05 #16309
mila_support
Member
Hi @admin136089
Please use
```
.supsystic-table thead th {
    border-bottom: none !important;
}
```
this will solve the issue.
September 1, 2018 at 18:52 #19614

Anonymous
Inactive
Hello guys
I wasn’t sure if I should start a new post or continue with the current one but I am still experiencing the issue with 1px border at the top and bottom of my tables.
The website is https://www.loxdale.com/general-english-course/
I noticed that you now have article regarding this issue but unfortunately the solution there did not work for me:
https://supsystic.com/documentation/remove-lines-above-under-table/
I was just trying to play with it again, and I tried several different combinations based on the most recent reply:
.supsystic-table thead th {
border-bottom: none !important;
}
I tried this with ‘#’ instead of ‘.’ but also:
– ‘border-top: none’, ‘border-bottom: none’ and ‘border: none’. Together and in separate strings
– I tried playing with thead th and thead td
– with and without !important
I also tried solution I found here: https://supsystic.com/topic/remove-top-border/, but to no effect.
Funnily, the most recent solution posted by Milla elimitaes the top border, even though the code say border-bottom.
Many Thanks
Jack
September 3, 2018 at 14:14 #19643

Ole_Support
Keymaster
Please contact us through our
internal support.
We will help you to solve the problem.
Author
Posts