css - 固定表格布局溢出到侧面

Question

问题

1. 我有一个固定宽度的表格(它必须是)，其中一个单元格包含文本它太长而无法放入其中，因此它会溢出到右侧的单元格之外。

2. 我需要让所有表格单元格的文本右对齐。

3. 理想情况下，我不想更改任何标记。

我在找什么

我需要找到让(示例中的文本)“longlonglong”溢出到其他先前单元格左侧并保持其右对齐状态的方法。

代码

HTML

<table width="120">
    <tr>
        <td width="30">text</td> 
        <td width="30">text</td>
        <td width="30">text</td>
        <td width="30">very longlonglong text</td>
    </tr>
</table>

CSS

td {
    text-align: right;
    border: 1px solid black;
    vertical-align: top;
}
table {
    border: 1px solid red;
    table-layout: fixed;
}

示例

http://jsfiddle.net/xareyo/eVkgz/

Answer 1

参见 http://jsfiddle.net/eVkgz/1/

<table width="120">
    <tr>
        <td width="30">text</td> 
        <td width="30">text</td>
        <td width="30">text</td>
        <td width="30">
            <div id="container1">
                <div id="container2">very longlonglong text</div>
            </div>
        </td>
    </tr>
</table>

td {
    text-align: right;
    border: 1px solid black;
    vertical-align: top;
}
#container1 {
    width: 30px;
    position: relative;
}
#container2 {
    float: right;
    overflow: visible;
    text-align: right;
}
table {
    border: 1px solid red;
    table-layout: fixed;
}