How to Improve Table-based Grib View by using CSS

This thread is resolved. Here is a description of the problem and solution.

Problem:

Improve the view by using CSS.

1) The table width needs to be standardized and equal.

2) Remove the borderline

Solution:

This is a CSS problem, see the solution here:

https://toolset.com/forums/topic/how-to-improve-table-based-grib-view-by-using-css/#post-1144832

Relevant Documentation:

This support ticket is created 6 years ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	-
-	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

Tagged: Views, Views plugin

This topic contains 4 replies, has 2 voices.

Last updated by tohL 6 years ago.

Assisted by: Luo Yang.

Author

Posts

November 12, 2018 at 7:03 am #1144819

tohL

Could you please help to improve the view by using CSS.
1) The table width needs to be standardized and equal.
2) Remove the borderline

Thank you.

November 12, 2018 at 7:22 am #1144832

Luo Yang

Hi,

I can get your website credentials in your previous post:
https://toolset.com/forums/topic/dropdown-list-not-function-in-responsive-view-handphone-view/#post-1143631

And have done below modification in your website:
Edit the view "Search Location":
hidden link

in section "Loop Editor", change the table HTML codes from:

<table width="100%" class="wpv-loop js-wpv-loop">

To:

<table width="100%" class="wpv-loop js-wpv-loop my-table">

click "CSS Editor", and add below CSS codes:

table.my-table td{ /* table cell */
	width: 33%; /* table cell width */
  	border-width: 0px;
	border: none;
}
table.my-table{ /* table */
	border: none;
}

Above CSS codes will only take effect on the table with CSS class "my-table", for your reference.

November 12, 2018 at 7:58 am #1144853

tohL

The CSS code is work.

Could you please help on the button CSS?
1) Need to align the buttons to the bottom of a Row.
2) Change the button and text color for the button.
3) The table is not responsive. (please refer 7.jpeg)

New threads created by Luo Yang and linked to this one are listed below:

https://toolset.com/forums/topic/css-problem-about-button-and-table/

November 12, 2018 at 8:20 am #1144865

Luo Yang

Yes, I have created a new ticket for your new questions, and working on it.

November 13, 2018 at 3:52 am #1145556

tohL

My issue is resolved now. Thank you!