表空白：NOWRAP和一列需要溢出：隐藏

这里是我的布局（and Fiddle）：表空白：NOWRAP和一列需要溢出：隐藏

body { 
 
    font: 12px sans-serif; 
 
} 
 
#div1 { 
 
    width: 750px; 
 
    padding-top: 20px; 
 
    padding-bottom: 20px; 
 
    background-color: lime; 
 
} 
 
#table1 { 
 
    background-color: white; 
 
} 
 
#table1 th, #table1 td { 
 
    white-space: nowrap; 
 
} 
 
.class1 { 
 
    background-color: pink; 
 
} 
 
/* all background colors are for testing */

<div id="div1"> 
 
    <table id="table1"> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Col 1</th> 
 
     <th>Col 2</th> 
 
     <th>Fr<br/>10</th> 
 
     <th>Sa<br/>11</th> 
 
     <th>Su<br/>12</th> 
 
     <th>Mo<br/>13</th> 
 
     <th>Tu<br/>14</th> 
 
     <th>We<br/>15</th> 
 
     <th>Th<br/>16</th> 
 
     <th>Fr<br/>17</th> 
 
     <th>Sa<br/>18</th> 
 
     <th>Su<br/>19</th> 
 
     <th>Mo<br/>20</th> 
 
     <th>Tu<br/>21</th> 
 
     <th>We<br/>22</th> 
 
     <th>Th<br/>23</th> 
 
    </tr> 
 
    <tr> 
 
     <td class="class1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td> 
 
     <td>Click here</td> 
 
     <td>$100 - $300</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="class1">Vestibulum consequat dapibus nibh, ac bibendum turpis ornare ut.</td> 
 
     <td>Click here</td> 
 
     <td>$100 - $300</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="class1">Curabitur bibendum tellus id turpis fermentum eu fermentum sapien ornare.</td> 
 
     <td>Click here</td> 
 
     <td>$100 - $300</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="class1">Donec eu neque tortor, ornare viverra sapien.</td> 
 
     <td>Click here</td> 
 
     <td>$100 - $300</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="class1">Praesent ac leo justo, et tempus turpis.</td> 
 
     <td>Click here</td> 
 
     <td>$100 - $300</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="class1">Vestibulum hendrerit metus et mauris volutpat hendrerit.</td> 
 
     <td>Click here</td> 
 
     <td>$100 - $300</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="class1">Quisque consequat ante sit amet nibh ornare quis gravida sapien consectetur.</td> 
 
     <td>Click here</td> 
 
     <td>$100 - $300</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="class1">Maecenas at turpis ut libero volutpat mattis eget a mi.</td> 
 
     <td>Click here</td> 
 
     <td>$100 - $300</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="class1">Fusce id dui in justo porta gravida eu ac leo.</td> 
 
     <td>Click here</td> 
 
     <td>$100 - $300</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="class1">Vivamus in metus at purus congue lacinia.</td> 
 
     <td>Click here</td> 
 
     <td>$100 - $300</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="class1">Aliquam suscipit mauris vulputate odio adipiscing vitae semper odio varius.</td> 
 
     <td>Click here</td> 
 
     <td>$100 - $300</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="class1">Vestibulum accumsan nunc at magna facilisis gravida.</td> 
 
     <td>Click here</td> 
 
     <td>$100 - $300</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="class1">Pellentesque tempus nisi mauris, quis porttitor purus.</td> 
 
     <td>Click here</td> 
 
     <td>$100 - $300</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="class1">Fusce tincidunt elit condimentum tellus aliquet in ultrices augue aliquam.</td> 
 
     <td>Click here</td> 
 
     <td>$100 - $300</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="class1">Vestibulum faucibus mauris sit amet enim bibendum fringilla.</td> 
 
     <td>Click here</td> 
 
     <td>$100 - $300</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="class1">Nam in purus non sapien cursus mollis.</td> 
 
     <td>Click here</td> 
 
     <td>$100 - $300</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="class1">Proin pulvinar ligula quis nulla varius tincidunt.</td> 
 
     <td>Click here</td> 
 
     <td>$100 - $300</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="class1">Integer faucibus hendrerit velit, nec tempor velit auctor id.</td> 
 
     <td>Click here</td> 
 
     <td>$100 - $300</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="class1">Nunc iaculis ligula pulvinar elit suscipit in volutpat augue dictum.</td> 
 
     <td>Click here</td> 
 
     <td>$100 - $300</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="class1">Pellentesque id augue sit amet nibh luctus eleifend ut non urna.</td> 
 
     <td>Click here</td> 
 
     <td>$100 - $300</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="class1">Suspendisse et neque arcu, ac fermentum ligula.</td> 
 
     <td>Click here</td> 
 
     <td>$100 - $300</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="class1">Mauris sed mauris vitae nisi suscipit bibendum sit amet vitae quam.</td> 
 
     <td>Click here</td> 
 
     <td>$100 - $300</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="class1">Morbi sagittis lorem laoreet velit consectetur ac sodales enim pretium.</td> 
 
     <td>Click here</td> 
 
     <td>$100 - $300</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="class1">Proin mattis urna in velit viverra in vulputate sapien laoreet.</td> 
 
     <td>Click here</td> 
 
     <td>$100 - $300</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="class1">Sed condimentum urna in orci interdum eu consequat felis scelerisque.</td> 
 
     <td>Click here</td> 
 
     <td>$100 - $300</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="class1">Quisque non nunc et purus mattis dictum.</td> 
 
     <td>Click here</td> 
 
     <td>$100 - $300</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="class1">Duis dictum nibh sed leo hendrerit eget dapibus lacus hendrerit.</td> 
 
     <td>Click here</td> 
 
     <td>$100 - $300</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="class1">Nam vel leo justo, sed rhoncus sem.</td> 
 
     <td>Click here</td> 
 
     <td>$100 - $300</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="class1">Ut sed augue sit amet elit scelerisque suscipit.</td> 
 
     <td>Click here</td> 
 
     <td>$100 - $300</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="class1">Proin vulputate dui et sapien tristique quis placerat nunc accumsan.</td> 
 
     <td>Click here</td> 
 
     <td>$100 - $300</td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    </table> 
 
