Stack the <td> elements vertically rather than reducing the width of each <td> cell

I am currently using a standard HTML table to showcase data pulled from an API.

<table style="width:100%">
  <tr>
    <td></td>
    <td></td> 
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td> 
    <td></td>
  </tr>
</table>

In my design, the page layout is responsive.

As the screen width narrows and the content exceeds the space, I am looking for a CSS solution to reformat the <td> elements to behave like individual rows - creating 6 vertically aligned cells with the given code snippet. Is this possible?

htmlcss

Answer №1

Definitely! You can achieve this by using the CSS properties display:block and width:100% on the <td> element.

table tr td {
  display: block;
  width:100%;
}
<table style="width:100%">
  <tr>
    <td>1</td>
    <td>2</td> 
    <td>3</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td> 
    <td>c</td>
  </tr>
</table>

If you prefer a 2-column layout, you can use the following CSS:

table tr {
  display: inline-block;
  width:50%;
  float: left;
}
table tr td {
  display: block;
  width:100%;
}
<table style="width:100%">
  <tr>
    <td>1</td>
    <td>2</td> 
    <td>3</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td> 
    <td>c</td>
  </tr>
</table>

Answer №2

Here's a simple method to achieve this:

For regular display:

.fullTable{
 display: block;
}
.singleLineTable{
 display: none;
}

And for when your media query is active:

.fullTable{
 display: none;
}
.singleLineTable{
 display: block;
}

Below is the HTML code, but keep in mind it may increase DOM load:

<table style="width:100%" class='fullTable'>
  <tr>
    <td></td>
    <td></td> 
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td> 
    <td></td>
  </tr>
</table>
<table style="width:100%" class='singleLineTable'>
      <tr>
        <td></td>
        <td></td> 
        <td></td>
        <td></td>
        <td></td> 
        <td></td>
      </tr>
</table>

This approach allows you to display only one table based on your media query conditions.

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

Troubleshooting navigation problems in AngularJS Bootstrap Navbar

Currently, I am working on integrating AngularJS with Bootstrap3 for a mobile application. In my index.html file, I have added a navbar (navbar-fixed-top) and there are forms loaded through partials/myform.html. However, when I scroll the page and a textbo ...

javascripthtmlcssangularjstwitter-bootstrap

In Bootstrap cards, image overlays are always displayed on top of the image

I'm struggling to understand why I can't get the image in this HTML snippet to appear anywhere other than on top. Despite my attempts to adjust z-index, use !important overrides, and try other methods for hours, I haven't been successful. My ...

htmlcssbootstrap-4z-indexbootstrap-cards

Animate failed due to the appending and adding of class

$('#clickMe').click(function() { $('#ticketsDemosss').append($('<li>').text('my li goes here')).addClass('fadeIn'); }); <link href="http://s.mlcdn.co/animate.css" rel="stylesheet"/> <script ...

javascriptjquerycssanimationanimate.css

Incorporate an external hyperlink into a tabPanel or navbarMenu within an R Shiny application

I am struggling with adding external hyperlinks to the tabs and dropdowns in a navbar setup using Shiny (implemented with bootstrapPage). While I have come across solutions for linking to other tabs within a Shiny app, my goal is to link to an external web ...

htmlrshiny

A guide on verifying the percentage value of an element's height in Selenium with Java

I was able to retrieve the element's height in pixels using: element.getCssValue("height") However, the height returned was: Height: 560px What I actually need is for the height to be displayed as: Height: 100% Or perhaps Height: 50% ...

javacssseleniumselenium-webdriver

Modifying the variable value upon clicking

I need to update a variable value on click, in order to send the updated value via ajax and load data either in ascending or descending format. Below is the JavaScript section at top of the page. var sortDirection = '0'; Now, here is the corre ...

javascriptjqueryhtmlajax

How can I show PHP retrieved data in separate text areas?

Struggling to retrieve values from the database? Simply select an employee ID using the 'selectpicker' and watch as the corresponding name and salary are displayed in the textarea. So far, I've managed to set up the following HTML Code: &l ...

