将表格放在可滚动的DIV中时表格单元格断行?

时间:2012-05-28 04:53:12

标签: html css html-table

我遇到了问题。我创建了一个表并把它放在这样的DIV中:

<div class="divScroll">
<table class="k-tbTemplate">
    <thead>
        <tr>
            <th>Header </th>
            <th>Header 3</th>
            <th>Header 3</th>
            <th>Header 3</th>
            <th>Header 3</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td >
                <a href="#null" style="float:left; ">asfasfa</a>
                <a href="#null" onclick="AddSA(this);" style="float:right; ">
                    <img src="add.PNG" alt="Add Shop"/></a>
            </td>

            <td>
                <div style="float:left;">aaa</div>
                <div style="float:right;display:inline;">
                    <a href="#null">
                        <img alt="Add Shop" src="/add.PNG"/></a>
                    <a href="#null">
                        <img alt="Remove Shop" src="/rem.PNG"/></a>
                </div>
            </td>
            <td>Header 3</td>
            <td>Header 3</td>
            <td>Header 3</td>

        </tr>
    </tbody>
</table>
</div>

虽然设置了<td> white-space:nowrap,但它仍然是断线。如果我不将表放在可滚动的div中,它就可以正常工作。

Full html code and css style is here.

任何人都可以帮我解决这个问题。

1 个答案:

答案 0 :(得分:0)

滚动不是原因。它是包含表的div元素的固定宽度(300px)的设置。细胞被挤压,漂浮的影响导致你可能认为断线。如果您希望单元格的内容在一行上,只需将其放在一行,而不使用导致换行符的元素,例如div