</div>

我想表以适应固定宽度的DIV中。所有单元格都有nowrap，所以我希望其中一列（用.class1标记）缩小，以便表格与外部div一样宽。我尝试设置overflow: hidden，但它没有奏效。如何在不对任何像素宽度进行硬编码的情况下获得理想的结果？

想要的结果是将所有东西都放在单线上（因此为nowrap），但是尽可能多地切掉一列（第一个）以使表格适合固定的宽度。

来源

2013-05-10 Salman A

我在您的html标记中看不到'class1' – Morpheus 2013-05-10 08:51:01

对不起，第一列应该应用'.class1'。更新的演示。 – 2013-05-10 09:24:27

看看@ user2319914例子 – Morpheus 2013-05-10 09:27:29

溢出隐藏只会表现。假设列有overflow:hidden集，以下行为将变得明显。

宽度设置宽度将强制列设置值或内容的宽度，以较大者为准。

最大宽度 设置最大宽度将强制列设置值或内容的大小，以较小者为准。

因此，您可能需要将宽度和最大宽度都设置为相同的值，如下所示：http://jsfiddle.net/vjfjd/7/。在我的示例中，我只设置了第一列的宽度，但理想情况下，您希望向所有列添加一个类并明确设置每列的宽度。

显然希望表以适应容器，它让你三个选项的大小：

手动列宽设置，并改变他们，如果你决定改变容器的宽度。
使用类似Less的设置将容器宽度设置为变量，并根据该容器宽度（其中第1列是从容器宽度中减去其他列后的剩余空间）设置列宽。这给你只有一个地方来改变宽度。
为每列使用百分比宽度。

选项3可能是最好的选择。

有一点需要注意的是，通常您可以设置标题的宽度，以便在同一列中的单元格上强制相同的宽度。如果你想触发溢出隐藏，这是不正确的，因为宽度必须设置在被隐藏的相同元素上。

来源

2013-05-10 09:16:43 Maloric

很好解释，谢谢。 – 2013-05-10 09:35:37

我的荣幸。很高兴为您服务。 – Maloric 2013-05-10 11:05:31

我看不到在您的jsfiddle代码中使用的.class1选择器。无论如何，我更新你的JS与我以为你可能会后。

http://jsfiddle.net/vjfjd/5/

我加.class1到name列，改变了CSS。

来源

2013-05-10 09:00:12 user2319914

工作小提琴：http://jsfiddle.net/vjfjd/8/

没有必要为“1类”等类别，每次添加到您的行。
伪类first-of-type,nth-of-type(n)将自动照顾他们。

注：overflow: hidden;white-space: nowrap;text-overflow: ellipsis;将确保“名称”栏中停留在一行，并在文本的结尾得到...如果没有在指定的宽度适合一行。如您所愿，如果该元素具有width或max-width集

body { 
    font: 12px sans-serif; 
} 
#div1 { 
    width: 750px; 
    padding-top: 20px; 
    padding-bottom: 20px; 
    background-color: lime; 
} 
#table1 { 
    background-color: white; 
    table-layout:fixed; 
    width: 750px; 
} 
#table1 th, #table1 td { 
    white-space: nowrap; 
    width:20px; 
    background-color: DarkSalmon; 
} 
tr th:first-of-type, tr td:first-of-type { /* use of pseudo classes */ 
    width:272px !important; 
    background-color: pink !important; 
    text-overflow: ellipsis; 
    overflow: hidden; 
} 
tr th:nth-of-type(2), tr td:nth-of-type(2), /* use of pseudo classes */ 
tr th:nth-of-type(3), tr td:nth-of-type(3) { 
    width:65px !important; 
    background-color: yellow !important; 
} 
/* all background colors are for testing */

来源

2013-05-10 09:09:20 Arbel

表空白：NOWRAP和一列需要溢出：隐藏

回答

相关问题