How do I use CSS to organize data by row and column within a table?

I'm looking to format the table data in a column-row layout for mobile devices. Can anyone provide an example or guidance on how to achieve this? I've browsed through some discussions but haven't found a solution that works with tables.

The table structure is as follows:

table, th, td {
  border:1px solid black;
}
@media screen and (max-width: 768px) { 
}
<!DOCTYPE html>
<body>

<h2>A basic HTML table</h2>

<table style="width:100%">
  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
    <th>E</th>
    <th>F</th>
    <th>G</th>
    
    
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>

</table>



</body>

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

htmlcss

Answer №1

It may seem a bit cumbersome since you have to define specific CSS for each column, requiring prior knowledge of the maximum number of columns your table might have. However, you can achieve the desired layout by applying a flex order to each column. Here's an example:

table, th, td {
  border: 1px solid black;
}
th {
  text-align: left;
}
@media screen and (max-width: 768px) { 
  tbody {
    display: flex;
    flex-direction: column;
  }
  tr {
    display: contents;
  }
  tr>:nth-child(1) {
    order: 1;
  }
  tr>:nth-child(2) {
    order: 2;
  }
  tr>:nth-child(3) {
    order: 3;
  }
  tr>:nth-child(4) {
    order: 4;
  }
  tr>:nth-child(5) {
    order: 5;
  }
  tr>:nth-child(6) {
    order: 6;
  }
  tr>:nth-child(7) {
    order: 7;
  }
}
<table style="width:100%">
  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
    <th>E</th>
    <th>F</th>
    <th>G</th>
    
    
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>

</table>

Answer №2

It seems like you're having trouble with your query. Are you trying to transform columns into rows for mobile devices or screens smaller than 768px, with each column title becoming a row? If so, one approach is to modify the display property of the columns to flex using media queries.

@media screen and (max-width: 768px) { table tbody>tr>td {
display: flex !important; }}

To hide the column titles on small screens, you can also use CSS:

@media screen and (max-width: 768px) { table tbody>tr>th:nth-of-type(1)~th {
display: none !important; }}

You can then use JavaScript to clone the column titles and append them within each respective row. By iterating through each column and cloning its title, you can achieve the desired outcome.

While it may seem complex, this method should effectively accomplish what you're looking to achieve.

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

Numerous covert fields within HTML

