Mobile version issue

Merkucio:

How did you create the table? What CSS code did you use? That is what I want to do for a table on https://bladeelectionresults.com. I don’t want the vertical rules, but I do want the horizontal lines.

Any help would be appreciated.
Thanks,

kfranck:

This CSS code I use. Just play with colors:

.tablepress tr {
	background-color: transparent !important;
}

.tablepress th,
.tablepress td {
	text-align: left;
}

.tablepress thead th,
.tablepress tfoot th {
	background-color: transparent;
}

.dataTables_paginate .paginate_enabled_previous,
.dataTables_paginate .paginate_enabled_next {
	color: #ffffff !important;
}

.dataTables_paginate .paginate_disabled_previous,
.dataTables_paginate .paginate_disabled_next {
	color: #ffffff !important;
}

.dataTables_paginate .paginate_enabled_previous:hover,
.dataTables_paginate .paginate_enabled_next:hover {
	color: #ffffff !important;
}

.paginate_enabled_previous:before,
.paginate_enabled_next:after {
	color: #ffffff;
}

.paginate_disabled_previous:before,
.paginate_disabled_next:after {
	color: #ffffff;
}

.paginate_enabled_previous:hover:before,
.paginate_enabled_next:hover:after {
	color: #ffffff;
}

.paging_full_numbers a {
	border: 0;
	border-radius: 3px;
	background-color: transparent;
	color: #ffffff !important;
}

.paging_full_numbers a:hover {
	background-color: #102d43 !important;
}

.paging_full_numbers .paginate_active {
	background-color: #102d43;
}

.tablepress {
	table-layout: auto;
}

Merkucio:

This code is very helpful. I have made some color adjustments and included the changed code below.

My question is: How can I remove the vertical line on the left side of each table?

The URL for the website is https://bladeelectionresults.com

Thanks in advance
kfranck

Here is my revised CSS code:

.tablepress,
.tablepress tr {
background: none !important;
}

.tablepress th,
.tablepress td {
text-align: left;
}

.tablepress thead th,
.tablepress tfoot th {
background: none !important;
}

.dataTables_paginate .paginate_enabled_previous,
.dataTables_paginate .paginate_enabled_next {
color: #ffffff !important;
}

.dataTables_paginate .paginate_disabled_previous,
.dataTables_paginate .paginate_disabled_next {
color: #ffffff !important;
}

.dataTables_paginate .paginate_enabled_previous:hover,
.dataTables_paginate .paginate_enabled_next:hover {
color: #ffffff !important;
}

.paginate_enabled_previous:before,
.paginate_enabled_next:after {
color: #ffffff;
}

.paginate_disabled_previous:before,
.paginate_disabled_next:after {
color: #ffffff;
}

.paginate_enabled_previous:hover:before,
.paginate_enabled_next:hover:after {
color: #ffffff;
}

.paging_full_numbers a {
border: 0;
border-radius: 3px;
background-color: none !important;
color: #ffffff !important;
}

.paging_full_numbers a:hover {
background-color: #102d43 !important;
}

.paging_full_numbers .paginate_active {
background-color: #102d43;
}

.tablepress {
table-layout: auto;
}

Hi,

Kurt: Please see the other threads that you opened for help.

Merkucio: This simply is caused by the content of your table requiring more space than what’s available. The browser simply can not add more line breaks. You will have to add a solution for responsiveness, e.g. one from https://tablepress.org/extensions/responsive-tables/

Regards,
Tobias

Kurt:

Try to add

tr th:first-child, tr td:first-child {
    border-left-style: solid;
    border-left-width: 0px !important;
}

Tobias:
I added this extension, but nothing changed.

Hi Merkucio,

ddi you also change the Shortcode to one of the options?

Regards,
Tobias

Hi Tobias,

Yes, I use collapse mode, but in this case, even firt 2 columns are too wide((
See here, please https://mobiletest.me/iphone_5_emulator/?u=https://tamarberaia.com

Hi,

yeah, the collapse mode doesn’t work in all scenarios ?? I suggest using the scroll mode then, it’s the most reliable.

Regards,
Tobias

Well, collapse mode works now, but when I use it, just the first cell of the first column named ‘DATE’ disappears. It is what happens on responsive version https://mobiletest.me/iphone_5_emulator/?u=https://tamarberaia.com

But in PC version there is not only the first cell, but the the whole first row of the table.

I try to use scroll mode. Same problem.

Just noticed, that the cell and row doesn’t disappeared. Just the text lost their white color… what to do?

• This reply was modified 8 years, 5 months ago by Merkucio.

RESOLVED.

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!

Best wishes,
Tobias