2013-06-26 46 views
0

我有過量的內容,溢出。表格自動調整寬度到它的內容

我想實現的目標是讓表格根據每個td的內容重新調整大小。

例子: fiddle

通俗地說,我試圖讓這樣的日期將不會被分成2行。

編輯:這隻發生在鉻。 Firefox使它們很好。

HTML摘錄

<div class="row-fluid"> 
    <div class="span10 overflow-table"> 
     <table class="table table-bordered table-condensed"> 
      <thead> 
       <tr> 
        <th>Date</th> 
        <td>2012-05-21</td> 
        <td>2012-05-22</td> 
        <td>2012-05-23</td> 
        <td>2012-05-24</td> 
        <td>2012-05-25</td> 
        <td>2012-05-26</td> 
        <td>2012-05-27</td> 
        <td>2012-05-28</td> 
        <td>2012-05-29</td> 
        <td>2012-05-30</td> 
        <td>2012-05-31</td> 
        <td>2012-06-01</td> 
        <td>2012-06-02</td> 
        <td>2012-09-28</td> 
        <td>2012-09-30</td> 
        <td>2012-10-04</td> 
        <td>2012-10-06</td> 
        <td>2012-10-08</td> 
        <td>2012-10-09</td> 
        <td>2012-10-10</td> 
        <td>2012-10-16</td> 
        <td>2012-10-18</td> 
        <td>2012-10-20</td> 
        <td>2012-10-23</td> 
        <td>2012-10-25</td> 
        <td>2012-10-26</td> 
        <td>2012-10-27</td> 
        <td>2012-10-29</td> 
        <td>2012-10-31</td> 
        <td>2012-11-01</td> 
        <td>2012-11-04</td> 
        <td>2012-11-07</td> 
        <td>2012-11-09</td> 
        <td>2012-11-10</td> 
        <td>2012-11-12</td> 
        <td>2012-11-15</td> 
        <td>2012-11-21</td> 
        <td>2012-11-25</td> 
        <td>2012-12-02</td> 
        <td>2012-12-04</td> 
        <td>2012-12-05</td> 
        <td>2012-12-07</td> 
        <td>2012-12-08</td> 
        <td>2012-12-11</td> 
        <td>2012-12-12</td> 
        <td>2012-12-14</td> 
        <td>2012-12-17</td> 
        <td>2012-12-18</td> 
        <td>2012-12-19</td> 
        <td>2012-12-20</td> 
        <td>2012-12-22</td> 
        <td>2012-12-24</td> 
        <td>2012-12-25</td> 
        <td>2012-12-26</td> 
        <td>2012-12-27</td> 
        <td>2012-12-28</td> 
        <td>2012-12-29</td> 
        <td>2012-12-30</td> 
        <td>2013-01-01</td> 
        <td>2013-01-02</td> 
        <td>2013-01-05</td> 
        <td>2013-01-06</td> 
        <td>2013-01-07</td> 
        <td>2013-01-08</td> 
        <td>2013-01-09</td> 
        <td>2013-01-10</td> 
        <td>2013-01-11</td> 
        <td>2013-01-12</td> 
        <td>2013-01-14</td> 
        <td>2013-01-16</td> 
        <td>2013-01-19</td> 
        <td>2013-01-21</td> 
        <td>2013-01-22</td> 
        <td>2013-01-25</td> 
        <td>2013-01-27</td> 
        <td>2013-01-30</td> 
        <td>2013-01-31</td> 
        <td>2013-02-05</td> 
        <td>2013-02-06</td> 
        <td>2013-02-10</td> 
        <td>2013-02-17</td> 
        <td>2013-02-18</td> 
        <td>2013-02-19</td> 
        <td>2013-02-23</td> 
        <td>2013-02-25</td> 
        <td>2013-02-28</td> 
        <td>2013-03-01</td> 
        <td>2013-03-03</td> 
        <td>2013-03-05</td> 
        <td>2013-03-06</td> 
        <td>2013-03-11</td> 
        <td>2013-03-13</td> 
        <td>2013-03-16</td> 
        <td>2013-03-22</td> 
        <td>2013-03-23</td> 
        <td>2013-03-24</td> 
        <td>2013-03-25</td> 
        <td>2013-03-26</td> 
        <td>2013-03-27</td> 
        <td>2013-03-28</td> 
        <td>2013-03-29</td> 
        <td>2013-03-30</td> 
        <td>2013-03-31</td> 
        <td>2013-04-01</td> 
        <td>2013-04-02</td> 
        <td>2013-04-03</td> 
        <td>2013-04-04</td> 
        <td>2013-04-05</td> 
        <td>2013-04-06</td> 
        <td>2013-04-07</td> 
        <td>2013-04-09</td> 
        <td>2013-04-11</td> 
        <td>2013-04-12</td> 
        <td>2013-04-13</td> 
        <td>2013-04-14</td> 
        <td>2013-04-18</td> 
        <td>2013-04-19</td> 
        <td>2013-04-21</td> 
        <td>2013-04-26</td> 
        <td>2013-04-27</td> 
        <td>2013-04-29</td> 
        <td>2013-05-06</td> 
        <td>2013-05-11</td> 
        <td>2013-05-12</td> 
        <td>2013-05-14</td> 
        <td>2013-05-15</td> 
        <td>2013-05-16</td> 
        <td>2013-05-17</td> 
        <td>2013-05-18</td> 
        <td>2013-05-20</td> 
        <td>2013-05-25</td> 
        <td>2013-05-29</td> 
        <td>2013-05-31</td> 
        <td>2013-06-01</td> 
        <td>2013-06-04</td> 
        <td>2013-06-05</td> 
        <td>2013-06-10</td> 
        <td>2013-06-13</td> 
       </tr> 
      </thead> 

     </table> 
    </div> 
</div> 
+0

可以使用jQuery嗎? – caramba

+0

我知道如何使用jQuery來做到這一點。但是,我試圖尋找一個CSS解決方案。 –

+0

在兩行中的日期制動器在哪個瀏覽器中?在您的jsFiddle中,當我在Firefox中查看它們時,它們不會。 – Gimmy

回答

0

試試這個

table td, table th { 
    white-space:nowrap; 
} 

Demo

相關問題