如何水平設置高位表和表格？

Question

這是我highchart是什麼樣子ATM

我還挺希望圖表是在右側，而該表在左邊

，這是我的html：

<div id="words" style="width:70%;float:left;"> 
<table border="1" class="highchart" data-graph-container-before="1" data-graph-type="column"> 
    <thead> 
     <tr> 
      <th>Word</th> 
      <th>Count</th> 
     </tr> 
    </thead> 
    <tbody> 

       <tr> 
        <td>icon</td> 
        <td>12</td> 
       </tr> 
       <tr> 
        <td>text</td> 
        <td>12</td> 
       </tr> 
       <tr> 
        <td>your</td> 
        <td>9</td> 
       </tr> 
       <tr> 
        <td>post</td> 
        <td>6</td> 
       </tr> 
       <tr> 
        <td>document</td> 
        <td>5</td> 
       </tr> 
       <tr> 
        <td>with</td> 
        <td>5</td> 
       </tr> 
       <tr> 
        <td>parentNode</td> 
        <td>4</td> 
       </tr> 
       <tr> 
        <td>email</td> 
        <td>4</td> 
       </tr> 
       <tr> 
        <td>com&quot;</td> 
        <td>4</td> 
       </tr> 
       <tr> 
        <td>googletag</td> 
        <td>3</td> 
       </tr> 
    </tbody> 
</table> 

我該怎麼做才能達到這樣的效果？

Answer 1

如果您可以更改HTML，那麼只需在Highcharts容器之前放置表格並設置適當的樣式（float，width）即可。例如，您也可以使用兩個div：http://jsfiddle.net/68qdew8g/

<div style="float: left; width: 30%;"> 
    <table border="1" class="highchart" data-graph-container-before="1" data-graph-type="column"> 
     ... 
    </table> 
</div> 
<div id="words" style="width:70%;float:left;"></div>