Tips for designing table rows with varying column lengths using CSS and JavaScript

I am facing an issue while populating my table with data from a list. Currently, the table cells are being filled from left to right, but I want them to be populated from top to bottom. Unfortunately, I am unsure how to achieve this using a list method.

<template>
    <table>
    <tr>
      <td>Header 1</td>
      <td>Header 2</td>
      <td>Header 3</td>
      <td>Header 4</td>
    </tr>
    <tr>
      <template v-for='job in list1'>
      <td>{{ job.id }}</td>
      </template>
    </tr>
    <tr>
      <template v-for='job in list2'>
      <td>{{ job.id }}</td>
      </template>
    </tr>
    <tr>
     <template v-for='job in list3'>
      <td>{{ job.id }}</td>
     </template>
    </tr>
  </table>
  </template>
javascriptcssvue.js

Answer №1

Typically, when using HTML tables, the header is displayed at the top and the data is shown from left to right.

If you want to reverse this layout, you can experiment with a structure similar to the following:

<template>
  <table>
    <tbody>
      <tr>
        <td>Header 1</td>
        <td v-for="job in list1">{{ job.id }}</td>
      </tr>
      <tr>
        <td>Header 2</td>
        <td v-for="job in list2">{{ job.id }}</td>
      </tr>
      <tr>
        <td>Header 3</td>
        <td v-for="job in list3">{{ job.id }}</td>
      </tr>
    </tbody>
  </table>
</template>

Answer №2

One way to optimize the process is by pre-processing the lists before creating the table. This can be done as shown in the code snippet below:

let preprocessed = [];

for(let i = 0; i < list1.length || i < list2.length || i < list3.length; i++){
    let this_row = [];

    if(list1[i])
        this_row.push(list1[i]);
    else
        this_row.push(null);

    if(list2[i])
        this_row.push(list2[i]);
    else
        this_row.push(null);

    if(list3[i])
        this_row.push(list3[i]);
    else
        this_row.push(null);

    preprocessed.push(this_row);
}

This approach results in a single list that can be easily iterated through, containing sublists for each corresponding index from the original lists.

<template>
    <table>
        <tr>
            <td>Header 1</td>
            <td>Header 2</td>
            <td>Header 3</td>
        </tr>    
        <template v-for='elems in preprocessed'>
            <tr>
                <template v-for='elem in elems'>
                    <td v-if="elem !== null">{{ elem.id }}</td>
                    <td v-if="elem === null"></td>
                </template>
            </tr>
        </template>
    </table>
</template>

Please keep in mind that this method has not been thoroughly tested, but it should provide you with a good starting point for your project.

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

How can we make it simple for users to update webpage content using a file from their computer?

I am developing a custom application specifically for use on Firefox 3.6.3 in our internal network. My goal is to dynamically update the content of the page based on a file stored locally on my computer. What would be the most straightforward approach to ...

javascriptjqueryfilefile-upload

Componentizing Vue for Better Reusability

Currently tackling a large application filled with legacy code, I'm facing a repetitive issue that has popped up twice already. It's becoming clear to me that there must be a more efficient way to solve this problem. Here's what I'm dea ...

javascriptlaravelvue.jsvuejs2vue-component

What could be causing the uneven application of CSS padding when it is applied to a div that serves as the parent of an HTML form?

Padding has been added only to the top and bottom of a div. The padding attribute is displaying consistently for the form element, however, it is not behaving uniformly for the parent div of the form as illustrated in the image provided below. Output:- h ...

htmlcss

Adding child arrays to a parent array in Angular 8 using push method

Upon filtering the data, the response obtained inside the findChildrens function is as follows: My expectation now is that if the object length of this.newRegion is greater than 1, then merge the children of the second object into the parent object's ...

javascriptangulartypescriptangular8

Exploring the functionality of Next.js with Links and routes

Currently, I am facing an issue with the popover menu in my header that displays products. The problem arises when I click on a product in the list; it navigates correctly to the path "products/some-product" regardless of the selected item. However, if I a ...

javascriptnext.js

Tips for utilizing ion view within an ionic 2 application

In my original use of Ionic 1, I placed the footer after the <ion-content> and before . However, in the new Ionic 2, I can't seem to find any reference to <ion-view>. My specific need is to have two buttons at the bottom of the screen fol ...

