代码之家 › 专栏 › 技术社区 › Matt Ball

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

css html

Matt Ball · 技术社区 · 15 年前

我有一个HTML表,其中的单元格包含如下跨距:

<预> <代码>… TD & GT; <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;”> &T/GT; ……


   我正在寻找一种方法来缩小这些跨距的宽度,而不是在包含表格的单元格太窄而无法在一行中显示所有跨距的情况下进行换行。我尝试设置跨距“max widthto20px,然后使用百分比表示宽度,但这不起作用,因为表格单元格尝试仅与其内容一样宽。


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


对于视觉类型,下面是我当前拥有的宽度足够大的内容:




当宽度不够时,我现在拥有的是:



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



如果不明显,跨距是txes,rdbs,andravennetscolumns.

...
<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然后使用百分之一作为宽度,但这不起作用,因为表单元格的宽度仅与其内容的宽度相同。

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

对于视觉类型,当有足够的宽度时,以下是我目前拥有的:



当宽度不够时,以下是我目前拥有的:



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



如果不明显,跨度是TXEs,RDBs和RavenNets柱。

4 回复 | 直到 12 年前

Ray 15 年前

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

Jon F Hancock 15 年前

你考虑过在TD上设置最小宽度吗?或者在td中有一个包装分区,但在跨度之外?

Sinan Ünür 15 年前

这看起来有点像是在火狐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>

Matt Ball 15 年前

我找不到一个令人满意的纯CSS方法来做我想要的。我已经实现了一个应用程序配置文件(比如 .ini 文件,或多或少),所以我只是在这个配置中添加了我想要的宽度。这不是一个通用的解决方案,但它完全符合我的要求。