在表

Question

我有一个表，我没有任何控制表的源代码（自动生成），我只能控制它的CSS。第1列有文本，第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

这里似乎有用。首先，我将所有表格元素分成块，然后我制作了图像和描述display:table-row;，以便它们将一个在另一个之下，并将标题浮动到左边。 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>

Answer 2

好的，此解决方案适用于以下情况： - 您的图像具有指定的高度和宽度：

tr {
  height: 200px;
  position: relative;
  }
td.view-description {
  position: absolute;
  top: 150px;
  right: 0;
  width: 250px;
  text-align: center;
}

没有尝试过强硬，但应该工作。理念： - 使第三列独立于正常渲染 - 将其放置在图像下方 - 给它一个位置并使其居中。