css - 合并表格中的两列

Question

我有一个表格，我无法控制表格的源代码(自动生成)，我只能控制它的 CSS。第一列是文字，第二列是图片，第三列是文字。我想在第 2 列图像下方显示第 3 列文本，我该如何实现？以下是我的代码示例。

<table>
    <tbody>
        <tr>
            <td class="view-title">
                <h2>Title 1</h2> </td>
            <td class="view-image">
                <img typeof="foaf:Image" src="linktoimage.jpg" width="250" height="150" alt=""> </td>
            <td class="view-description">
                <h3>Here is some text</h3> </td>
        </tr>
        <tr>
            <td class="view-title">
                <h2>Title 2</h2> </td>
            <td class="view-image">
                <img typeof="foaf:Image" src="linktoimage1.jpg" width="250" height="150" alt=""> </td>
            <td class="view-description">
                <h3>Some more text</h3> </td>
        </tr>
    </tbody>
</table>

Answer 1

这里有一些似乎有效的方法。首先，我将所有表格元素制作成 block ，然后我制作了图像和说明 display:table-row;，这样它们就会一个一个地对齐，并将标题 float 到左侧。 Here's my fiddle如果你想玩它。

table, tbody, tr, td {
    display:block;
}
.view-title {
    float:left;
}
.view-image {
    display:table-row;
}
.view-description {
    display:table-row;
}

<table>
    <tbody>
        <tr>
            <td class="view-title">
                 <h2>Title 1</h2> 
            </td>
            <td class="view-image">
                <img typeof="foaf:Image" src="http://placekitten.com/250/150" width="250" height="150" alt="" />
            </td>
            <td class="view-description">
                 <h3>Here is some text Some more text Some more text</h3> 
            </td>
        </tr>
        <tr>
            <td class="view-title">
                 <h2>Title 2</h2> 
            </td>
            <td class="view-image">
                <img typeof="foaf:Image" src="http://placekitten.com/250/150" width="250" height="150" alt="" />
            </td>
            <td class="view-description">
                 <h3>Some more text Some more text Some more text Some more text</h3> 
            </td>
        </tr>
    </tbody>
</table>