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

您需要可变高度的单元格吗？

如果不：

在 td 和这个 CSS 中放置一个 div：

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

Answer 2

见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;
}

Answer 3

添加分词：break-all; 到你的 td 风格：

td {
word-break: break-all;
text-align: right;
border: 1px solid black;
vertical-align: top;
}