如何填充表格单元格的整个水平空间？

Question

即使没有足够的内容，我也试图在桌面上制作这些div来填充整个单元格。

如果你看到下面的内容，那么第一个单元格（data_cell1_lt）不会一直水平填充文本，因此它会使苹果图像（data_cell3_lt）向左移动。

接下来的两行文字和图片完美排列，但这只是因为有足够的文字来填充整个单元格。

http://jsfiddle.net/UMf3k/106/

<div class="wrapper-data">
    <div class="data_row">
        <div class="data_cell1_lt">
            <p>Fill the entire space.</p>
        </div>
        <div class="data_cell2_lt">
            &nbsp;</div>
        <div class="data_cell3_lt">
            <img alt="Apple" src="http://www.clker.com/cliparts/3/m/v/Y/E/V/small-red-apple-th.png" style="width: 96px; height: 99px;" /></div>
    </div>
    <div class="data_row">
        <div class="data_cell1_lt">
            <p>Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.</p>
        </div>
        <div class="data_cell2_lt">
            &nbsp;</div>
        <div class="data_cell3_lt">
            <img alt="Apple" src="http://www.clker.com/cliparts/3/m/v/Y/E/V/small-red-apple-th.png" style="width: 96px; height: 99px;" /></div>
    </div>
    <div class="data_row">
        <div class="data_cell1_lt">
            <p><p>Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.Fill the entire space.</p>
        </div>
        <div class="data_cell2_lt">
            &nbsp;</div>
        <div class="data_cell3_lt">
            <img alt="Apple" src="http://www.clker.com/cliparts/3/m/v/Y/E/V/small-red-apple-th.png" style="width: 96px; height: 99px;" /></div>
    </div>
</div>

Answer 1

将data_row的宽度设为100%，它应该有效。

原因是，data_row显示为内联块。

Answer 2

你想要this吗？

我刚刚在.data-row class

添加了width: 100%;

Answer 3

向data_row类添加100％的宽度：

.data_row {
    height:100%;
    min-height:100%;
    white-space:nowrap;
    display:table;
    width:100%;        
}