Wie mache ich Inhalt (Fusion Chart LED Gauge Chart) in Tabelle um reagieren zu können?

Question

Ich habe Anforderung, wobei ich 3 Diagramm innerhalb der Tabelle, jedes Diagramm in jedem TD zeigen muss.

Beachten Sie, dass die Tabelle re-sizeable ist, die Tabelle in jedem TD reagiert (zumindest in der Breite). Derzeit in der Geige Tabelle ist re-sizeable durch Erhöhung der Ausgabefenster, aber Diagramm darin wird nicht in der Größe geändert. Ich möchte das Widget proportional zu der TD Höhe und Breite

Ich möchte es nicht mit JS erreichen. Kann es nur mit CSS/Bootstrap gemacht werden?

HTML:

<table class="table table-bordered"> 
<thead> 
     <tr> 
     <th></th> 
     <th>Device</th> 
     <th>CPU</th> 
     <th>Memory</th> 
     <th>Temp</th> 
     </tr> 
</thead> 
<tbody> 
     <tr> 
     <td class="icn"></td> 
     <td class="device">Note 2</td> 
     <td class="fchart" id="chart-container"></td> 
     <td class="fchart" id="chart-container1"></td> 
     <td class="fchart" id="chart-container2"></td> 
     </tr> 
     <tr> 
     <td class="icn"></td> 
     <td class="device">Moto G</td> 
     <td class="fchart" id="chart-container3"></td> 
     <td class="fchart" id="chart-container4"></td> 
     <td class="fchart" id="chart-container5"></td> 
     </tr> 
     <tr> 
     <td class="icn"></td> 
     <td class="device">Redmi Note 4</td> 
     <td class="fchart" id="chart-container6"></td> 
     <td class="fchart" id="chart-container7"></td> 
     <td class="fchart" id="chart-container8"></td> 
     </tr> 
</tbody> 

Unten ist mein Mockup:

Fiddle

Answer 1

Hier ist eine Arbeit, um Ihre Anforderung zu erfüllen.

FusionCharts Container Breite und Höhe können in Prozent (%) zur Verfügung gestellt werden Sie können dies versuchen.

<table class="table table-bordered"> 
<thead> 
     <tr> 
     <th></th> 
     <th>Device</th> 
     <th>CPU</th> 
     <th>Memory</th> 
     <th>Temp</th> 
     </tr> 
</thead> 
<tbody> 
      <tr> 
      <td class="icn"></td> 
      <td class="device">Note 2</td> 
      <td > 
       <div class="fchart" id="chart-container"></div> 
      </td> 
      <td> 
       <div class="fchart" id="chart-container1"></div> 
      </td> 
      <td> 
       <div class="fchart" id="chart-container2"></div> 
      </td> 
      </tr> 
      <tr> 
      <td class="icn"></td> 
      <td class="device">Moto G</td> 
      <td> 
       <div class="fchart" id="chart-container3"></div> 
      </td> 
      <td> 
       <div class="fchart" id="chart-container4"></div> 
      </td> 
      <td> 
       <div class="fchart" id="chart-container5"></div> 
      </td> 
      </tr> 
      <tr> 
      <td class="icn"></td> 
      <td class="device">Redmi Note 4</td> 
      <td> 
       <div class="fchart" id="chart-container6"></div> 
      </td> 
      <td> 
       <div class="fchart" id="chart-container7"></div> 
      </td> 
      <td> 
       <div class="fchart" id="chart-container8"></div> 
      </td> 
      </tr> 
    </tbody> 
</table> 

Fiddle