Combine table cells to improve readability on smaller screens

Question

Combine table cells to improve readability on smaller screens

I currently have a setup designed for larger 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>

However, I am looking to modify it for smaller screens with the following code:

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

If anyone knows how to accomplish this using CSS techniques or other programming languages like PHP and JS, I would greatly appreciate your help. Thank you all and have a wonderful day!

javascript html css responsive-design html-table

Answer 1

Answer №1

If you want to change the layout of rows and cells using CSS within a media query, you can achieve this by converting the rows to cells and the cells to inline elements with the following code:

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>

Answer 2

If you want to change the layout of rows and cells using CSS within a media query, you can achieve this by converting the rows to cells and the cells to inline elements with the following code:

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>

Answer 3

Answer №2

If you want to customize your CSS based on the display properties, you can use a media query. This allows you to apply specific styles for different screen sizes, such as targeting large screens with min-width(700px) or small screens with max-width(320px).

To avoid repeating code in your markup, consider using PHP to render it instead. You can store repetitive markup in variables and reference them when needed.

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>

Answer 4

If you want to customize your CSS based on the display properties, you can use a media query. This allows you to apply specific styles for different screen sizes, such as targeting large screens with min-width(700px) or small screens with max-width(320px).

To avoid repeating code in your markup, consider using PHP to render it instead. You can store repetitive markup in variables and reference them when needed.

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>

Answer 5

Answer №3

Utilizing CSS media queries, you can display the "wideDisplay" and hide the "narrowDisplay" when the browser or screen width is above a certain threshold. Conversely, when the browser is smaller, you can 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>

Answer 6

Utilizing CSS media queries, you can display the "wideDisplay" and hide the "narrowDisplay" when the browser or screen width is above a certain threshold. Conversely, when the browser is smaller, you can 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>

Combine table cells to improve readability on smaller screens

Answer №1

Answer №2

Answer №3

Similar questions

Locate a specific option that matches the value of the selected data-status and set it as "selected" using jQuery

Exploring the process of retrieving outcomes from Node.js within a Knockout ObservableArray

Achieve a stunning visual effect by placing images behind the background using HTML and

What is the best way to ensure the div stays in sync with scrolling?

Replacing an existing pie chart with a new one using JavaScript

Guide to retrieving environment variables within React/Node.js applications running in Kubernetes pods

JavaScript and PHP open-source libraries for enabling voice chat functionality

Is it possible to apply identical css styles to multiple ids at once?

What is the best way to add three dots at the end of text when it exceeds the available space?

Opacity of absolutely positioned elements

Combining a Vuetify 2 toolbar and a navigation drawer, topped with an additional toolbar for added functionality

My attempts to use media queries are being ignored by Internet Explorer

Guidelines for managing UnprocessedItems with the AWS JavaScript SDK for dynamoDB

Using AngularJS to prevent HTML injection in input fields

retrieve information from a URL's OpenGraph metadata

Reactjs - There was an error: $node.attr(...).tooltip is not defined

Ways to prompt the debugger to pause whenever a specific script file is called during execution in Edge/Chrome debugger

Transform an iOS WebView into a user-friendly ebook reader

Creating a "select all" feature in an HTML multiple select box with jQuery - a step-by-step guide

Adding a scroll bar to a fixed container: tips and tricks