Question

我有一个HTML表，其中的单元格包含跨度，如下所示：

...
<td>
    <span style="height: 20px; width: 20px; margin-left: 2px;">
    <span style="height: 20px; width: 20px; margin-left: 2px;">
    <span style="height: 20px; width: 20px; margin-left: 2px;">
</td>
...

我正在寻找一种方法来缩小这些跨度的宽度，而不是换行，当包含的表格单元太窄而无法在一行上显示它们时。我尝试将范围'max-width设置为20px，然后使用百分比作为宽度，但这不起作用，因为表格单元格只尝试与其内容一样宽。“ p>

最小表格单元格宽度是在1行显示标题所需的宽度。

对于视觉类型，这是当我有足够宽度时我目前所拥有的：

enter image description here

这是宽度不够时我目前所拥有的：

enter image description here

当我没有足够的宽度让每个跨度成为一个完整的20px时，我希望它看起来像这样：

enter image description here

如果不明显，则跨度为TXEs，RDBs和RavenNets列中的彩色方块。

Answer 1

使用<td nowrap>或<td style="white-space:nowrap;">来避免包装。表格单元格通常应该展开以适合其内容，除非允许换行，或者您以其他方式限制其宽度。

Answer 2

您是否考虑过在td上设置最小宽度？或者在td内部的包装div，但是在跨度之外？

Answer 3

这种类似似乎可以在Firefox 3.6中实现您想要的功能。关键要求似乎是表的宽度不能以像素为单位。

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" 
href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css">

<style type="text/css">
    .indicator {
        display:block;
        white-space:nowrap;
        min-width:8px;
        max-width:300px;
        width:100%;
    }

    .indicator li {
        border:outset 2px;
        display:inline-block;
        height:80px;
        min-width:2px;
        max-width:80px;
        padding:0 0 0 2px;
        width:25%;
    }

    .ok    { background:#0f0 } .caution { background:#ff0 }
    .alert { background:#f00 } .inactive { background:#0ff }

    table { width:100% }
    td { width:100% }

</style>

</head>

<body>

<table><tr><td>
<ul class="indicator">
    <li class="ok"></li> <li class="caution"></li>
    <li class="alert"></li> <li class="inactive"></li>
</ul>
</td></tr></table>

</body>
</html>

Answer 4

我找不到一个令人满意的纯CSS方式来做我想做的事情。我已经实现了一个应用程序配置文件（比如.ini文件，或多或少）所以我只是将我想要的宽度添加到此配置中。它不是一个通用的解决方案，但它很符合我的要求。

根据可用宽度设置表格单元格内容的宽度

4 个答案: