如何调整包含文本的表格的大小？答案

【问题标题】：How would I resize a table with text in it?如何调整包含文本的表格的大小？
【发布时间】：2014-12-24 12:01:26
【问题描述】：

我可以调整表格的大小，但是当我在移动设备上查看时，文本会在单词中间中断并且无法阅读。我想知道是否有办法让表格在计算机上保持水平，但在移动设备上查看时保持垂直。

这是我所拥有的：

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% 宽度，但文本只是被破坏了。感谢您的帮助。

【问题讨论】：

你想要的可以通过使用div来实现，并让它们浮动。
你可以看看我关于类似问题的问题...stackoverflow.com/q/19723617/1016716 不确定它是否足够相似，可以保证关闭为重复。

标签： html css

【解决方案1】：

对于给定的示例，使用浮动 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】：

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

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

见http://jsfiddle.net/omyhmcp6/2/

【讨论】：