如何使锚不超过表格单元宽度?

时间:2014-09-25 19:05:16

标签: html css

我的问题是我的主播在iphone 5显示屏上超过了表格单元格。

我将此作为单元格white-space: nowrap;

的样式

对于锚点我只有一个背景颜色:background: #f88e1e;

你能告诉我吗?

<table class="subscriptionTable">
    <thead>
        <tr>
            <th class="feature"></th>
            <th class="free">free</th>
            <th class="middle">silver</th>
            <th class="top">gold</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="feature"><a href="somelink"></a>linktarget</td>
            <td></td>
            <td></td>
            <td><span class="icon-tick"></span></td>
        </tr>
        <tr>
            <td class="feature"><a href="somelink"></a>linktarget</td>
            <td></td>
            <td></td>
            <td><span class="icon-tick"></span></td>
        </tr>
            <tr>
                <td class="feature"></td>
                <td>
                </td>
                <td></td>
                <td>
                    <a class="someClass" href="somelink">Free trial</a>
                </td>
            </tr>
    </tbody>
</table>

我已成功通过添加white-space: nowrap让文字在一行上 但现在锚点宽度超过了单元格宽度。锚必须留在里面......

1 个答案:

答案 0 :(得分:1)

无论是display:table-cell(CSS)还是实际的HTML表格,都无法阻止表格单元格的直接内容进行换行。它们将始终扩展以适应内容。 如果要调整display: table-cell内的内容,则需要将其包装在另一个容器元素中并设置不同的显示类型(块/表等)。