Imagine we have a table that needs to be made responsive.
<table>
<tr>
<td>Dog Image</td>
<td>Cat Image</td>
</tr>
<tr>
<td>Dog Text</td>
<td>Cat Text</td>
</tr>
</table>What is the optimal solution for this? What I'm seeking (achieved through CSS):
Dog Image
Dog Text
Cat Image
Cat Text
Adjusting the td's display block won't work here, as stacking the images vertically is not what I want. Can someone provide guidance on this issue?
It appears that the question is quite broad as it lacks clarity regarding the type of markup being used and the definitive rules assumed.
If you are dealing with an HTML table featuring alternate sequences of images and texts, such as "row of images, row of texts, row of images, row of texts," there seems to be a content issue at hand.
The tabular markup has been utilized to represent non-tabular data, resulting in the splitting of data to cater to visual aesthetics rather than logical structure.
While you mentioned a reluctance to alter the table markup, some changes will likely be necessary. In this case, I recommend following the HTML5 approach, which involves utilizing the <figure> and <figcaption> elements.
To streamline the process, consider automating the following modifications to the source code using JavaScript:
<figure> element<figure> element and wrap them in a <figcaption> tag.Subsequently, apply display: inline-block; to the td elements for achieving the desired outcome.
Check out the demo by running it on a full page and resizing the window to witness the <td> elements becoming flexible.
figure {
margin: 0;
text-align: center;
}
td {
vertical-align: top;
display: inline-block;
}<table>
<tr>
<td>
<figure>
<img src="https://i.sstatic.net/C1285.jpg" alt="Dog">
<figcaption>“A dog is the only thing on earth that loves <br>you
more than he loves himself.”
<br>
<a href="http://www.goodreads.com/author/show/1865038.Josh_Billings">
Josh Billings</a>
</figcaption>
</figure>
</td>
<td>
<figure>
<img src="https://i.sstatic.net/FW9qs.jpg" alt="Cat">
<figcaption>“What greater gift than the love of a cat.”
<br>
<a href="http://www.goodreads.com/author/show/239579.Charles_Dickens">
Charles Dickens</a>
</figcaption>
</figure>
</td>
</tr>
</table>Although it might not provide a straightforward solution, given the unique nature of your issue, it's unlikely to find one here (assuming it exists).
My current project involves using Express to develop a small website. Here is the code snippet I am working with: var package_express = require('express'); var app = package_express(); app.get("/", function(req, res){ res.sendFile(__dirname ...
I have designed a webpage in Html called SomePage.Html, and I am looking to trigger a method every time someone visits this page. Let's say I have a Controller named DefaultController with a method called - Get() and I want this method to be executed ...
This question has significantly evolved following additional testing I am using a table layout similar to this: <table> <tr> <td></td> <td style="padding:10px 3%;"> <div border="2px solid #000000;"> ...
Is there a way to make the gradient border transition between two colors look like a straight line? Additionally, is it possible to have the line start in the bottom left corner instead of the middle of the right side of the button? The current CSS code I ...
I have implemented a file upload feature to my server using JavaScript, but I am facing an issue with certain jpeg/png files where the $_FILES and $_POST variables are empty. Despite trying various solutions, I haven't been able to resolve this issue. ...
This is my unique gallery display: https://i.stack.imgur.com/RddD8.png Here is the look I am going for https://i.stack.imgur.com/kuOye.png I want to showcase images in a slightly messy yet awesome way However, I encounter an issue when some images have ...
How can I make the logo text div tag, called Title, take up its content space inside the parent flexbox without wrapping? I prefer not to set the Title div to 100% or use white-space: nowrap. I simply want it to behave like a regular div where it fills it ...
Our application is a single page that dynamically loads results based on query strings. The query string format we use is as follows: ?city=Delhi&pn=1 Within the SPA, there are different sections displayed on the same page. As users navigate through ...
I am struggling to fetch data with JavaScript and display it in the console. Can anyone point out what I might be doing incorrectly? main.js // ADD TO CART $("#addToCartBtn").on('click',function(){ var _qty=$("#productQty") ...
While trying to enhance my footer, I attempted to include an arrow-up-circle icon. However, after adding the code, the icon doesn't appear. Here is the html snippet I used: <html> <head> <link href="https://cd ...
Is there a user-friendly method to create a flow or swimline diagram without relying on scripting or tables? Specifically, I'm looking for a way to display different hosts sending packets (with hosts along the X axis, time along the Y axis, and arrows ...
Check out this straightforward Vue example: https://codesandbox.io/s/sleepy-haze-cstnc2?file=/src/App.vue https://i.stack.imgur.com/zboCb.png Whenever I click on the square, it not only changes color but also expands to 200% of its original size with a 3 ...
Is it possible to update HTML content using JavaScript or JQuery? https://i.sstatic.net/EWOXg.png I am trying to change the contents from 1 to 5 in a sequential order based on the time shown in the image. How can I achieve this using JavaScript or JQuery ...
Currently facing a challenge where I want the background image to remain static while the address bar and content underneath scroll up. The image occupies 90% of the view height, and although I've prevented it from resizing and jumping when the addres ...
I have a question regarding the width of my element that I want to divide by 90. If this width is a multiple of 90, I set the width of the element. If not, I move on to the next. For example, when the window width is 1000px and the element is at full widt ...
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 ...
Hello, this is my first time here and I could really use some assistance. Please bear with me as English is not my strong suit compared to most people here, but I'll do my best to explain my query. So, I have a PHP script for a contact form on my web ...
https://i.sstatic.net/LVsgQ.jpgCurrently working on constructing a biography page filled with text content, and I aim to utilize CSS GRID instead of floats. I encountered an issue in getting the text to occupy all the available white space within the layou ...
As I work through a for loop in JavaScript, I am utilizing the getElementById() method to fetch multiple input values. To begin, I dynamically created various input boxes and assigned distinct id's using a for loop. Subsequently, I am employing anoth ...
When I check my website in various browsers such as Firefox, IE, Edge, and Safari, I noticed that the images in the "My Specialties" section of the left column are extending outside of the div instead of fitting within it. This problem also occurs in Chrom ...