width of the cells within the grid table

What is the best way to ensure the width alignment of cells in both the header and main section? I have highlighted the correct option in the image with green checkmarks. Check out the image here.

Here is my example and solution: View the code on CodePen.

<div id="test">
    <div class="table">
            <div class="table__header">
                <div v-for="(item,index) in headers" :key="index" class="table__head-el"> 
                    {{ item.title }} 
                </div>  
            </div>
  <div class="table__body">
            <div v-for="(el, indexx) in tableItems" :key="indexx" class="table__row">
                <span v-for="(elem, indexxx) in el" :key="indexxx" class="table__field">
                    {{elem}}
                </span>
            </div>
  </div>
</div>
javascriptcssvue.js

Answer №1

To achieve a cohesive layout, consider utilizing the same grid structure for both the header and main content sections. Specifically, apply the display: grid property to the div.table element. To ensure that elements like div.table__head-el and div.table__field properly align within this grid, the containers such as div.table__header, div.table__body, and table__row need to have display: contents set. Additionally, other CSS adjustments will be necessary, while keeping the HTML and JS portions unchanged (an empty property has been added at the end of each tableItems object to match the header length).

new Vue({ 
    el: "#test",
    data: {
     headers: [
        {
          title: '#'
        },
        {
          title: 'ID', icon: 'height'
        },
        {
          title: 'Номер', icon: 'height'
        },
        {
          title: 'Тип', icon: 'height'
        },
        {
          title: 'Марка', icon: 'height'
        },
        {
          title: 'Логист', icon: 'height'
        },
        {
          title: 'Колонна', icon: 'height'
        },
        {
          title: 'Трекер', icon: 'height'
        },
        {
          title: 'Дата привязки трекера', icon: 'height'
        },
        {
          title: 'Дата последних координат', icon: 'height'
        },
        {
          title: 'Удалена'
        },
        {
          title: 'Дата удаления'
        }
      ],
   tableItems: [
        {
          number: 1,
          id: '42537370',
          numberCar: 'В855АТ147',
          type: 'Тягач',
          brand: 'Mercedes-Benz',
          logistician: 'Томсон Артём Александрович',
          column: 'Андреев Евгений',
          tracker: '86793',
          dateStart: '29.03.2021 16:42:01',
          dateEnd: '07.06.2021 13:49:39',
          isDeleted: false,
          blank: ''
        },
        {
          number: 1,
          id: '42537370',
          numberCar: 'В855АТ147',
          type: 'Тягач',
          brand: 'Mercedes-Benz',
          logistician: 'Имя Фамилия',
          column: 'Андреев',
          tracker: '48671111111193',
          dateStart: '29.03.2021 16:42:01',
          dateEnd: '07.06.2021 13:49:39',
          isDeleted: false,
          blank: ''
        }
      ],
    },
    computed: {
    },
    methods: {
  }
});
html {
  --border: 1px solid black;
  --border-radius: 8px;
}

.table {
      max-width: 100%;
    padding: 0 75px;
    display: grid;
    grid-template-columns: minmax(0, 60px) repeat(11, minmax(0, auto));
}

.table__header, .table__body, .table__row {
  display: contents;
}

.table__head-el, .table__field {
  padding: 12px 20px;
}

.table__head-el {
  border-top: var(--border);
  border-bottom: var(--border);
  margin-bottom: 20px;
}

.table__head-el, .table__field {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.table__head-el:first-child {
  border-left: var(--border);
  border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.table__head-el:last-child {
  border-right: var(--border);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.table__row:first-child > .table__field {
  border-top: var(--border);
}

.table__row:last-child > .table__field {
  border-bottom: var(--border);
}

.table__field:first-child {
  border-left: var(--border);
}

.table__field:last-child {
  border-right: var(--border);
}

.table__row:first-child > .table__field:first-child {
  border-top-left-radius: var(--border-radius);
}

.table__row:first-child > .table__field:last-child {
  border-top-right-radius: var(--border-radius);
}

.table__row:last-child > .table__field:first-child {
  border-bottom-left-radius: var(--border-radius);
}

.table__row:last-child > .table__field:last-child {
  border-bottom-right-radius: var(--border-radius);
}

.table__row:hover > .table__field {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="test">
  <div class="table">
    <div class="table__header">
      <div v-for="(item,index) in headers" :key="index" class="table__head-el">
        {{ item.title }}
      </div>
    </div>
    <div class="table__body">
      <div v-for="(el, indexx) in tableItems" :key="indexx" class="table__row">
        <span v-for="(elem, indexxx) in el" :key="indexxx" class="table__field">
          {{elem}}
        </span>
      </div>
    </div>
  </div>
</div>

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

Having trouble installing @angular/cli 4 on Debian?

I'm having trouble installing @angular/cli on my Debian box. I already have the latest versions of Node.js and npm installed. Interestingly, Angular4 works perfectly fine on my Windows machine where I use it daily. However, when I try to get it runnin ...

javascriptnode.jslinuxangulardebian

Extracting live TV channels from an m3u file by differentiating them from VOD content

Currently, I am developing an IPTV player app and have successfully parsed the m3u file. My current challenge is separating live TV channels from Video on Demand (VOD). I am unsure of where exactly the transition happens in the playlists. Below are the ke ...

javascripttypescriptnestjsm3u8m3u

Making the height of two divs equal within the same parent element using CSS

Looking for a way to make two adjacent divs, #innerwrapper .sidebar and #innerwrapper > .content, from the same parent container, #innerwrapper, have equal heights due to them being floated left. I initially used jQuery in a separate file to resolve th ...

htmlcssheight

Is it possible to have scope inherit from an object in AngularJS?

Imagine creating an app like this: <script> myArray=<?php echo $array;?>; app={ myArray:myArray, myIndex:myArray.length-1, back:function(){this.myIndex--;console.log("You clicked back");}, forward:function(){this.myIndex++} } ...

javascriptangularjs

Changing a DOM structure into pure HTML using JavaScript

Looking to convert some HTML into a PDF file using a service that requires form-data as the payload. Is there a way to extract HTML from the DOM and save it as a file for use in the payload? <p>some other HTML</p> <div id="content"> ...

javascriptform-data

Deactivate the EventListener to continue playing the video

I have a JavaScript function that pauses a video when it reaches 5 seconds. <video id="home-hero-video" preload autoplay="autoplay" muted="muted"> <source src="videourl.mp4" type="video/mp4& ...

javascript

There was an issue with Sails.js where it was unable to retrieve a recently created user using a date

One issue I encountered with Sails.js was using sails-disk as the database. When querying for a user with specific date parameters, such as: // Assuming the current date is end_date var end_date="2014-06-06T15:59:59.000Z" var start_date="2014-06-02T16:0 ...

javascriptnode.jssails.js

What is the best method to retrieve the initial elements from an array before proceeding to fetch the subsequent ones?

I'm currently in the process of setting up my blog page on my website, and I have a posts folder containing markdown files for all my blogs. I'm trying to find a way to efficiently display these blogs on a single page by initially loading only th ...

javascriptreactjsnext.js

Tips for ensuring all data is downloaded in Firebase (Firestore) Storage before proceeding?

I am currently developing a light dashboard in Vue that connects to Firestore and Storage. As someone who is not an expert, I have encountered a roadblock in what should be a simple task. The issue lies with a function that is meant to retrieve all URLs ba ...

javascriptfirebasevue.jsgoogle-cloud-firestorefirebase-storage

Retrieving the IDs of all socket connections in a Node.js Socket.IO array

I currently have a complex program utilizing socketio 0.9 where I am storing all the sockets id in arrays like so: var clients = {}; To uniquely identify and store my sockets, I assign them a serial and then set the 'socket' key with its actual ...

javascriptarraysnode.jssocket.io

Updating a Mongoose document without overwriting existing values using FindOneAndUpdate

I have the following schema: { guildId: { type: String, required: true, unique: true }, systems:{ reactChat:{ type: Array, required: true, ...

javascriptmongodbmongooseschemafindoneandupdate

Creating a dynamic webpage using Javascript that responds to user clicks on page links

I am interested in the process of inserting JavaScript objects from a JSON file in order to dynamically create a unique page based on a user's clicked link. This concept is similar to having a wildcard page in popular frameworks like Laravel or Django ...

javascriptjqueryhtmljsonajax

Is there a way to manipulate the DOM without relying on a library like jQuery?

My usual go-to method for manipulating the DOM involves jQuery, like this: var mything = $("#mything"); mything.on("click", function() { mything.addClass("red"); mything.html("I have sinned."); }); Now I am looking to achieve the same result usin ...

javascriptdom

Discovering an <a> element with an href attribute containing two specified strings

Here's what I have: $("a[href*='string1' && 'string2']") Unfortunately, this code didn't work for me. I also attempted: $("a:contains('string1' && 'string2')") The second one only return ...

javascriptjqueryhtml

Ways to reverse engineer HTML, CSS, and JavaScript code into HTML format

Help needed! I am trying to edit the user interface but all the code is in one line and I can't figure out how to decompile it back to its original state. Can anyone offer assistance with this? <html lang="en"><head><meta char ...

javascripthtmlcssreactjsdecompiling

Tips for creating a highly adaptable code base- Utilize variables

Can anyone help me optimize this lengthy and cumbersome code in HTML and JS? I want to make it more efficient by using variables instead of repeating the same code over and over. In the HTML, I've used href links to switch between different months, w ...

javascriptjqueryhtmloptimization

Discover the best method for triggering the Vue.js datepicker when a field is focused

I am facing an issue with the VueJS datepicker. It only opens when I click on its input field, but I want it to pop up when I focus on its field by pressing tab from the previous field. Despite looking for solutions on stackoverflow, I couldn't find ...

vue.jsvuejs2vuejs-datepicker

Positioning an HTML table with the use of a for loop in JavaScript

Detail of the project: -Utilizing a javascript for loop, my program extracts data from an external javascript array titled "arrays.js" and organizes it into an HTML table. The goal is to align the appropriate data under the "Date Name Address Amount" colum ...

javascript

Formik React struggling with error management and handling tasks accurately

I am currently using the Formik template to develop a Login Form. onSubmit={( values, { setSubmitting, setErrors /* setValues and other goodies */ } ) => { props.logMeIn(va ...

javascriptreactjspromise

Exploring Vue.js and iView Table integration for efficient retrieval of search response object from Elasticsearch

I have a challenge with accessing nested search response objects in my Vue.js application using the iView UI kit table with an Elasticsearch API and axios. Despite being able to access first-level fields, I struggle with retrieving data from nested arrays ...

vue.jsiview