Wrap two adjacent td's | 易学教程

问题

I have a table with two columns, both 300px wide, taking 600px in width on a regular computer screen.

I want to modify the display of that table for small screen mobile devices.

Is there a CSS way to make the cell of the right column to wrap and go below the cell of the left column, followed by the next left cell, followed by the next right cell, and so on?

回答1:

Here is a proof-of-concept demonstration.

Consider the following table:

<table>
    <tr>
        <td>First Row - Cell 1</td>
        <td>First Row - Cell 2</td>
    </tr>
    <tr>
        <td>Second Row - Cell 1</td>
        <td>Second Row - Cell 2</td>
    </tr>
</table>

If you float the table cells, you can get them to stack vertically, for example:

table {
    width: auto;
}
table td {
    background-color: lightgray;
    float: left;
    width: 150px;
    margin: 10px 0;
}

You need to adjust the table width and the cell width in your media query.

The one advantage of using floats is that the table is responsive without using media queries, which may be useful in some instances.

Fiddle: http://jsfiddle.net/audetwebdesign/qSd7g/

回答2:

A table is just like any other HTML element. If you don't like the way it is displaying, you change its display property.

table, tbody, tr, th, td { display: block }
thead { display: none } /* optional */

Demo for reformatting a complex table: http://codepen.io/cimmanon/pen/ukBqo

回答3:

You need to be using media queries to change the CSS properties dependant on screen size or browser width.

To target iPhone 5 in portrait mode you could do something like this:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) {
    td {
        width: 100%;
        display: block;
    }
}

To target a more general array of devies you would use a more general query to catch more screen sizes:

@media only screen 
and (max-width : 800px)  {
    td {
        width: 100%;
        display: block;
    }
}

DEMO (resize the browser window)

There is a great resource for iPhone / iPad related media queries HERE

来源：https://stackoverflow.com/questions/16461150/wrap-two-adjacent-tds

标签

css

html-table

responsive-design