I am currently working on a popup dialog box where I need to include a set of values in hidden format. However, when I retrieve the value through AJAX post, only the last value is returned. In my PHP code snippet: $plan_ids=array(); foreach($test_plan as ...

phphtmlajax

Error message: Uncaught TypeError - Unable to access property value from null reference in Quicksort.js

Can someone assist me in resolving the "uncaught typeerror cannot read property of null" issue I'm facing on line 4 of my JavaScript code? This is my first post on this platform and I hope to find some help here! function sort() { var array = docume ...

javascripthtmlquicksort

Having an issue in Angular 2 where the correct function is not triggered when a button is placed within a selectable anchor

Within an anchor element, I have a button that triggers its own click listener for an editing popup module. The anchor itself has another click listener assigned to it. For example: <a (click)="onClick(myId)" class="list-group-item clearfix"> < ...

javascripthtmlangulartypescript

Seeking Assistance with Customizing HTML Uniform Panels

Looking at the HTML provided, I have two requirements: Request: I need to center the green boxes regardless of their height, without having to adjust the top:-10px/bottom:-10px values when the height changes. Eliminate the fixed top/bottom value (as the ...

htmlcss

How to implement multiple dependent select boxes in Rails?

I'm currently working on developing a car application where each car is assigned to a specific make and model. However, not all makes have every model available. My goal is to create a series of select boxes that update dynamically based on the selec ...

jqueryhtmlruby-on-railsajaxselect

How can you align a list next to a set of images using HTML and CSS?

When working with these images in my code, I need to create a list alongside them: <div class="asideContent"> <ul> <li> <p> </p> </li> <li> <p></p> </li> ...

htmlcsslist

How can one retrieve the 'alt' attribute text from an image tag on a webpage using the JSOUP library in an Android application?

Extracting the 'alt' text from an 'img' tag in Android after clicking a button is causing issues. The attempted code is not working as expected. Here is the snippet of the code that was used: Document doc = Jsoup.connect(url).get(); ...

javaandroidhtmlweb-scrapingjsoup

Tips for deleting all content within a designated html tag (including the tag itself)

Imagine you are dealing with a string like this: text = """<p>Bla bla bla.</p><p>Blo blo blo<a href="http://www.example.com">bli bli</a>.</p><p>blu blu<br> <span style="font-size: x-small;"><br> ...

pythonhtmltags

What is the process for registering a click using a class in jQuery and retrieving the ID of the clicked element?

Currently, I am working on developing a webpage where I need to use jQuery to register a click using the items class and then extract the ID of that particular object. For example: HTML: <div class="exampleclass" id="exampleid1"></div> <d ...

javascriptjqueryhtml

"By setting the HTML input box to read-only, the JavaScript button has the

Check out this js fiddle demonstration: http://jsfiddle.net/YD6PL/110/ Here is the HTML code snippet: <input type="text" value="a" readonly> <input type="text"> <input type="text"> <div> <button class="buttons">c</button ...

javascripthtml

Display of content visible via stationary div

Recently, I successfully implemented a fixed div that remains at the top of my webpage. However, I encountered an issue where text would appear through the div when scrolling. You can witness this phenomenon by visiting this site and simply scrolling down ...

htmlcss

Executing Javascript code from a specified web address

Let's say I have an image that needs to be shifted vertically, and I achieve it using the following code snippet: document.getElementById('ImgID1').style.verticalAlign = However, the value by which I need to shift the image is provided thr ...

javascriptcssjsondomvertical-alignment

Is there a way to make a <div> load automatically when the page starts loading?

I'm having an issue with my code where both <div> elements run together when I refresh the page. I want them to display separately when each radio button is clicked. <input type="radio" name="cardType" id="one" class="css-checkbox" value="db ...

javascriptjqueryhtml

Expanding Issue with Bootstrap Navigation

Hello! I am experiencing an issue with my navbar. The menu collapses, but it does not expand. I have used an example from Bootstrap and made some tweaks, but for some reason, it still doesn't expand properly. Below is the code that I have been workin ...

htmlcsstwitter-bootstrap

Should header and footer be incorporated as part of a template design?

Is it considered advisable to include tags such as etc from another page? For example: <?php include_once("header.php")?> Content specific to each individual page <?php include_once("footer.php")?> The header.php file includes: <!DOCTYP ...

phphtmlcss

Run a function upon clicking a button in JavaScript

Could someone please help me figure out what I am doing incorrectly in the code below? I am attempting to trigger a function when a button is clicked. The HTML: <button id="btn1">Press me!</button> <input type="button" id="btn2" value="Pr ...

javascripthtmlfunctionbuttonunobtrusive-javascript

What is the best way to limit data loading when tabs are clicked in an AngularJS application?

My application has 2 tabs and all data is fetched from an API response. Initially, all data is loaded at once. The two tabs are: Tab 1 Tab 2 By default, Tab 1 is always active. I only want to load data for Tab 1 initially and not for Tab 2. When I c ...

javascripthtmlangularjs

What do you think about removing the Bootstrap styling from the design?

As a newcomer to Bootstrap and currently working on my second project using this framework, I find myself struggling with overriding CSS styles. It can be time-consuming to locate the specific style that needs to be changed rather than starting from scratc ...

csstwitter-bootstrap

The data integrity was compromised at /notes/add due to a failure in the NOT NULL constraint for the created field

Having encountered an issue while trying to execute the add function in Django2, I am unable to create a new post. The error message is as follows: IntegrityError at /notes/add NOT NULL constraint failed: notes_note.created Please find the views below: ...

pythonhtmlcssdjangoweb

Comparing iPad and Desktop Devices

Working on the responsive site sandbox.mercomcorp.com, I encountered an issue where the CSS meant for an iPad device is affecting the desktop CSS. Shouldn't the iPad have its own separate media query from the desktop? Here's a snippet of the CSS: ...

ioscssipadresponsive-design