CSS trade table price list

[lee]

lee

April 5, 2016 at 7:03 pm

css issue trade prices on marquee matting website table. I have used the same. Ive used the custom css and .js on my 🙂 SEO expert website here without issue, when a device with smaller screen and/or screen rotation (including ipad) is used to view the page as per fitefox and chrome inspect for device screen sizes and rotation Looked here for css version AND here for resolution for IPAD css display and finaly css borders.

CSS

table {
border-collapse: collapse;
}

table, td, th {
border: 1px solid #ccc;
}

@media only screen and (device-width: 600px) and (device-height: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
table {width:100%;}
thead {display: none;}
tr:nth-of-type(2n) {background-color: inherit;}
tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;}
tbody td {display: block; text-align:center;}
tbody td:before {
content: attr(data-th);
display: block;
text-align:center;
}
}

And

.js
<script>
var headertext = [];
var headers = document.querySelectorAll("thead");
var tablebody = document.querySelectorAll("tbody");

for (var i = 0; i < headers.length; i++) {
headertext[i]=[];
for (var j = 0, headrow; headrow = headers[i].rows[0].cells[j]; j++) {
var current = headrow;
headertext[i].push(current.textContent);
}
}

for (var h = 0, tbody; tbody = tablebody[h]; h++) {
for (var i = 0, row; row = tbody.rows[i]; i++) {
for (var j = 0, col; col = row.cells[j]; j++) {
col.setAttribute("data-th", headertext[h][j]);
}
}
}
</script>

as per instructions of How to Create Responsive Tables in WordPress

however im having an issue with screen size.

I ve tested with chrome inspect and cant work out the issue.

As a side note the colapsed header menu in my customised heade with shopping cart displays incorectly. (im wondering if this is related?) or is it related to the use of a side bar on this page?

supporting image1
supporting image2

the only difference between the sugested table layout and my own is

<table class="table table-bordered table-hover table-condensed">

