How to make table responsive

问题

I have some table and I want to make it responsive when it show in width max 760.

This is the table looks normal :

And I want to make it like this if width of the screen is max 760 :

In that table the last coloumn just appears in end of table not in each row.

Anyone can help me to do that ?

回答1:

Use this html & css code for make rsponsive table

Check the Snippets is below .

Use this css with media query max-width:760px or any width

.responsive-table {
    margin:0px auto;
    width:500px;
	border: 1px solid #efebeb;
  
  }
  
  .responsive-table img{height:100px; }
  
  .responsive-table th {
    display: none;
  }
  
  .responsive-table td {
    display: block;
	border-top: 1px solid #ddd;
  }
  .responsive-table td:first-child{border:none;}
  .responsive-table td:first-child {
    padding-top: .5em;
  }
  .responsive-table td:last-child {
    padding-bottom: .5em;
  }
  .responsive-table td:before {
    content: attr(data-th) ": ";
    display:block;
	font-weight:bold;
  }

<table class="responsive-table">
    <tbody>
        <tr>
            <th>
                Room
            </th>
            <th>
                Guest
            </th>
            <th>
                Description
            </th>
            <th>
                Rate
            </th>
            <th>
                Book
            </th>
        </tr>
        <tr>
            <td data-th="Room">
                <img src="http://i45.tinypic.com/t9ffkm.jpg" alt="" />
            </td>
            <td data-th="Guest">
                2 adult
            </td>
            <td data-th="Description">
                Room Only

            </td>
            <td data-th="Rate">
                USD 200

            </td>
            <td data-th="Book">
                <button type="submit"> Book</button>
            </td>
        </tr>
    </tbody>
</table>

来源：https://stackoverflow.com/questions/39993076/how-to-make-table-responsive

标签

html

css

html-table

responsive