How to build a DIV table in Product Descriptions?

[jodean]

I am running Zencart 1.5.6 with the Responsive Template.

Does anyone have an examples for adding a Div table in a product description?

[davewest]

I am running Zencart 1.5.6 with the Responsive Template.

Does anyone have an examples for adding a Div table in a product description?

Responsive Div table https://codepen.io/amwill04/pen/QNPpqx

use CK Source or type in the code using text editor only...

[jodean]

I added the code using CK Editor4 from CK Source to put the table code in the product desciption and used Note Pad++ to put the CSS code in the responsive stylesheet.css file. The stylesheet.css code looks like it is not used to style the table. Is CKEditor the only editor that can be used to edit the stylesheet?

[mesnitu]

did you put the css inside
<style>
...css ....
</style>

[mesnitu]

or you could load the css for that product page, because it's very easy to mess code with ckeditor.

 p_??.css   // changes to a product's info page

?? = product ID

[jodean]

No.

Here is the table code Dave gave me and the CSS code

div class="table" id="results">
<div class='theader'>
<div class='table_header'>Header One</div>
<div class='table_header'>Header Two</div>
<div class='table_header'>Header Three</div>
<div class='table_header'>Header Four</div>
</div>
<div class='table_row'>
<div class='table_small'>
<div class='table_cell'>Header One</div>
<div class='table_cell'>-1.2726</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Two</div>
<div class='table_cell'>0.1311</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Three</div>
<div class='table_cell'>-0.4782</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Four</div>
<div class='table_cell'>-0.9919</div>
</div>
</div>
<div class='table_row'>
<div class='table_small'>
<div class='table_cell'>Header One</div>
<div class='table_cell'>-0.89</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Two</div>
<div class='table_cell'>0.7986</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Three</div>
<div class='table_cell'>0.876</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Four</div>
<div class='table_cell'>0.498</div>
</div>
</div>
<div class='table_row'>
<div class='table_small'>
<div class='table_cell'>Header One</div>
<div class='table_cell'>-1.1669</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Two</div>
<div class='table_cell'>0.4949</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Three</div>
<div class='table_cell'>-0.7113</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Four</div>
<div class='table_cell'>0.434</div>
</div>
</div>
<div class='table_row'>
<div class='table_small'>
<div class='table_cell'>Header One</div>
<div class='table_cell'>0.1996</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Two</div>
<div class='table_cell'>-0.7693</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Three</div>
<div class='table_cell'>1.974</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Four</div>
<div class='table_cell'>-0.959</div>
</div>
</div>
<div class='table_row'>
<div class='table_small'>
<div class='table_cell'>Header One</div>
<div class='table_cell'>-1.5998</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Two</div>
<div class='table_cell'>-0.1149</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Three</div>
<div class='table_cell'>1.3888</div>
</div>
<div class='table_small'>
<div class='table_cell'>Header Four</div>
<div class='table_cell'>-0.0689</div>
</div>
</div>
</div>

and here is the CSS code Dave gave me

.table {
display: table;
text-align: center;
width: 60%;
margin: 10% auto 0;
border-collapse: separate;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}

.table_row {
display: table-row;
}

.theader {
display: table-row;
}

.table_header {
display: table-cell;
border-bottom: #ccc 1px solid;
border-top: #ccc 1px solid;
background: #bdbdbd;
color: #e5e5e5;
padding-top: 10px;
padding-bottom: 10px;
font-weight: 700;
}

.table_header:first-child {
border-left: #ccc 1px solid;
border-top-left-radius: 5px;
}

.table_header:last-child {
border-right: #ccc 1px solid;
border-top-right-radius: 5px;
}

.table_small {
display: table-cell;
}

.table_row > .table_small > .table_cell:nth-child(odd) {
display: none;
background: #bdbdbd;
color: #e5e5e5;
padding-top: 10px;
padding-bottom: 10px;
}

.table_row > .table_small > .table_cell {
padding-top: 3px;
padding-bottom: 3px;
color: #5b5b5b;
border-bottom: #ccc 1px solid;
}

