How would I resize a table with text in it?

Question

I can get the table to resize but when I view in on mobile the text breaks in the middle of the word and is unreadable. I was wondering if there was a way to make the table stay horizontal on a computer but make itself vertical when viewed on mobile.

Here is what I have:

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/

As you can see the table remains 100% width but the text just gets broken. Thanks for the help.

What you want can be achieved by using divs, and making them float. — luisluix, Oct 28 '14 at 21:59
You could look at my question about a similar problem... http://stackoverflow.com/q/19723617/1016716 Not sure if it's similar enough to warrant closing as duplicate though. — Mr Lister, Oct 28 '14 at 22:09

score 0 · Answer 1 · answered Oct 28 '14 at 22:12

0

You can try adding a media query, turning the table into a simple bunch of divs on narrower screens...

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

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

answered Oct 28 '14 at 22:12

Mr Lister

45,515
15
108
150

score 0 · Answer 2 · answered Oct 28 '14 at 22:36

It makes more sense using floating divs for the given example. Here is an example: 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;

}

How would I resize a table with text in it?

2 Answers2