Need to create a payment chart of multiple columns

[iblondie62]

I need to create a payment plan which is like a mini spreadsheet with 3 columns and several rows. I need to be able to show the gridlines, define the widths of the columns (they will be equal but not use the whole page) and change the background color.

I have played with the div and .content-3-col to create the columns but do not know who to add the gridlines, color, width, etc… I do not have Weaver plus.

If you go to this page http://maxhealthme.org/direct-care-dpc/billing-payment/

You will see the section Adult Membership Monthly Fees. I need the columns to be Age, First Member, Secondary Member to only be as big as the box with Adult Membership Fees.

 

[Maureen]

A table might be the solution. Although not responsive, tables are good for tabular info. I use Tablepress:  https://wordpress.org/plugins/tablepress/

[scrambler]

I agree that ultimately when you need a tabular data set you need a table. Just make sure you use responsive settings like % width.

You do need to check if the 3 columns will fit all the way down to a cell phone screen, because if they don’t fit side by side on a phone size screen, you then need to decide what happens there.

That being said, the way to create and style a 3 column with divs and the content-3-col if they should always be 3 columns (instead of becoming 2 on mobile) is below.

The HTML would look like

<div>
<div class=”content-3-col row1″>First column content</div>
<div class=”content-3-col row1″>Second column content</div>
<div class=”content-3-col row1″>Third column content</div>
<div class=”content-3-col row2″>First column content</div>
<div class=”content-3-col row2″>Second column content</div>
<div class=”content-3-col row2″>Third column content</div>
<div class=”content-3-col row3″>First column content</div>
<div class=”content-3-col row3″>Second column content</div>
<div class=”content-3-col row3″>Third column content</div>
</div>
<div style=”clear:both;”></div>

and the custom CSS

[class*=row] {border:1px solid black;}  /*Styling common to all rows*/
.row1 {background-color:green;}
.row2 {background-color:grey;}
.row3 {background-color:blue;}
/*rules below to undo 2 col on mobile*/
.is-mobile :nth-of-type(2n+1).content-3-col {clear:none !important;}
.is-mobile :nth-of-type(3n+1).content-3-col {clear:left !important;}
.is-mobile .content-3-col {width:33.3%;}

[iblondie62]

Thanks. I will check out the table option, but if I use the above div, where do I put the custom css?

[scrambler]

CUstom CSS goes in Main Options > Fonts & Custom > Custom CSS Rule box

[Author]

Posts