What are some techniques for creating a responsive table in CSS that includes images?

After much searching, I am confident that using "Skeleton CSS" will help achieve my goal.

The concept is simple, but implementation is proving to be difficult. I am trying to create a table with multiple images that will change width to 750px when displayed on a smaller screen.

You can view the images I am working with here:

Currently, the images are staying fixed in size. This is because I simply sliced them from a PSD file and saved them for the web.

Although I am okay with the images scaling down in size for tablet (754px) and desktop (960px) displays, I really just need them to transition from one width to the other.

Here is a snippet of the current HTML code:

<table id="Table_01" width="960" height="500" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td>
        <img src="images/home_maingrid_01.png" width="310" height="160" alt=""></td>
    <td rowspan="5">
        <img src="images/home_maingrid_02.png" width="15" height="500" alt=""></td>
    <td rowspan="3">

My main goal is not to get a complete solution, but rather to receive guidance in the right direction to avoid wasting time.

This is for a Magento homepage where different features will be displayed. I have a separate store view for mobile, which is why I am focusing on widths of 960px and 754px.

htmlcss

Answer №1

By removing the width and height attributes from the img and table tags, and instead using CSS to define the width of the images as 100%, you can then set the width of the table to your desired size while making each cell a percentage of the table:

table {
    width:960px;
    height:500px;
}
@media only screen and (max-width: 754px){
    table {
        width:500px;
        height:330px;
    }
}

^(adjust these values as needed)^

Does this solution meet your requirements?

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

Function not being triggered by button

We are struggling to get a button to trigger a function upon being clicked. Is there a reason why the function is not being called? <body> <button onclick="instagramclick()">Login to instagram</button> <button onclick="myFunction( ...

javascripthtmlbutton

Is it possible to generate multiple modal windows with similar designs but varying content?

I am facing a challenge with 140 link items that are supposed to trigger a modal window displaying a user profile for each link. The issue is that each user profile contains unique elements such as three images, a profile picture, text paragraph, and socia ...

javascriptjqueryhtmlcssmodal-dialog

I seem to be having trouble properly sizing the width of my forms in Mui React

Having trouble with the sizing of my tabs in a project I'm working on. The first tab displays ingredients, while the second tab allows for adding new ingredients with various forms. However, when selecting different forms, the width of the form contai ...

cssreactjsmaterial-uistyles

Material design for Angular applications - Angular Material is

Recently, I decided to explore the world of Angular and its accompanying libraries - angular-material, angular-aria, and angular-animate. I'm eager to experiment with this new styling technique, but it seems like I've hit a roadblock right at the ...

javascripthtmlcssmaterial-designangular-material

Choosing Text with JavaScript

I am looking to enhance the appearance of text on an HTML page by making it bold. I have implemented the following code: <script type="text/javascript" > function getSelectedText(){ if(window.getSelection){ ; return window.getSelect ...

javascriptjqueryhtmldomselection

Implement a floating div below an accordion element on the page

As depicted in the image, there is a "Quick Tips" div located below the accordion. Let's assume the outermost div is named id="TipsDiv". The goal is to ensure that this div remains below the accordion as the user scrolls down, never going above positi ...

jqueryhtmlcssinternet-explorer-8

Iterate through a JavaScript object while preserving the key along with its corresponding value

var info = { 2016-09-24: { 0: {amount: 200, id: 2}, 1: {...} }, 2016-09-25: { 0: {amount: 500, id: 8}, 1: {...} } } In order to display the data stored in the object above, I want to create a view that looks like this: "**" will r ...

htmlreactjsobject-literal

Expansive full screen image proportions

Is there a way to showcase an image on the entire screen without distorting it, while maintaining its aspect ratio in either HTML or Javascript? The desired outcome is for the image to be centered and: - Have a height of 100% and a width of x% (where "x" ...

javascripthtmlcss

Prioritize the timepicker over the use of a modal window

Having an issue with my time picker in Angular being blocked by a modal window. Component.ts open() { const amazingTimePicker = this.atp.open(); amazingTimePicker.afterClose().subscribe(time => { console.log(time); }); } // T ...

htmlangulartypescripttimepicker

Centered on the page vertically, two distinct sentences gracefully align without overlapping, effortlessly adjusting to different screen sizes

I had no trouble centering horizontally but I'm struggling with vertical alignment. I want these two sentences to be positioned in the middle of the page, regardless of device size. I attempted using vertical-align without success and then tried posit ...

htmlcsscss-positionvertical-alignment

An issue has occurred due to an illegal mix of collations (greek_general_ci,IMPLICIT) and (utf8_general_ci,COERCIBLE) when performing the operation 'like'

Although this topic has been extensively covered, my issue presents a slightly different challenge. I have set the default charset to utf8 in both the connection made to mysqldb in my Python code and my HTML files. conn = pymysql.connect(host='my ...

htmlmysqlinpututf-8collation

Submitting a form using JQuery triggers an error message related to character encoding

While attempting to submit a form using jQuery, I encountered an issue. Firebug displayed a strange error message in German, leading me to believe that there may be a peculiar character in the HTML causing the problem. The character encoding of the plai ...

jqueryhtml

Why is it that when I refresh the page in Angular, my logged-in user is not being recognized? What could be causing this

I am developing a Single Page Application using the combination of Angular JS and Node JS. In my HTML file, I have defined two divs and based on certain conditions, I want to display one of them using ng-if. However, I noticed that the model value used in ...

javascripthtmlangularjsnode.jssingle-page-application

What is the best method for utilizing the jQuery Selector in this particular web application?

I have been attempting to figure out how to select a delete icon within my personal web application. delectIcon HTML <main> <div class="container"> <div class="tabs"> <a href=""><p><span class="act ...

javascriptjqueryhtmlcss

What is the best way to place text inside a TH element without any text within the TH's child nodes?

When parsing a website and obtaining the instance of a TH element, I use innerText to extract the text I need. However, sometimes there is additional unnecessary text that I want to exclude. Is there a way to only retrieve the top-level text? var th_elem ...

javascripthtml

Obtaining the text of a span tag within a div using Selenium in C#

<div id="uniqueSummaryID" class="custom-text" data-reactid=".0.0.0.3.0.0.1.0.0.0.0.$unique_key_25.1.1.0"> <span data-reactid=".0.0.0.3.0.0.1.0.0.0.0.$unique_key_25.1.1.0.0">5</span> <span data-reactid=".0.0.0.3.0.0.1.0.0.0.0.$unique_ke ...

c#htmlcssselenium

Concealing a div based on a condition

Having difficulty concealing a div once a specific condition is met. The condition depends on the user logging into a web application. In my CSS file, I have set the multipleBox div to visibility: hidden, along with other styling attributes like border co ...

javascripthtmlcssajaxjsf

The Vue.js component fails to display when included within another component

I am experiencing an issue with a menu item not displaying properly in my Vue.js application. The menu item should display the text "This is a menu item", but for some reason it is not being processed and rendered by Vue. These are the main com ...

javascripthtmlvue.jsvuejs2vue-component

Having trouble setting up a page layout with CSS grid or grid-template-areas

Hey everyone, I'm a beginner in the world of HTML, CSS, and JS and this is my first time reaching out for help. I've been searching through various forums and spending quite some time on this particular issue, but unfortunately, I haven't fo ...

htmlcsscss-grid

Show results based on the selection of multiple checkboxes upon submission

When creating PHP pages to fetch data from databases, each checkbox is linked to a different page. I want to be able to check one or multiple checkboxes and then click the submit button to display the PHP pages that are linked to the checked checkboxes. Ho ...

phphtmlajaxjscript