Tips for rotating a responsive table on a mobile device's screen

I am currently managing a blogger website that features an HTML table on the homepage. I am struggling with making this table responsive for mobile devices, and I would like it to look similar to the image provided below. Can someone guide me on how to achieve this desired outcome as I do not have extensive knowledge in CSS?

https://i.sstatic.net/ZH3ml.png

Here is the HTML code snippet:

<table border="1" cellspacing="1" style="width: 100%px;">
  <tbody>
    <tr>
      <td>
        <a href="" target="_blank">
          <img alt="" border="0" src="https://hiru.lk/8Ds0Tf" title="" /></a>
      </td>
      <td>
        <a href="" target="_blank">
          <img alt="" border="0" src="https://hiru.lk/8Ds0Tf" title="" /></a>
      </td>
      <td>
        <a href="" target="_blank">
          <img alt="" border="0" src="https://hiru.lk/8Ds0Tf" title="" /></a>
      </td>
    </tr>
  </tbody>
</table>

htmlcssblogger

Answer №1

Utilizing CSS-grids here would be a smart move.

Take a look at this illustration:

.grid-container {
  display: grid;
  gap: 1px;
  width: 100%;
}

.grid-container>a {
  border: 1px solid black;
  box-sizing: border-box;
}

.grid-container>a>img {
  display: block;
  width: 100%;
  height: auto;
}


/* For large screens */

@media only screen and (min-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(3, 1fr);
  }
}
<div class="grid-container">
  <a href="" target="_blank">
    <img alt="" border="0" src="https://hiru.lk/8Ds0Tf" title="" />
  </a>
  <a href="" target="_blank">
    <img alt="" border="0" src="https://hiru.lk/8Ds0Tf" title="" />
  </a>
  <a href="" target="_blank">
    <img alt="" border="0" src="https://hiru.lk/8Ds0Tf" title="" />
  </a>
</div>

Answer №2

 table {
        width: 100%;
        border-collapse: collapse;
    }

    td {
        padding: 5px;
        text-align: center;
      border: 1px solid #000;
    }

    /* Small screens */
    @media (max-width: 600px) {
        table {
            display: flex;
            flex-direction: column;
        }

        tr {
            display: flex;
            flex-direction: column;
        }

        td {
            width: 100%;
        }
    }
<table>
    <tbody>
        <tr>
            <td>
                <a href="" target="_blank">
                    <img alt="" border="0" src="https://hiru.lk/8Ds0Tf" title="" />
                </a>
            </td>
            <td>
                <a href="" target="_blank">
                    <img alt="" border="0" src="https://hiru.lk/8Ds0Tf" title="" />
                </a>
            </td>
            <td>
                <a href="" target="_blank">
                    <img alt="" border="0" src="https://hiru.lk/8Ds0Tf" title="" />
                </a>
            </td>
        </tr>
    </tbody>
</table>
When the screen size is smaller than 600px, the table layout changes. The table is displayed as a flex container with columns stacking vertically. Each row in the table also stacks vertically due to being displayed as a flex container. This creates a more responsive design for small screens.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Align text vertically within a link box by overriding inherited CSS styles

Fiddle: http://jsfiddle.net/jgallaway81/ax9wh/ <a href="lcars.jfx.php" class="leftbuttons buttonlinks antibutton"> LCARS Locomotive O.S. </a> My issue pertains to the alignment of text within a graphic. I am utilizing this particular button ...

cssinheritance

Secondary menu supersedes primary dropdown menu

Having trouble getting a vertical dropdown menu to work properly, with the submenus overriding the main menu. I've searched everywhere for a solution but can't seem to find one. Anyone out there who could help me figure this out? Here's the ...

htmlcss

Can anyone recommend any offline editors for HTML, CSS, and JavaScript similar to JSFiddle, jsbin, or codepen?

Is there an alternative to JSFiddle.net that allows users to experiment with Javascript, HTML, and CSS offline in a similar way? ...

javascripthtmlcss

What is the process for creating a two-column table in Angular?

Currently, I have an Angular template code that displays the header on the left and data on the right in a top to bottom layout. <div class="panel-body"> <table class="table table-striped"> <tr ng-repeat="f in fields"&g ...

htmlcssangularjstwitter-bootstrap

series of lines including <ListItemText>

https://i.sstatic.net/L8FUC.png I have been using Material-ui with react. Currently, I am working on creating a list in React that contains long text. However, when the text is too long, it is displayed as a single line which is not what I want. I would ...

cssreactjsmaterial-ui

