Question

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

[[textfromvariable1][textfromvariable2                                    ]]

编辑：eli：

现在看起来像这样：

[[text1][text2      ]

所以单元格2不覆盖桌子的宽度。

Answer 1

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

编辑：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 text'不应该包含在第一个单元格中。否则，你想要'variable2'来填充是有点随意的，考虑到你可以随机包装'variable1'（但在字边界上）并获得更小的宽度。

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

Answer 2

你可能想尝试将所有tds的宽度设置为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>

CSS单元格没有跨越整个表格宽度的空白

2 个答案: