What is the reason for parent rows not stretching fully across the width of the page?

I am working on creating a simple table in Vue.js with Bootstrap. When the arrow is clicked, the child row is displayed, and I want it to appear below the parent row. I achieved this by setting

display:flexbox; flex-direction:column;

Here is the HTML table:

<table>
    <thead>
        <tr>
            <th scope="col"></th>
            <th scope="col">ID</th>
             ...
            <th scope="col">Actions</th>
    
        </tr>
    </thead>
    <tbody>
        <tr class="parent" v-for="item in data" :key="item.data.ID">
            <td>
               ...
              </button>
            </td>
            ...
                 <td>{{ item.data['Knows the answer?'] }}</td>
                    ...
                      </button>
                   ...
                </td>
              
            <template v-if="item.children && item.children.has_nemesis && Array.isArray(item.children.has_nemesis.records) && item.children.has_nemesis.records.length && item.childrenVisible">
                ...
                        <td >{{ secret.data['Secrete Code'] }}</td>
                     ...
        
                 
                
                          
                               
                                      
                                          
                                        ...
                                     
                                              
                                                
                                                
                                           
 
        </tbody>
    </table>

However, this layout caused the parent rows not extend full length (see image) https://i.stack.imgur.com/UL2k0.png

Applying CSS:


    table {
        border: 5px solid red !important;
        display: flex;
        flex-direction: column;
    }

    thead{
        border: 5px solid blue;
    }
    
    tbody{
       ...
    }

    .parent{
        ...
    }

    td{
       ...
    }

Visual reference: https://i.stack.imgur.com/gDtwF.png

Answer №1

Avoid using flex in your table. Instead, consider utilizing table-layout: fixed;. Given the complexity of the table structure, assigning an id to the headers and using headers for rows could be beneficial. Here is an example:

<table>
    <thead>
        <tr> 
            <th id="col"></th>
            <th id="id">ID</th>
            <th id="name">Name</th>
            ...
        </tr>
    </thead>
    <tbody>
        <tr class="parent" v-for="item in data" :key="item.data.ID">
            <td headers="col">
                ...
            </td>
            <td headers="id">{{ item.data.ID }}</td>
            <td headers="name">{{ item.data.Name }}</td>
            ...
        </tr>
    </tbody>
</table>

To set column widths uniformly, utilize thead th:nth-child(n). Start by defining the table styles as shown below:

table {
  table-layout: fixed;
  width: 100%;
  border: 1px solid;
  border-collapse: collapse;
}

thead th:nth-child(1) {
  width: 8%;
}
...
th, td {
  padding: 0.5rem;
  border: 1px solid;
}

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

Implement a jQuery loading animation triggered by scrolling down the page

Can anyone offer guidance on how to trigger an animation as you scroll down a webpage? I've come across this feature while browsing through this website: I would love to include code examples, but I'm unsure of where to start with implementing t ...

Is there a way I can maintain the active state after clicking on a link?

Is there a way to maintain an active element state when navigating to another page after clicking a link? I am wondering if it is possible to use JavaScript to remove the active state from one link and apply it to the next one. I am facing some challenges ...

Can the top header stay fixed to the top of the screen even when scrolling down?

Code snippet: http://jsfiddle.net/R3G2K/1/ In my project, there are multiple divs with content and each div has a header. My goal is to make the last header that goes out of viewport "sticky" or fixed at the top. I have explored various solutions for thi ...

Create a Cutting-edge Navbar in Bootstrap 5.1 Featuring Three Distinct Sections: Left, Center, and Right

I'm encountering challenges with formatting the navbar layout I am currently designing. My goal is to create a navbar with three distinct sections as outlined in the title. In the first section on the left, there should be an image and a button-like ...

What is the most effective method for daily column reset with a large user base?

While working on my current project in Laravel, I've come across the need to implement a feature that requires a column reset for all users every day. With potentially hundreds or thousands of users in this project, I'm concerned about potential ...

Troubleshooting: Header Appears Slightly Below the Top of the Screen in CSS/HTML

Despite setting padding: 0; and margin: 0;, the div always appears below the top of the browser, without touching it. Below is the snippet of code: html, body { margin: 0; padding: 0; } .nav>ul>li { display: inline-block; padding: 0px 25 ...

Unable to reset disabled styling for CSS select box

My Windows 8 app consists of two pages: Page1.html and Page2.html. Page1 references ui-light.css and page1.css, while Page2 references ui-light.css and page2.css. In the ui-light.css file, there is a rule defined for the disabled state of select boxes. I ...

How to Ensure Vue Router's Named Component Redirects with Complete Params?

I want to route users who visit '/' to a specific component based on its name. { path: '/', redirect: to => { if (!localStorage.getItem('quizlogin')) { return { name: 'login& ...

Why isn't my background image appearing on the screen?

I'm experiencing an issue with my background image not displaying properly. I am currently using bootstrap 5 and have tried several solutions without success. How can I resolve this problem? html { background: url(https://via.placeholder.com/150 ...

Exploring the Differences Between Nth-CSS and Jquery

What are the advantages of using the nth function in CSS instead of applying it through jQuery, especially considering its compatibility with IE? Is it better to simply use jQuery from the start and avoid using it in a stylesheet altogether? Hopefully thi ...

Functions perfectly on Chrome, however, encountering issues on Internet Explorer

Why does the Navigation Bar work in Chrome but not in Internet Explorer? Any insights on this issue? The code functions properly in both Internet Explorer and Chrome when tested locally, but fails to load when inserted into my online website editor. Here ...

Creating a dual-direction infinite scroll effect with CSS through mouse dragging

I'm currently working on implementing an infinite scroll component for a project. After consulting this tutorial, I've encountered an issue. It seems that I can only achieve infinite scroll in one direction. Whenever I add elements to the leftmo ...

How can you align a div next to another using the float property in CSS?

/*Custom Styling for Divs*/ #box1 { border: 1px solid; border-radius: 25px; width: 900px; } #box2 { border: 1px solid; border-radius: 25px; width: 430px; } #box3 { float: right; border: 1px solid; border-radius: ...

Nuxt.js encounters difficulties in fetching information from the Django Rest Framework API

I am currently developing a Nuxt.js/Vue frontend for my Django Rest Framework backend. Despite specifying permissions to allow non-authenticated users to read-only, I am having trouble successfully loading data from my API. Index.vue import axios from &a ...

Using the flex:1 property does not automatically make my elements the same size and cover the entire height of the container

I have 2 containers and I want the elements in each container to fill the entire container. My goal is to make one container appear larger than the other. https://i.stack.imgur.com/73yoR.jpg Even though I am using the flex: 1 property, it does not seem t ...

What is the method for fetching a WebElement with a specific CSS attribute using JavascriptExecutor?

Currently, I am faced with a situation in which I need to locate a WebElement based on its CSS property, specifically the background-color. I successfully crafted the JQuery script below to pinpoint the element using the firefox console: $('.search-b ...

Glowing semi-opaque about spotify?

Recently, I decided to challenge myself by recreating the Spotify homepage using only pure Javascript and SCSS as a way to test my front-end development skills. You can view my progress so far at this link, although please note that it's still a work ...

Prevent the display of HTML tags in ASP.NET

Looking for a way to prevent a specific HTML tag from being printed in my ASP.NET project view file, whether through a printer or to a PDF file. Are there any HTML or CSS attributes that can help achieve this? How should they be configured? I have alread ...

Adjust the background color of a cell depending on its value - Implementing with VueJs and Vuetify

I am currently extracting data from a JSON file. My goal is to change the cell color to green if the value is "OK" and to red if the value is "KO". Currently, I have implemented a v-simple-table as shown below: <td :class="OK? 'primary' : &apo ...

position the table next to the graph

I'm having trouble moving/placing items in HTML. Can we experiment with rearranging the tables as demonstrated at the bottom (expected output)? Is it feasible to achieve a layout like the one below? Shifting the bottom section up next to the plots. ...