CODEWITHSUNDEEP
html-tablemedia-queriesborder-spacing
Surendranath Sonawane
Surendranath Sonawane

Reputation: 1737

How to make a right aligned td to top in the mobile view?

For Desktop View table look like this

header 1 Body 1
header 2 Body 2
header 3 Body 3

For Mobile View table look like this

header 1
Body 1
header 2
Body 2
header 3
Body 3

Upvotes: -1

Views: 23

Answers (1)

Surendranath Sonawane
Surendranath Sonawane

Reputation: 1737

Here, before min width 1110px will consider as mobile view and after this will consider as desktop view:

/* Mobile View*/
      table {
        border-spacing: 0 1rem;
      }

      td {
        display: block;
        border: 1px solid black;
      }
      /* Desktop View*/
      @media screen and (min-width: 1110px) {
        td {
          display: table-cell;
        }
      }
<!-- Expand snippet for desktop view -->
<table>
      <tr>
        <td>Header 1</td>
        <td>Body 1</td>
      </tr>
      <tr>
        <td>Header 2</td>
        <td>Body 3</td>
        <td>Body 3-1</td>
      </tr>
      <tr>
        <td>Header 3</td>
        <td>Body 3</td>
      </tr>
    </table>

Upvotes: 0

Related Questions