Question

我可以让表格调整大小但是当我在移动设备上查看时，文字会在单词的中间断开并且不可读。我想知道是否有办法让桌子在电脑上保持水平，但在手机上观看时会让自己垂直。

这就是我所拥有的：

table {
    width: 100%;
    table-layout: fixed;
    border: 1;
    border-color: DEDEDE;
    text-align: left;
    }
table td {
    word-wrap: break-word;
    font-size: 100%;
    }
.iFinePrint {
    font-size: 12px;
    text-align: center;
    }

<h2>iPhone Repair</h2>
<table rules="cols" frame="vsides">
    <tr>
        <td>
            iPhone 4
            <ul>
                <li>Cracked Screen</li>
                <li>Battery Replacement</li>
                <li>Rear Panel</li>
            </ul>
        </td>
        <td>
            iPhone 4s
            <ul>
                <li>Cracked Screen</li>
                <li>Battery Replacement</li>
                <li>Rear Panel</li>
            </ul>
        </td>
        <td>
            iPhone 5
            <ul>
                <li>Cracked Screen</li>
                <li>Battery Replacement</li>
            </ul>
        </td>
        <td>
            iPhone 5s
            <ul>
                <li>Cracked Screen</li>
                <li>Battery Replacement</li>
            </ul>
        </td>
        <td>
            iPhone 5c
            <ul>
                <li>Cracked Screen</li>
                <li>Battery Replacement</li>
            </ul>
        </td>
    </tr>
</table>
<p class="iFinePrint">*Prices depend on the work that is being done. If you would like more information you may fill out the contact form, email us directly, or call the number provided.</p>

http://jsfiddle.net/omyhmcp6/

正如您所看到的，表格保持100％宽度，但文字却被破坏了。谢谢你的帮助。

Answer 1

您可以尝试添加媒体查询，在较窄的屏幕上将表格转换为一组简单的div ...

@media (max-width:500px) {
  td, tr, table{display:block}
}

请参阅http://jsfiddle.net/omyhmcp6/2/

Answer 2

对于给定的示例，使用浮动div更有意义。以下是一个示例：http://jsfiddle.net/omyhmcp6/

HTML

<h2>iPhone Repair</h2>

<div class="row">
    <div class="column">iPhone 4
        <ul>
            <li>Cracked Screen</li>
            <li>Battery Replacement</li>
            <li>Rear Panel</li>
        </ul>
    </div>
    <div class="column">iPhone 4
        <ul>
            <li>Cracked Screen</li>
            <li>Battery Replacement</li>
            <li>Rear Panel</li>
        </ul>
    </div>
    <div class="column">iPhone 4
        <ul>
            <li>Cracked Screen</li>
            <li>Battery Replacement</li>
            <li>Rear Panel</li>
        </ul>
    </div>
    <div class="column">iPhone 4
        <ul>
            <li>Cracked Screen</li>
            <li>Battery Replacement</li>
            <li>Rear Panel</li>
        </ul>
    </div>
    <div class="column">iPhone 4
        <ul>
            <li>Cracked Screen</li>
            <li>Battery Replacement</li>
            <li>Rear Panel</li>
        </ul>
    </div>
</div>
    <p class="iFinePrint">*Prices depend on the work that is being done. If you would like more information you may fill out the contact form, email us directly, or call the number provided.</p>

的CSS

.row{
    overflow: hidden;
}
@media screen and (min-width: 750px) {

    .column {
        width: 20%;
        float:left;
        border-right: 1px solid black;
        padding: 10px;
        box-sizing: border-box;
    }

    .column:first-child {
        border-left: 1px solid black;
    }
}

.iFinePrint {

    font-size: 12px;

    text-align: center;

}

如何调整包含文本的表格？

2 个答案: