【问题标题】:Table to autoadjust width to it's content表格自动调整其内容的宽度
【发布时间】:2013-06-23 06:16:45
【问题描述】:

我的内容过多,溢出了。

我想要实现的是让表格根据每个 td 的内容重新调整它的大小。

示例: fiddle

通俗地说,我试图让日期不会分成两行。

编辑:这只发生在 chrome 中。 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>

【问题讨论】:

  • 我知道如何使用 jQuery。不过,我正在尝试寻找 CSS 解决方案。
  • 在什么浏览器中,日期会分成两行?在您的 jsFiddle 中,当我在 Firefox 中查看它们时,它们不会。
  • 哦,对了。我忘了提到它只发生在 chrome 中。 Firefox 可以很好地呈现它们。好电话
  • 谢谢。吉米。我想我看错了方向。如果您可以添加答案,我会接受。

标签: html css html-table


【解决方案1】:

你可以使用CSS样式white-space:

white-space: nowrap;

【讨论】:

    【解决方案2】:

    试试这个

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

    Demo

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2011-03-22
      • 2014-03-05
      • 1970-01-01
      • 2012-10-13
      • 1970-01-01
      • 2020-07-15
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多