htmlcssangularjsionic2hybrid-mobile-app

Retrieve dynamic data for Pivot in Devexpress AngularJS

I am currently working on an AngularJS web app where I am implementing a Pivot using devexpress, specifically utilizing the Field Chooser. You can find the example code here: In the provided example, static data is used. However, I need to fetch data dyna ...

javascriptangularjsdevexpressdevextreme

What is the best way to incorporate arrow buttons on my website in order to unveil various sections on the homepage?

A colleague and I are collaborating on a website for his cookery business. He has sketched out some design ideas on paper, one of which involves having a homepage with 4 different sections stacked on top of each other. Each section would have an arrow butt ...

javascriptjqueryhtmlcss

Utilize the findIndex method to search for an element starting at a designated index

Below is a snippet of code that I have: private getNextFakeLinePosition(startPosition: number): number{ return this.models.findIndex(m => m.fakeObject); } This function is designed to return the index of the first element in the array that has ...

javascripttypescript

Troubles with the placement of elements in a website due to

I have set up a table using PHP to display data in two columns from an XML feed. The first column appears correctly, but the second column is being cut off. For example, you can see the issue here: http://www.example.com Below is the CSS I am using: td ...

phpcss

What makes using setInterval with a self-invoking function a smarter choice?

I recently came across an explanation on how to properly use the setInterval() function. Essentially, it was mentioned that (function(){ // perform some actions setTimeout(arguments.callee, 60000); })(); ensures that the subsequent call from setTim ...

javascript

I require a way to decelerate the speed of the roulette wheel's rotation

For my assignment, I'm tasked with creating a roulette spin wheel code in JavaScript without using any plugins. I need to incorporate some conditions before executing the code, particularly for slowing down the speed of the roulette spin. Additionally ...

javascripthtmlhtml5-canvas

Struggling to integrate pdfform.js into a React application

Struggling to integrate the pdfform.js library into my React app. I attempted to use the npm package pdfform, but encountered some difficulties. If anyone has any tips or guidance, it would be greatly appreciated. Check out the pdfform.js library on GitH ...

javascriptreactjspdf

Determining the current directory and file name in React and Webpack

Currently, I am working on a react js project and utilizing webpack and redux. Below is the organization of folders in my project: -assets -src -component -index.jsx -container -index.jsx My goal is to assign dynamic className to the inde ...

javascriptreactjspathwebpack

What are the best practices for implementing the CSS id selector?

As someone new to web development, I am facing an issue with my code where the CSS id selector is not functioning as expected: li { border: 3px solid red; } h3 { background: green; } #special { color: green; } <h3>Todo List</h3> < ...

htmlcss

unable to see the follow button in the website's Vue component

I am struggling to locate the button on my website Let's take a look at the FollowButton.Vue code below: <template> <div> <button class="btn btn-primary ml-4">Follow Me Now</button> </div> </temp ...

phplaravelvue.js

With TypeScript, you have the flexibility to specify any data type in the generic types when using the axios.get method

axios.get('/api') When working with TypeScript as shown above, it is important to designate types for better clarity. This allows us to reference the type definition of axios, like so: (method) AxiosInstance.get<any, AxiosResponse<any> ...

javascripttypescriptaxiostypescript-generics

Toggle the class and execute the order within a jQuery script

When the mouse moves in, the jQuery trigger enters the status. $(".test").bind("mouseenter mouseout", function(event) { $(this).toggleClass("entered"); alert("mouse position (" + event.pageX + "," + event.pageY + ")"); }); .entered { ...

javascriptjqueryhtmlcss

Setting the 'checked' status of a select option in a Bootstrap modal dynamically

I recently implemented a Bootstrap modal that is triggered by a link passing multiple parameters to display a select list for users to rate between 1 and 5. While this functionality is working as expected, I now face the challenge of having the select menu ...

javascriptjqueryhtmlbootstrap-4

How can Angular's as-syntax be used to access the selected object?

When using syntax like ng-options="p.id as p.name for p in options" to select options, I encounter an issue. I require access to the variable p as well. This is necessary for displaying additional labels near inputs or buttons, or even making changes to in ...

javascriptangularjs