Tips for making your inner content as wide as possible

I'm currently working on developing collapsible tables, where an outer and inner table are displayed for every row that is clicked.

This is the code I have implemented:

HTML:

<table class="table outerTbl mb-0">
    <thead>
        <tr>
            <th scope="col">SL No.</th>
            <th scope="col">Program Details</th>
            <th scope="col">Program Levels</th>
            <th scope="col">Program Start Date</th>
            <th scope="col">Program End Date</th>
            <th scope="col">Total Duration</th>
            <th scope="col">Start</th>
            <th scope="col">Cancel</th>
        </tr>
    </thead>
    <tbody>
        <tr>
           <!-- Table Row Content -->
        </tr>
    </tbody>
</table>

I have attempted to set a width of 100% for each level within the actual table but have been unsuccessful. Here are some examples I tried that did not work:

table {
    width: 100%;       
}

Additionally, one of the tables does not have a 100% width, so I added the following line:

td > table { width:100%; }

I am using Bootstrap v4.1, and despite trying various methods, the tr and td in the inner table are not setting to full width. How can I ensure that the inner table spans the full width?

htmlcssbootstrap-4

Answer №1

Here is some code that may be of use to you. You can find it at the following link: codepen

<table class="table outerTbl mb-0">
    <thead>
        <tr>
            <th scope="col">SL No.</th>
            <th scope="col">Program Details</th>
            <th scope="col">Program Levels</th>
            <th scope="col">Program Start Date</th>
            <th scope="col">Program End Date</th>
            <th scope="col">Total Duration</th>
            <th scope="col">Start</th>
            <th scope="col">Cancel</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row" class="collapsed" data-toggle="collapse" data-target="#row1" aria-expanded="false" aria-controls="row1">View</th>
            <td>Stay Active & Win</td>
            <td>03</td>
            <td>03/12/2018</td>
            <td>03/02/2019</td>
            <td>5 Days, 240secs.</td>
            <td><img src="images/start.png"></td>
            <td><img src="images/cancel.png"></td>
        </tr>
        <tr id="row1" class="table collapse innerTbl text-center col-11">
            <td colspan="8">
                <table width="100%">
                    <thead>
                        <tr>
                            <th scope="col">Program Details</th>
                            <th scope="col">Program Levels</th>      
                            <th scope="col">Program Duration</th>
                            <th scope="col">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>               
                            <td>Power Up <img src="images/trophy.png"/></td>
                            <td>Level 1</td>
                            <td>240 secs</td>
                            <td>Play</td>              
                        </tr>
                        <tr>               
                            <td>Warriors <img src="images/trophy.png"/></td>
                            <td>Level 2</td>
                            <td>5 Days</td>
                            <td>Play</td>              
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <th scope="row" class="collapsed" data-toggle="collapse" data-target="#row2" aria-expanded="false" aria-controls="row2">View</th>
            <td>New Year Goals</td>
            <td>01</td>
            <td>01/01/2019</td>
            <td>01/02/2019</td>
            <td>5 Days, 240secs.</td>
            <td><img src="images/start.png"/></td>
            <td><img src="images/cancel.png"/></td>
        </tr>
        <tr id="row2" class="table collapse innerTbl text-center col-11">  
            <td>
                <table >
                    <thead>
                        <tr>
                            <th scope="col">Program Details</th>
                            <th scope="col">Program Levels</th>      
                            <th scope="col">Program Duration</th>
                            <th scope="col">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>               
                            <td>Power Up <img src="images/trophy.png"/></td>
                            <td>Level 1</td>
                            <td>240 secs</td>
                            <td>Play</td>              
                        </tr>
                        <tr>               
                            <td>Warriors <img src="images/trophy.png"/></td>
                            <td>Level 2</td>
                            <td>5 Days</td>
                            <td>Play</td>              
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>  
    </tbody>
</table>

Answer №2

One way to set the width is by using style="width: 100vw;"

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" type="text/css" />

<table class="table outerTbl mb-0">
  <thead>
    <tr>
      <th scope="col">SL No.</th>
      <th scope="col">Program Details</th>
      <th scope="col">Program Levels</th>
      <th scope="col">Program Start Date</th>
      <th scope="col">Program End Date</th>
      <th scope="col">Total Duration</th>
      <th scope="col">Start</th>
      <th scope="col">Cancel</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" class="collapsed"  data-toggle="collapse" data-target="#row1" aria-expanded="false" aria-controls="row1">
        View </th>
      <td>Stay Active &amp; Win</td>
      <td>03</td>
      <td>03/12/2018</td>
      <td>03/02/2019</td>
      <td>5 Days, 240secs.</td>
      <td> <img src="images/start.png"/> </td>
      <td> <img src="images/cancel.png"/> </td>
    </tr>
    <tr id="row1" class="table collapse innerTbl text-center col-11"><td>
      <table style="width: 100vw;">
        <thead>
          <tr>
            <th scope="col">Program Details</th>
            <th scope="col">Program Levels</th>      
            <th scope="col">Progrma Duration</th>
            <th scope="col">Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>               
            <td>Power Up <img src="images/trophy.png"/></td>
            <td>Level 1</td>
            <td>240 secs</td>
            <td>Play</td>            
          </tr>
          <tr>               
            <td>Warriors <img src="images/trophy.png"/></td>
            <td>Level 2</td>
            <td>5 Days</td>
            <td>Play</td>            
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
    <tr>
      <th scope="row" class="collapsed"  data-toggle="collapse" data-target="#row2" aria-expanded="false" aria-controls="row2">View</th>
      <td>New Year Goals</td>
      <td>01</td>
      <td>01/01/2019</td>
      <td>01/02/2019</td>
      <td>5 Days, 240secs.</td>
      <td><img src="images/start.png"/></td>
      <td><img src="images/cancel.png"/></td>
    </tr>
    <tr id="row2" class="table collapse innerTbl text-center col-11">   <td>
      <table style="width: 100vw;">
        <thead>
          <tr>
            <th scope="col">Program Details</th>
            <th scope="col">Program Levels</th>      
            <th scope="col">Progrma Duration</th>
            <th scope="col">Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>               
            <td>Power Up <img src="images/trophy.png"/></td>
            <td>Level 1</td>
            <td>240 secs</td>
            <td>Play</td>            
          </tr>
          <tr>               
            <td>Warriors <img src="images/trophy.png"/></td>
            <td>Level 2</td>
            <td>5 Days</td>
            <td>Play</td>            
          </tr>
        </tbody>
      </table>
      </td>
    </tr>  
  </tbody>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>

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

html - Removing excess space following the footer

Having trouble getting rid of the excess white space below my footer on this website: I attempted to search for a solution online and even added padding:0; to the footer's CSS, but unfortunately it didn't solve the issue. Appreciate any assista ...

htmlcss

The media query fails to start in the browser's mobile display

Instead of just adjusting the browser window size, I utilized Chrome's developer tools to make adjustments. I double-checked that the appropriate meta tags were included in the code: <meta name="viewport" content="width=device-width, initial-scal ...

cssmobilemedia-queries

Incorporate unique color variables from the tailwind.config.js file

I am working on a project using nextjs and typescript, with tailwind for styling. In my tailwind.config.js file, I have defined some colors and a keyframe object. My issue is how to access these colors to use as background values in the keyframe. Here is ...

javascriptcssreactjsnext.jstailwind-css

JavaScript and jQuery experiencing difficulty rendering proper style and image in output display

I am currently working on code that extracts information from a JSON variable and displays it on a map. The code looks like this: marker.info_window_content = place.image + '<br/>' +"<h4>" + place.name + "</h4> ...

javascriptjquerycss

What is the best way to align my SVG to display inline with text?

I am trying to add an SVG image next to some text in a navbar, but I'm running into some issues. The SVG is overflowing from the navbar instead of aligning inline with the text. Here's a snippet of my HTML code: ...

htmlcsssvg

programming for the final radio button text entry

I am struggling with a form that has 5 radio buttons, including an "other" option where users can manually enter text. The issue I'm facing is that the form only returns the manual entry text and not any of the preset radio values. I need it to work f ...

javascripthtmltextradio-buttonvar

What is the formula for determining the REAL innerWidth and innerHeight?

I am currently working on a responsive website using Bootstrap and I am looking to create an element that perfectly fits the screen size. When I set the height/width to 100%, the browser includes the toolbar, other tabs, and the Windows taskbar in the cal ...

javascriptjqueryhtmlcsstwitter-bootstrap

Customized style sheets created from JSON data for individual elements

One of the elements in the API requires dynamic rendering, and its style is provided as follows: "elementStyle": { "Width": "100", "Height": "100", "ThemeSize": "M", "TopMargin": "0", " ...

javascriptcssangularjsdynamic-css

What is the best way to restrict user input to specific numbers only?

I have a text input field, how can I ensure that only numeric values from 1 to 31 are allowed? <input type="number" min="1" max="31"> ...

javascripthtmlcss

When CSS 3 checkbox value is toggled to "off", it returns as null

I am currently using a checkbox element with the following HTML: <div class="onoffswitch"> <input type="checkbox" name="showOnNavigation" class="onoffswitch-checkbox" id="showOnNavigation" checked> <label class="onoffswitch-label" f ...

htmlcss

Tips for eliminating the ripple effect when clicking on a q-list item

I have managed to create a sleek sidebar with a curved edge that seamlessly integrates into the body of the page. However, I am struggling to remove the semi-transparent ripple effect that appears when clicking on a list item. The current effect clashes ...

cssvue.jsquasar-frameworkquasar

Adjust image size dynamically while keeping the original aspect ratio

Is there a way to scale variable portrait and landscape images dynamically to fit proportionally within a browser window? You can find my current image resizing attempt here: http://jsfiddle.net/6pnCH/4/ I would like the image to be already scaled vertic ...

javascripthtmlcssimage

Utilizing Material UI with Appbar logo aligned to the left and Tabs featured at the center

I am currently working on creating a react material ui AppBar. The design includes a logo and tabs, with the tabs supposed to be centered in the AppBar and the logo positioned on the left side. However, I have been facing difficulty in making the logo al ...

cssreactjsmaterial-uicss-grid

Is it possible to transform all scripts into a React component? (LuckyOrange)

I am currently working on converting the script for a specific service (http://luckyorange.com/) into a component. The instructions say to place it in index.html within the public folder, but that appears to be insecure. I'm uncertain whether this tas ...

javascripthtmlreactjs

Deletion of ::before and ::after pseudo-elements upon addition of the class is-sticky

One issue I'm facing is that when the class is-sticky is applied to my menu, the ::before and ::after pseudo-elements on my logo become unnecessary. As I am not very proficient in JQuery, I have been unable to resolve this by searching online. The HT ...

htmljquerycssversion-control

Implementing jQuery functionality on elements that are generated dynamically

I'm facing a challenge when working with dynamic elements in jQuery and I really could use some help. Let me provide an example from my current project: main.js $(function () { renderPlaceList(places); setupVoting(); } The two functions are ...

javascriptjqueryhtml

What is the best way to adjust the decimal values in my API calls?

Is there a way to adjust the numerical data returned by the API to display only two decimal places instead of three? For example, if the number is 140.444, I want it to show as 140.44 What changes do I need to make? function fetchData() { fetch(" ...

javascripthtmlcssfetch-api

What is the best way to reveal the square's id value upon hovering over it exclusively?

In this assignment, I am refraining from using HTML and focusing on JavaScript to create functionality. Here's my progress so far: document.addEventListener("DOMContentLoaded", function () { let button = document.createElement('button' ...

javascriptcssdom

Is it possible to adjust the scroll top position using inline style in angularJS/CSS?

I am working on storing the scrollTop value of a vertical menu in my controller so that I can set it up each time I return to the page for persistent scrolling. Does anyone know how I can achieve this? This is the code snippet I am currently using: < ...

htmlcssangularjs

Tips for transferring information from Angular 6 to Node.js

Having recently delved into Angular 6 for the first time, I find myself tasked with sending data to a Node.js server. The code snippet below illustrates my approach within an Angular function: import { Component, OnInit } from '@angular/core'; ...

htmlnode.jsangularangular6