CODEWITHSUNDEEP
csscss-tables
Maciej
Maciej

Reputation: 13

How to break table using media query?

I'm having trouble with breaking table, to be more responsive. Please take a look at this pictures, and tell me how to do it with css.

Image of existing table to break

Image of the desired result

Upvotes: 1

Views: 2818

Answers (6)

G-Cyrillus
G-Cyrillus

Reputation: 105903

you may reset display and use the flex model :

/* break table */
tr {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

td {
  display: block;
  width: 50%;
  text-align: center;
}

td[colspan] {
  width: 100%;
}

/* demo purpose */
table {
  counter-reset: tds;
  counter-increment: tds -1;
  width: 100%;
}

td {
  border: solid 1px;
}

td:before {
  counter-increment: tds;
  content: 'TD 'counter(tds);
}

body {
  width: 500px;
  margin: auto;
}




* {
  box-sizing: border-box;
}
<table>
  <tr>
    <td> </td>
    <td> </td>
    <td colspan="2"> </td>
    <td colspan="2"> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td colspan="2"> </td>
    <td colspan="2"> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

Use mediaqueries to update display whenever you need it to happen. DEMO

Upvotes: 1

pavelccz
pavelccz

Reputation: 86

This is not what tables are for. You could hack the tables styles but that's bad practise. Easier would be using for example:

older bootstrap grid - https://getbootstrap.com/

or better flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Editing table, tr, tbody and others display is bad practice as well, it will destroy it's functionality (vertical alignment and many others). Just use divs and style them as your responsive table. Best would be styling them with flexbox or at least bootstrap grid.

Upvotes: 0

iyyappan
iyyappan

Reputation: 777

please try this one

<style type="text/css">


   td {
        border: 1px solid;
        text-align: center;
    }
    .t1{
        margin: 0 auto;
        text-align: center;
        min-width: 600px;
    }
    .t2{
        margin: 0 auto;
        text-align: center;
        display: none;
    }
      @media (max-width: 600px){
            .t1{display: none;}
            .t2{display: table;width: 100%;}
         }
</style>

HTML

      <tr>

           <td>dsds</td>
           <td>dsdsd</td>
           <td colspan="2">sds</td>
           <td colspan="2">dsdd</td>

      </tr>
      <tr>

           <td>dsds</td>
           <td>dsdsd</td>
           <td>sds</td>
           <td>dsdd</td>
           <td>sds</td>
           <td>dsdd</td>

      </tr>
      <tr>

           <td>dsds</td>
           <td>dsdsd</td>
           <td colspan="2">sds</td>
           <td colspan="2">dsdd</td>

      </tr>
      <tr>

           <td>dsds</td>
           <td>dsdsd</td>
           <td>sds</td>
           <td>dsdd</td>
           <td>sds</td>
           <td>dsdd</td>

      </tr>


      <tr>

           <td>dsds</td>
           <td>dsdsd</td>


      </tr>
      <tr>

          <td colspan="2">sds</td>

      </tr>
      <tr>


           <td colspan="2">dsdd</td>

      </tr>
      <tr>

           <td>dsds</td>
           <td>dsdsd</td>

      </tr>

Upvotes: 0

Nehemiah
Nehemiah

Reputation: 1140

I think this will help you.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table responsive</title>
<style>
body {
    margin:0;
    padding:0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
}
table {
    width:100%;
    text-align:center;
}
td {
    border-bottom:1px solid #ccc;
    padding:10px 0;
}
 @media (max-width:600px) {
table {
    display:block;
    width:100%;
    padding:0;
    margin:0 auto;
}
tbody, tr {
    display:block;
    width:100%;
}
table td {
    display:inline-block;
    float:left;
    width:50%;
}
td[colspan="2"] {
    display:block;
    width:100%;
}
}
</style>
</head>

<body>
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>TD00</td>
    <td>TD01</td>
    <td colspan="2">Colspan 2</td>
    <td colspan="2">Colspan 2</td>
  </tr>
  <tr>
    <td>TD00</td>
    <td>TD00</td>
    <td>TD00</td>
    <td>TD00</td>
    <td>TD00</td>
    <td>TD00</td>
  </tr>
  <tr>
    <td>TD00</td>
    <td>TD00</td>
    <td>TD00</td>
    <td>TD00</td>
    <td>TD00</td>
    <td>TD00</td>
  </tr>
  <tr>
    <td>TD00</td>
    <td>TD00</td>
    <td>TD00</td>
    <td>TD00</td>
    <td>TD00</td>
    <td>TD00</td>
  </tr>
</table>
</body>
</html>

Upvotes: 1

Simas Skilinskas
Simas Skilinskas

Reputation: 141

Not really possible without JavaScript, you can't style table column breaks.

Other option could be to redo table to div's using flexbox grid.

Upvotes: 0

Raul Lea&#241;o Martinet
Raul Lea&#241;o Martinet

Reputation: 2113

I don't think that it is possible to break a table just using CSS. In order to do what you want you'd need to use JS and according to the window's width you would re-structure your table.

However, if you are just searching to make your site more responsive, you have some interesting techniques here: https://css-tricks.com/responsive-data-table-roundup/

Upvotes: 0

Related Questions