0

我有一个水平对齐的 2 单元格表。表格有一个固定的宽度，大约 500 像素。每次加载页面时，第一个和第二个单元格都会填充不同长度的字符串变量。我想要得到的是单元格 1 中没有左对齐的空格，以及单元格 2 和表格边缘之间的空格。看起来像：

[[textfromvariable1][textfromvariable2                                    ]]

编辑：伊莱：

现在看起来像这样：

[[text1][text2      ]

所以第二个单元格没有覆盖表格的宽度。

4

2 回答 2

2

我通过利用以下事实来实现这一点：尽管在单元格中设置了宽度，但它会扩展以适应其内容。

编辑：HTML 尝试为表格提供您为表格单元格指定的宽度。但是表格单元格会扩展该宽度以适应其内容。因此，从 1px 开始，您是在告诉表格仅将少量空间分配给该表格单元格。当它扩展时，它会尝试从其他单元格中获取最小量，以适应​​该单元格的宽度。这留下了一个紧密包裹的minwidth单元格，剩下的宽度被其余的单元格消耗（在您的示例中，只有一个其他单元格）。

CSS：

.minwidth { width: 1px; }
.nowrap { white-space: nowrap; }

HTML：

<table>
<tr>
<td class="minwidth nowrap">This is my first string</td>
<td>This is the rest</td>
</tr>
</table>

我假设您的“variable1 文本”不应该包含在第一个单元格中。否则，说您想要填充“variable2”有点武断，考虑到您可以随机包装“variable1”（但在单词边界上）并获得更小的宽度。

编辑：这是一个演示http://jsfiddle.net/mZCg8/

于 2013-06-01T13:34:14.653 回答
0

您可能想尝试将所有 td 的宽度设置为 100%，并将第一个 td 的宽度设置为 auto 并将 white-space 属性设置为 nowrap ：

<html>
    <head>
        <style type="text/css">
            table{
                width:500px;
                border-collapse:collapse;
                border:solid 1px #ddd;
            }
            table td{
                width:100%;
                border:solid 1px #ddd;
            }
            table td:first-of-type{
                width:auto;
                white-space:nowrap;
            }
        </style>
    </head>
    <body>
        <table>
            <tbody>
                <tr>
                    <td>This is my first string</td>
                    <td>This is the rest</td>
                </tr>
                <tr>
                    <td>Second Line : This is my first string</td>
                    <td>This is the rest</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
于 2013-06-01T14:00:23.300 回答