Get rid of the box-shadow on the Vuetify element

I currently have a special-table component that includes a box shadow when the row is expanded https://i.stack.imgur.com/8zgjp.png I am aiming for the removal of the box-shadow effect. After inspecting the console-style tab, I identified https://i.stac ...

cssvue.jsvuejs2vue-componentvuetify.js

Using dryscrape for web scraping: encountering an issue when selecting a radio button with CSS

I am attempting to extract data from a dynamically updated table on a webpage using dryscrape. The web page in question is located at . My code functions correctly with tables that are generated when the page is loaded initially. However, I now need to upd ...

pythoncssxpathdryscrape

Unable to render Angular charts

Recently, I've been attempting to integrate angular charts using the chart.js bundle sourced from CDN links. The version of Angular being used is 1.5.7 and for chart.js it's 2.1.6. I encountered the following error message: angular.js:13708 T ...

javascripthtmlangularjschartsangular-chart

Utilizing JQuery to modify the element's id and trigger a function upon clicking

There is an element with a specific ID that I have changed. However, even after changing the ID and clicking on the element with the new ID, it still triggers the function associated with the old ID. $('#1st').click(function(){ $('#1s ...

javascriptjqueryhtml

What is the best way to place a JavaScript or jQuery variable within an HTML tag?

Suppose we have a variable called var sticky_element = ".menu"; and then there's this line of code: jQuery(sticky_element).wrapInner('<div class="menu-inner"></div>'); How do we replace the menu in class="menu-inner" with the ...

javascriptjqueryhtmltagsvar

The function element.checked = true/false in Vanilla Javascript seems to be malfunctioning

Here is the HTML code I am working with: <ul class="nav md-pills pills-default flex-column" role="tablist"> <li class="nav-item"> <input type="radio" name="q01" value="1" hidden checked> <a class="nav-link choice01 ...

javascripthtmlradio-buttonchecked

What is the best way to structure Vue.js components for optimal organization?

Imagine having an index page called index.vue consisting of various components like this: index.vue <template> <div> <component-1 /> <section class="section-1"> <div class="container section-container"> <com ...

javascriptcssvue.js

Discovering the present width of an Angular element after it has been eliminated

Imagine you have a horizontal navigation bar coded as follows: HTML: <ul> <li ng-repeat="navItem in totalNavItems">{{name}}</li> </ul> CSS: ul, li { display: inline-block; } The data for the navigation items is fetched from thi ...

javascriptjqueryhtmlangularjs

CSS swapping versus CSS altering

Looking to make changes to the CSS of a page, there are two methods that come to mind: Option 1: Utilize the Jquery .css function to modify every tag in the HTML. For instance: $("body").css("background : red") Alternatively, you can disable the current ...

javascriptjquerycss

Trouble arises when implementing a nested flex layout in Angular Material shorthand

I'm having trouble identifying the issue with this particular layout. My goal is to maintain a Single Page Application layout where the "deepest" component only becomes scrollable if the viewport height is too small, as indicated in the snippet by us ...

cssangularjslayoutflexboxangular-material

Retrieve only the initial tag content using jquery

My goal is to extract the "22" from the following code... <div class="left"> <a class="count-link" href="http://url1.com"> <span>22</span> users </a> <a class="count-link" href="http://url2.com"> <span>10</span ...

javascriptjqueryhtmldom

AngularJS enables tab highlighting by responding to button selections

In my application, there are 3 tabs set up as follows: <li ng-class="{ active: isActive('#one')}"><a data-toggle="tab" class="tab-txt-color" href="#one" ng-click="selectTab('fruits') ...

htmlcssangularjs

How to style a webpage to be printed in CSS with A4 dimensions

Whenever I try to print my webpage, I encounter an issue where everything changes on the printout. I would like to be able to print a webpage that looks exactly like what is displayed on the screen. Here is an example of what I am looking for: enter imag ...

cssbootstrap-5

In order to achieve a sliding effect for the second div, it can be programmed to

Currently, I am working on implementing hide and show functionality in my project. However, I have come across a bug in my code that I need assistance with. When clicking on the first div element, the content opens from bottom to top instead of the desired ...

javascripthtmljquerycssjquery-events

What is the procedure for inserting comments into inline CSS?

You know, I've been wondering how to effectively comment out inline CSS styles within HTML tags. Is it best to use the /* */ comments from CSS? Or should we opt for <!-- --> in HTML? <span class="color_dark" style="top:20px;font-size: 17px;l ...

htmlcss