Docs

[mathijs84]

Hi guys,

I am making a responsive table on nvision.work-planning.com

Maybe also cool for other X themers 🙂

Anyway i used the code from here: http://codepen.io/SitePoint/pres/jPXjJK

Changed it a little because i only need to columns.

here is my current html:

<table>
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th>Native</th>
      <th><img src="http://nvision.work-planning.com/wp-content/uploads/2016/05/nVision_red_med_strak-small.png" alt="Logo nVision"></th>
    </tr>
  </thead>
  
<tbody>
    <tr>
      <td>MAKKELIJK BREDE INZET MET DEZELFDE COPY</td>
      <td>&mdash;</td>
      <td><b class="check">✔</b></td>
     </tr>
    <tr>
      <td>FLEXIBELE PRICING</td>
     <td>&mdash;</td>
      <td><b class="check">✔</b></td>
    </tr>
    <tr>
      <td>UITGEBREIDE TARGETING</td>
           <td>&mdash;</td>
      <td><b class="check">✔</b></td>
    </tr>
    <tr>
      <td>REAL-TIME CONTENT AANPASSEN</td>
            <td>&mdash;</td>
      <td><b class="check">✔</b></td>
    </tr>
    <tr>
      <td>INZET OBV DATA</td>
      <td>&mdash;</td>
      <td><b class="check">✔</b></td>
    </tr>
      <tr>
      <td>ON DEMAND AAN EN UIT</td>
      <td>&mdash;</td>
      <td><b class="check">✔</b></td>
    </tr>
 <tr>
      <td>RETARGETING</td>
      <td>&mdash;</td>
      <td><b class="check">✔</b></td>
    </tr>
 <tr>
      <td>OPTIMALISEREN</td>
      <td>&mdash;</td>
      <td><b class="check">✔</b></td>
    </tr>
 <tr>
      <td>VASTE/EXCLUSIEVE PLAATSING</td>
      <td><b class="check">✔</b></td>
      <td><b class="check">✔</b></td>
    </tr>
 <tr>
      <td>PLAATSING OP IMPRESSIES</td>
      <td>&mdash;</td>
      <td><b class="check">✔</b></td>
    </tr>
 <tr>
      <td>ZELF AAN DE KNOPPEN?</td>
      <td>&mdash;</td>
      <td><b class="check">✔</b></td>
    </tr>
  </tbody>
</table>

And the CSS

//Table mobile//

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  padding: 0px;
}h1 {
  text-align: center;
}

table {
  width: 100%;
}

td,
th {
  text-align: center;
  border: solid 1px #ccc;
  font-size: 18px;
  padding: 6px;
  word-wrap: break-word;
}

td {
  color: red;
  font-weight: bold;
}

.check {
  color: limegreen;
  font-size: 20px;
}

th:first-child,
td:first-child {
  font-weight: bold;
  color: black
    ;
}

@media screen and (max-width: 768px) {
  .check {
    color: limegreen;
    font-size: 20px;
  }
  tr {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }
  td,
  th {
    display: block;
    width: 33.333333333333%;
    font-size: 20px;
  }
  th:first-child,
  td:first-child {
    background: #efefef;
    width: 100%;
  }
  th:first-child {
    display: none;
  }
}

.p {
  text-align: center;
  font-size: 13px;
  padding-top: 130px;
}
}

So i changed it a little but i want to change it a little more.

1: In the code the checkmarks are color Limegreen, but it doesnt work. I can change the font size but the color remains black. So i would like the color of the checks green and the – (minus) in red.

2: the original table had 3 products. Can i make the room with the descriptions a little smaller??

3: maybe 2 will fix this but the logo gets a little small when you go to mobile view.

4: The minus and checks should be directly underneath the headings Native and Nvision. they are not centered it seems, in the example link above it is centered.

Many many thanks!!

[Darshana]

Hi there,

Thanks for writing in! We don’t usually provide assistance for custom development inquiries, however the following instructions may help you.

#1. Add unique class for the minus signs.

<td class="my-red-sign">&mdash;</td>

Then add the coresponding CSS rules into your Customizer, Custom > CSS area.

.my-red-sign {
    color: #ff0000;
}

With regard to checkboxes, it seems that you’re using a black color PNG file (https://s.w.org/images/core/emoji/72×72/2714.png). You need to use a different color PNG file and use that path.

#2. You can assign a class to your table:
<table class="my-table">

Then add the following CSS rules.

.my-table {
    margin: 0 auto;
    width: 80%;
}

#3. Let us know if the above code fixed your logo issue.

#4. Assign the class center-text to those td elements that you want the content inside to be centered.
Example
<td class="my-red-sign center-text">&mdash;</td>

Hope that helps.

[mathijs84]

#1 I did that for the first minus. Doesnt seem to work.

Strangely they are red in Cornerstone (also the other symbols which don’t have the new class).

– As for the checkboxes. I don’t use a png, but i use this code ✔ I changed all of them.

COde is <td><b class=”check”>✔</b></td>

CSS for check class is

.check {
color: #22FF38;
font-size: 20px;
}

The font size responds, but the color doesnt

[Christopher]

Hi there,

Instead of following code :

<img draggable="false" class="emoji" alt="✔" src="https://s.w.org/images/core/emoji/72x72/2714.png">

Use icon shortcode :

[x_icon type="check" style="color:green;"]

Hope it helps.

[mathijs84]

Yup great,

And for the first part?? About the red minuses

#1 I did that for the first minus. Doesnt seem to work.

Strangely they are red in Cornerstone (also the other symbols which don’t have the new class).

[Thai]

Please try with this shortcode:

[x_icon type="minus" style="color:red;"]

Hope it helps 🙂

[mathijs84]

Yup, great thanks.

Only two issues left:

1: i want the checks and minused alligned underneath the center of the rowname.

2: the Nvision logo is still to small on mobile. I followed instructions for table width bot it didn’t help

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

th {
    text-align: center !important;
}
td i {
    display: block !important;
}
@media (max-width:480px){th img {
    width: 150px !important;
}
}

Hope it helps.

[mathijs84]

Thanks!!

Only logo is still to small.

It looks like the table row has to little room ?

Edit: Centered works in Cornerstone but not on screen?

[Joao]

Hi There,

Please try changing this part of your code:

     <th><img src="http://nvision.work-planning.com/wp-content/uploads/2016/05/nVision_red_med_strak-small.png" alt="Logo nVision"></th>

for this

     <th><img style="min-width: 50px;" src="http://nvision.work-planning.com/wp-content/uploads/2016/05/nVision_red_med_strak-small.png" alt="Logo nVision"></th>

Let us know how it goes.

Thanks,

Joao

[mathijs84]

Thanks that’s it..

One thing remaining was this:

The code to make the checks and minuses Centered works in Cornerstone but not on the site

[Christopher]

Hi there,

Please find this code and remove extra curly bracket :

/* push down site by height of menu */
body.page { margin-top:0px !important; }
}

Did you add the code provided in https://community.theme.co/forums/topic/responsive-comaprising-table/#post-995333 ?

If you added the code and still doesn’t change icons alignment, please provide us with login credentials.

Thanks.

[mathijs84]

This reply has been marked as private.

[Paul R]

Hi,

Thank you for providing your login credentials.

To fix it, you can add this under Custom > Edit Global CSS in the Customizer.

.my-table table th, .my-table table td {
    text-align: center;
}

.my-table table td:first-child {
    text-align: left;
}

Hope that helps

[mathijs84]

yes sir many thanks!!

[Author]

Posts