如何使表格內的內容（Fusion Chart LED Gauge Chart）具有響應性？

Question

我有要求，其中我需要在表格內顯示3個圖表，每個TD中的每個圖表。

請注意，表格是可調整大小的，每個TD內的圖表都有響應（至少寬度方向）。目前在小提琴中，通過增加輸出窗口，表格可以重新調整大小，但其內部的圖表不會被調整大小。我想Widget是相稱的TD高度和寬度

我不想用JS實現它。它可以使用CSS/Bootstrap來完成嗎？

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> 

下面是我的樣機：

Fiddle

Answer 1

這裏是一個變通，以滿足您的要求。

FusionCharts容器的寬度和高度可以百分比形式提供（％）你可以試試這個。

<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

答案中的