<table class="table table-bordered table-hover table-condensed"><thead><tr><th title="Field #1">Item</th><th title="Field #2">Price</th><th title="Field #3">Pack size</th><th title="Field #4">Length</th><th title="Field #5">Width</th><th title="Field #6">Weight</th><th title="Field #7">Mpn</th><th title="Field #8">Weave</th><th title="Field #9">Yarns</th><th title="Field #10">Colour</th></tr></thead><tbody><tr><td data-th="Item">Coir Matting</td><td data-th="Price">£200.00</td><td data-th="Pack size">Single</td><td data-th="Length">12.2m</td><td data-th="Width">1.8m</td><td align="right" data-th="Weight">40.00</td><td data-th="Mpn">12-2m-MM</td><td data-th="Weave">Herringbone</td><td data-th="Yarns">Anjengo/Vycome</td><td data-th="Colour">Bright/Natural</td></tr><tr><td data-th="Item">Coir Matting</td><td data-th="Price">£370.00</td><td data-th="Pack size">Single</td><td data-th="Length">20.1m</td><td data-th="Width">2m</td><td align="right" data-th="Weight">60.00</td><td data-th="Mpn">20-1m-MM</td><td data-th="Weave">Panama</td><td data-th="Yarns">Vycome</td><td data-th="Colour">Bright/Natural</td></tr><tr><td data-th="Item">Coir Mat</td><td data-th="Price">£55.00</td><td data-th="Pack size">Single</td><td data-th="Length">3.7m</td><td data-th="Width">1.85m</td><td align="right" data-th="Weight">9.68</td><td data-th="Mpn">3-7m-HM</td><td data-th="Weave">Panama</td><td data-th="Yarns">Vycome</td><td data-th="Colour">Bright/Natural</td></tr><tr><td data-th="Item">Coir Mat</td><td data-th="Price">£72.50</td><td data-th="Pack size">Single</td><td data-th="Length">4.3m</td><td data-th="Width">2.15m</td><td align="right" data-th="Weight">13.07</td><td data-th="Mpn">4-3m-HM</td><td data-th="Weave">Panama</td><td data-th="Yarns">Vycome</td><td data-th="Colour">Bright/Natural</td></tr><tr><td data-th="Item">Coir Mat</td><td data-th="Price">£92.50</td><td data-th="Pack size">Single</td><td data-th="Length">4.9m</td><td data-th="Width">2.45m</td><td align="right" data-th="Weight">16.97</td><td data-th="Mpn">4-9m-HM</td><td data-th="Weave">Panama</td><td data-th="Yarns">Vycome</td><td data-th="Colour">Bright/Natural</td></tr><tr><td data-th="Item">Coir Mat</td><td data-th="Price">£115.00</td><td data-th="Pack size">Single</td><td data-th="Length">5.55m</td><td data-th="Width">2.75m</td><td align="right" data-th="Weight">21.38</td><td data-th="Mpn">5-5m-HM</td><td data-th="Weave">Panama</td><td data-th="Yarns">Vycome</td><td data-th="Colour">Bright/Natural</td></tr><tr><td data-th="Item">Coir Mat</td><td data-th="Price">£140.00</td><td data-th="Pack size">Single</td><td data-th="Length">6.1m</td><td data-th="Width">3.05m</td><td align="right" data-th="Weight">26.30</td><td data-th="Mpn">6-1m-HM</td><td data-th="Weave">Panama</td><td data-th="Yarns">Vycome</td><td data-th="Colour">Bright/Natural</td></tr><tr><td data-th="Item">Coir Mats x 2</td><td data-th="Price">£110.00</td><td data-th="Pack size">Pair</td><td data-th="Length">3.7m</td><td data-th="Width">1.85m</td><td align="right" data-th="Weight">19.35</td><td data-th="Mpn">3-7m-P-HM</td><td data-th="Weave">Panama</td><td data-th="Yarns">Vycome</td><td data-th="Colour">Bright/Natural</td></tr><tr><td data-th="Item">Coir Mats x 2</td><td data-th="Price">£145.00</td><td data-th="Pack size">Pair</td><td data-th="Length">4.3m</td><td data-th="Width">2.15m</td><td align="right" data-th="Weight">26.14</td><td data-th="Mpn">4-3m-P-HM</td><td data-th="Weave">Panama</td><td data-th="Yarns">Vycome</td><td data-th="Colour">Bright/Natural</td></tr><tr><td data-th="Item">Coir Mats x 2</td><td data-th="Price">£185.00</td><td data-th="Pack size">Pair</td><td data-th="Length">4.9m</td><td data-th="Width">2.45m</td><td align="right" data-th="Weight">33.94</td><td data-th="Mpn">4-9m-P-HM</td><td data-th="Weave">Panama</td><td data-th="Yarns">Vycome</td><td data-th="Colour">Bright/Natural</td></tr><tr><td data-th="Item">Coir Mats x 2</td><td data-th="Price">£230.00</td><td data-th="Pack size">Pair</td><td data-th="Length">5.55m</td><td data-th="Width">2.75m</td><td align="right" data-th="Weight">42.77</td><td data-th="Mpn">5-5m-P-HM</td><td data-th="Weave">Panama</td><td data-th="Yarns">Vycome</td><td data-th="Colour">Bright/Natural</td></tr><tr><td data-th="Item">Coir Mats x 2</td><td data-th="Price">£280.00</td><td data-th="Pack size">Pair</td><td data-th="Length">6.1m</td><td data-th="Width">3.05m</td><td align="right" data-th="Weight">52.60</td><td data-th="Mpn">6-1m-P-HM</td><td data-th="Weave">Panama</td><td data-th="Yarns">Vycome</td><td data-th="Colour">Bright/Natural</td></tr></tbody></table>

instead of

<table>

i have some custome .css in the head an the header is modified

sorry for long rambling post,
regards, lee

also any channce of Add arrow at the bottom of slider.

many thanks Lee