.table_row > .table_small:first-child > .table_cell {
border-left: #ccc 1px solid;
}

.table_row > .table_small:last-child > .table_cell {
border-right: #ccc 1px solid;
}

.table_row:last-child > .table_small:last-child > .table_cell:last-child {
border-bottom-right-radius: 5px;
}

.table_row:last-child > .table_small:first-child > .table_cell:last-child {
border-bottom-left-radius: 5px;
}

.table_row:nth-child(2n+3) {
background: #e9e9e9;
}

@media screen and (max-width: 900px) {
.table {
width: 90%
}
}

@media screen and (max-width: 650px) {
.table {
display: block;
}
.table_row:nth-child(2n+3) {
background: none;
}
.theader {
display: none;
}
.table_row > .table_small > .table_cell:nth-child(odd) {
display: table-cell;
width: 50%;
}
.table_cell {
display: table-cell;
width: 50%;
}
.table_row {
display: table;
width: 100%;
border-collapse: separate;
padding-bottom: 20px;
margin: 5% auto 0;
text-align: center;
}
.table_small {
display: table-row;
}
.table_row > .table_small:first-child > .table_cell:last-child {
border-left: none;
}
.table_row > .table_small > .table_cell:first-child {
border-left: #ccc 1px solid;
}
.table_row > .table_small:first-child > .table_cell:first-child {
border-top-left-radius: 5px;
border-top: #ccc 1px solid;
}
.table_row > .table_small:first-child > .table_cell:last-child {
border-top-right-radius: 5px;
border-top: #ccc 1px solid;
}
.table_row > .table_small:last-child > .table_cell:first-child {
border-right: none;
}
.table_row > .table_small > .table_cell:last-child {
border-right: #ccc 1px solid;
}
.table_row > .table_small:last-child > .table_cell:first-child {
border-bottom-left-radius: 5px;
}
.table_row > .table_small:last-child > .table_cell:last-child {
border-bottom-right-radius: 5px;
}
}

[davewest]

I added the code using CK Editor4 from CK Source to put the table code in the product desciption and used Note Pad++ to put the CSS code in the responsive stylesheet.css file. The stylesheet.css code looks like it is not used to style the table. Is CKEditor the only editor that can be used to edit the stylesheet?

I use gEdit for everything, php, css, html c+ and more except for ML, that I use an assembler... Such is Linux... in my MS days, NP++ was the best... The page I sent you to is basically a learning tool.. How you pick to use is up to you... CSS goes into a file named product_info.css, CK well format code which does not work for creating your own, thus the text editor within the admin product info page or CK source side. Copy the CSS with note pad into a text file, no style tags are needed... '<style>' save in your template folder CSS with the name of product_info.css and it well only get used on product info pages.. If you want it on other pages, then create a text file with a name starting with stylesheet... as stylesheet_mythings.css and it well load with every page...

One thing to think about... table for layout formatting a page is old school.. tables for lists of info, is still acceptable and responsive if done right. If all you are doing is creating a list of sizes, colors so on, CK has a table button use it.

I use this responsive div table design for complicated tables like my shopping cart layout where a standard table layout would not work.

[jodean]

Dave,

Perfect info. It worked.

Every time I talk about using tables i am told I need to stop using tables and start learning how to use DIV in my website.

How about giving me your opinion?

How does zencart choose which CSS to use? Naming it product_info.css was the trick.

[davewest]

Dave,

Perfect info. It worked.

Every time I talk about using tables i am told I need to stop using tables and start learning how to use DIV in my website.

How about giving me your opinion?

How does zencart choose which CSS to use? Naming it product_info.css was the trick.

Using tables for layout is no longer needed due to advancements in CSS and html5, but tables are good for organizing tabular information and lists basically what they was meant for...

FAQ's are good https://www.zen-cart.com/content.php...eet-(a-primer)
Wiki is better.. https://www.zen-cart.com/wiki/index....Per-Page-Rules

Lots of good info in that top menu bar....