CODEWITHSUNDEEP
javascripthtmlcssresponsive-designhtml-table
Cellendhyll
Cellendhyll

Reputation: 63

Merge table cells for small screen

I have something like this for big screens:

<table>
    <thead>
        <tr>
            <th>title and image</th>
            <th>description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                title
                <br /><img scr="">
            </td>
            <td>
                few words about...
            </td>
        </tr>
    </tbody>
</table>

And I would like to change it to the following code for smaller screen:

<table>
    <thead>
        <tr>
            <th>title and description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                title
                <br />few words about...
            </td>
        </tr>
    </tbody>
</table>

Do you know how to do that properly? :) I'd like to do it with CSS only but I can code in PHP and JS as well.

Thanks all and have a good day!

Upvotes: 1

Views: 966

Answers (3)

Johannes
Johannes

Reputation: 67748

You could - in a media query - use this CSS to convert the rows into cells and the cells into simple inline elements:

tr {
  display: table-cell;
}

td {
  display: inline;
}
<table>
  <thead>
    <tr>
      <th>title and image</th>
      <th>description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        title
        <br /><img scr="">
      </td>
      <td>
        few words about...
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 3

Kobbe
Kobbe

Reputation: 316

with css media queries, above a certain browser or screen width, show "wideDisplay" and hide "narrowDisplay". When the browser is small, hide "wideDisplay" and show "narrowDisplay".

<table>
<thead>
<tr>
<td class="wideDisplay">title and image</td>
<td class="wideDisplay">description</td >
<td class="narrowDisplay">title and description</td>
</tr>
</thead>
</table>

Upvotes: 1

miir
miir

Reputation: 1926

There's a css feature called a media query that allows you to apply css rules conditionally based on properties of the display. For instance, it could be used with a condition like min-width(700px) to target large screens and something like max-width(320px) for small screens.

The following approach will have repetition in your markup but if you're using PHP to render it, then you could reduce repeated code by storing the repeated markup in variables and referencing those.

CSS:

@media (min-width: 321px) {
    .small-screen {
        display: none;
    }
}

@media (max-width: 320px) {
    .large-screen {
        display: none;
    }
}

HTML:

<table>
    <thead>
        <tr class="large-screen">
            <th>title and image</th>
            <th>description</th>
        </tr>
        <tr class="small-screen">
            <th>title and description</th>
        </tr>
    </thead>
    <tbody>
        <tr class="large-screen">
            <td>
                title
                <br /><img scr="">
            </td>
            <td>
                few words about...
            </td>
        </tr>

        <tr class="small-screen">
            <td>
                title
                <br />few words about...
            </td>
        </tr>
    </tbody>
</table>

Upvotes: 1

Related Questions