Question

在经历了许多解决方案之后，没有解决我的问题。

我有<td>，其中有<table>。但是，此内部表中的文本不适合。文本剪辑出来。我尝试了overflow:hidden上的table-layout: fixed，<table>和word-wrap:break-word上的<td>等各种内容，但仍然无法解决问题。

这是我的代码：

<table id="table1">
<tr>
    <td id="td1">
        <img src="http://lorempixel.com/165/232" />
    </td>
    <td id="td2">Long text goes here</td>
    <td id="td3" rowspan="7">
        <table id="table2">
            <tr>
                <td>Long text goes here</td>
            </tr>
        </table>
    </td>
</tr>

这里是CSS：

#table1 {
    width: 765px;
    border: 1px solid red;
    border-spacing: 0;
    padding: 0;
}
#td1 {
    width: 175px;
    vertical-align: top;
}
#td2 {
    vertical-align: top;
}
#td3 {
    width: 180px;
    vertical-align: top;
    background-color: #F3F3F3;
}
#table2 {
    width: 100%;
    border: 1px solid blue;
    border-spacing: 0;
    padding: 8px;
}

内表中的内容剪辑出来。任何人都可以提供一个解决方案，以便内部表可以在其中包含适当的内容而不会剪切。

JSFiddle

Answer 1

这可以更简单地实现。让我们使用display: table;和display: table-cell;执行此操作。我们可以使用与表相似的行为来布局块元素，但更简单，更容易维护。

Read more on CSS display

Have a Fiddle!

CSS

.box {
    border: solid 1px #CCC;
    display: table;
    padding: 10px;
}
.box div {
    display: table-cell;
    vertical-align: top;
    margin: 10px;
    padding: 10px;
}
.right {
    border: solid 1px #F00;
}

HTML

<div class="box">
    <div class="left">
        <img src="http://placehold.it/200" />
    </div>
    <div class="center">Content</div>
    <div class="right">Content</div>
</div>

文本不适合表格 - HTML

1 个答案: