How to change responsive css file?

[jodean]

I need to add the following CSS code for my Div Table but cant seem to change the correct file. Does anyone know which CSS file this code needs to be inserted in for responsive?

"div.blueTable { border: 1px solid #1C6EA4;
background-color: #EEEEEE;
width: 100%;
text-align: left;
border-collapse: collapse;
}
.divTable.blueTable .divTableCell, .divTable.blueTable .divTableHead {
border: 1px solid #AAAAAA;
padding: 3px 2px;
}
.divTable.blueTable .divTableBody .divTableCell {
font-size: 13px;
}
.divTable.blueTable .divTableRow:nth-child(even) {
background: #D0E4F5;
}
.divTable.blueTable .divTableHeading {
background: #1C6EA4;
background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
border-bottom: 2px solid #444444;
}
.divTable.blueTable .divTableHeading .divTableHead {
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
border-left: 2px solid #D0E4F5;
}
.divTable.blueTable .divTableHeading .divTableHead:first-child {
border-left: none;
}


.blueTable .tableFootStyle {
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
background: #D0E4F5;
background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
border-top: 2px solid #444444;
}
.blueTable .tableFootStyle {
font-size: 14px;
}
.blueTable .tableFootStyle .links {
text-align: right;
}
.blueTable .tableFootStyle .links a{
display: inline-block;
background: #1C6EA4;
color: #FFFFFF;
padding: 2px 8px;
border-radius: 5px;
}
.blueTable.outerTableFooter {
border-top: none;
}
.blueTable.outerTableFooter .tableFootStyle {
padding: 3px 5px;
}
/* DivTable.com */
.divTable{ display: table; }
.divTableRow { display: table-row; }
.divTableHeading { display: table-header-group;}
.divTableCell, .divTableHead { display: table-cell;}
.divTableHeading { display: table-header-group;}
.divTableFoot { display: table-footer-group;}
.divTableBody { display: table-row-group;}"

[lindasdd]

What template are you using? (Some templates don't have a responsive css file so you will need to make one or add to your existing.) Where you need to put the above code though is somewhere in your stylesheet inside a responsive section.

For instance in your main stylesheet you might have this and you would put all your CSS code inside the brackets. Responsive started to make sense to me when I realized it is just sort of CSS selectors inside of CSS selectors. You are saying, under certain device parameters (type of screen and size), use certain CSS code:

@media only screen and (orientation:landscape) {}

I'm going to assume your CSS is incorrect. Rarely if ever have I seen an id or class that is actually called 'div'. Unless you created a custom one called that. Although then I see divtable.com at the end so I'm guessing you are trying to use something cool you found on that site.

Can you provide a link to your site, a link to what from divtable.com you are attempting to utilize, and a little more background on what you are trying to do (because there may be an easier solution)?

[dbltoe]

Looks like you may have taken a trip over to divtable.com and their table-style.

First of all, as lindasdd mentioned, your css does not match their css code. The div prefix is the giveaway.

Hopefully, you are aware that tables have been persona non grata for several years UNLESS they are specifically presenting data. That's why they also provide a table to div converter.

The posting tips asks questions of the poster so we can be of more help. In this case, you may find something much simpler is already available. So, a little more on the need for a table would help us.

[jodean]

Here is the table code and css that i am trying to implement in one of my products in the description.

Product table description 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 for the table

.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;
}
}