javascriptphpjqueryhtmlbootstrap-4

Here's a way to align big text in the center while aligning small text at the bottom

How can I position two text blocks on the same line in HTML, with one text block having a larger font size and vertically aligned in the middle, while the other text block sits lower to create a cohesive design? To better illustrate what I mean, I have cre ...

htmlcssvertical-alignmentfont-size

Provide solely the specified content range

While working with Node.js, my goal is to develop a video server that can serve a specific portion of a larger media file. Thanks to this gist, I have successfully created a video server and integrated it with an HTML5 video player using: <video contr ...

javascripthtmlnode.jsvideoheader

What causes padding/margin when using overflow: hidden?

Today, I came across a peculiar issue. Adding the overflow: hidden style to a div seems to create extra blank space around its header content, resembling margin or padding. While this might go unnoticed in most cases, it's causing a problem with an an ...

cssangularbootstrap-4

Avoid using CSS browser prefixes when selecting plugins or addons

I tried searching on Google for a solution, but I couldn't find anything! Is there a trick or library available to avoid repeating CSS extensions for browsers? Instead of using -webkit-, -moz-, and -o- prefixes? -webkit-animation: NAME-YOUR-ANIMATI ...

jquerycss

I'm interested in utilizing Angular JS $anchorScroll to quickly navigate to the top of a page by using <a href>

Could you assist me in properly executing $anchorscroll with an href like this? Html: </div> <div> <a class="button" ng-click="scrollTo('section')" ng-href="#{{url}}" title="{{section}}">Next</a> </div> ...

angularjshtml

What is a method for capturing the value of a nested input element without requiring its ID to be

Currently, I am facing a challenge in selecting the value of an input box from a user-generated ordered list of text boxes and logging its value to the console. It seems like I cannot find a way to select the value of a child's child element when the ...

javascripthtmlfunctiononclick

Efficiently handling multiple form submissions using a single jQuery Ajax request

I'm working on a page that has 3-4 forms within divs, and I want to submit them all with just one script. Additionally, I want to refresh the content of the specific div where the form is located. However, I'm unsure of how to specify the current ...

javascriptphpjqueryhtmlajax

Moving a DOM element within AngularJS to a new location

I have created an angular directive that functions like a carousel. To keep the dom element count low, I delete elements from the dom and then re-insert them using angular.element to select, remove, and insert items as shown below: app.directive('myD ...

javascripthtmlangularjs

What is the method for individually extracting values from HTML using class li?

Is there a way to extract each value from the HTML within the li class separately? I have tried various methods but none have been successful. Can anyone provide a solution? Here is my JavaScript code: $(document).ready(function() { $(".list-grou ...

javascripthtmljquery

What steps should I take to resolve the issue with my various layouts in Thymleaf?

Encountering an issue while trying to incorporate another fragment from a layout page that contains two fragments. One is for the header and the other for a post form. Including just the first one results in a problem, but adding the second one leads to tw ...

javahtmlspringspring-bootthymeleaf

The advice I received was to avoid using max-width and instead utilize min-width when styling with CSS

With @media screen and (max-width:700px) { Link to image 1 Whenever I use @media screen and (min-width: 700px) { it messes up. How can I adjust it for min-width without causing issues? Link to image 2 ...

css

Struggling to add a line break in my code

class Test extends React.Component{ state={name: "John", numTimes: 2}; render() { let output = "" for (let i = 1; i <= this.state.numTimes; i++) { let evenOdd = i % 2 if (evenOdd === 0) { output += i + ". Hello " + this.state.name + ...

javascripthtmlcssreactjsjsx

Problem with alternating row colors in my table

Trying to add some style to my table on the webpage by alternating row colors, but I'm running into some issues. I've followed tutorials and tried using different CSS selectors like nth-of-type(even), nth-of-type(2n+0), and nth-of-type(odd). Howe ...

htmlcss