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

Use custom styles or CSS for the file input element: <input type="file">

Can CSS be used to achieve consistent styling for <input type="file"> in all browsers? ...

htmlcssfile-io

Tips for hiding one sub-navigation menu when hovering over another sub-navigation menu

Setting up the main navigation menu: <ul class="menu12"> <li><a href="/">Home</a></li> <li><a href="/">About</a> <ul> <li><a href="/">History</a></li> <li ...

jquerycssmenu

Troubleshooting problems with a JavaScript game that involves guessing numbers

I have been given a challenging Javascript assignment that involves using loops to create a counting betting game. The concept is simple: the User inputs a number, and the computer randomly selects a number between 1 and 10. The User can then bet up to 10 ...

javascripthtml

populate a bootstrap column with numerous span elements containing varying numbers on different rows

Wondering if it's possible to have a div with the bootstrap class "column" filled with multiple span elements that may break into more than one line. The challenge lies in making sure that each line of spans stretches and fills the line, even if there ...

htmlcsstwitter-bootstrapwebflexbox

The slicing of jQuery parent elements

Hey there! I recently created a simulated "Load More" feature for certain elements within divs. However, I've encountered an issue where clicking on the Load More button causes all elements in both my first and second containers to load simultaneously ...

javascriptjquerycssjquery-selectors

Ways to Adjust Website Scaling for Varying Screen Sizes

Is there a way to adjust my website's scale based on the device width, such as changing it to 0.7 for certain devices? The only information I've found so far is using the <meta> tag: <meta name="viewport" content="width=device-width, i ...

htmlcssmedia-queriesviewport

Tips for ensuring a static html element remains visible at the bottom of the screen even when the soft keyboard is opened in iOS Safari

Within a webpage, there is an input field and a fixed div positioned at the bottom of the window using CSS properties such as position:fixed; and bottom:0;. To better illustrate this setup, I have created a Codepen demo which can be viewed here: https://c ...

htmlioscsssafarikeyboard

Modifying the variable value upon clicking

I need to update a variable value on click, in order to send the updated value via ajax and load data either in ascending or descending format. Below is the JavaScript section at top of the page. var sortDirection = '0'; Now, here is the corre ...

javascriptjqueryhtmlajax

What is causing my div exchange using .class to fail?

Struggling to convert this code from working with IDs to Classes. The code reveals one Div while hiding another based on the onClick event. Originally, it was straightforward because the div location was absolute. In the classes version, I need to revea ...

javascriptjqueryhtmlcssjquery-selectors

Choosing a particular 2D array based on another variable in jQuery and JavaScript

Within my project, I am utilizing 2D arrays to append specific divs under particular circumstances. In an effort to streamline and enhance the code, I attempted to create a variable that would determine which array to utilize based on the id of an HTML < ...

javascriptjqueryhtml

Customizing form designs with the combination of Django and Bootstrap

After developing a basic purchase form with custom fields, I conducted a test to ensure its functionality. The form rendered successfully, as shown below. <form id="category_form" method="post" action="/purchase/"> {% csrf_token %} { ...

pythonhtmlcssdjangotwitter-bootstrap

Having trouble with the CSS `not` selector?

Below is the code snippet I experimented with XHTML <div> <span>Span1</span> <span>Span12</span> <span>Span13</span> </div> <div> <span>Span1</span> <span> ...

javascripthtmlcss

Encountered SyntaxError: An unexpected token has been found while integrating leaflet with flask

Despite adding all necessary scripts and configuring my API_KEY in config.js, I keep getting an error message saying "Uncaught SyntaxError: Unexpected token." I have double-checked my API key multiple times, and it seems to be correct. Here is a snippet f ...

javascripthtmlcss

Endless cycle of changing border colors

I'm trying to achieve a specific effect where the border of a div changes colors in an infinite loop. However, I want this effect to be applied only to the border of the div and not the entire body background. Here is an example: http://jsfiddle.net/A ...

javascriptcsscss-animations

Overlaying div above vimeo player

I'm attempting to overlay a div on top of a Vimeo video, a task I anticipated would be straightforward but turns out to be more complex than expected. Below is the HTML code snippet: <div id="wrap"> <iframe id="video" s ...

htmlcssflashvideo

Attempting to design a customized dropdown navigation feature using HTML

I am having some trouble creating a dropdown menu that functions properly. Here is the code I have written: <div> <H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT A Subject:</H1> <select id ="dropDownId"> <!-- as ...

jqueryhtml

What is the best way to save geolocation coordinates in a Javascript array?

I am attempting to utilize HTML5 geolocation to determine a user's location and then store the latitude and longitude coordinates in an array for future use with Google Maps and SQL statements. However, when I attempt to add these coordinates to the a ...

javascriptarrayshtmlgeolocation

Having trouble getting JavaScript to select a stylesheet based on time?

I am attempting to implement two different styles based on the time of day. Here is the code I am using to select the CSS file depending on the current time: <script type="text/javascript"> function setTimedStylesheet() { var currentTim ...

javascripthtmlcss

Is there a way to automatically close a created div by clicking anywhere outside of it?

I'm facing an issue with a dynamically created div that I want to close by clicking outside of it. However, when I try to achieve this functionality, the div closes immediately as soon as it is opened. closediv(); } function closediv() { d ...

javascripthtmlweb

Is your Chrome DevTools changing CSS Link files to "Constructed Stylesheet" after you edit the CSS using Inspect Element? Find out how to fix this issue!

This issue relates to CSS files that are initially not identified as constructed stylesheets but end up being displayed as such after editing, rendering the file inaccessible. Specifically in Google Chrome DevTools (last observed in Chrome 86): Whenever ...

cssgoogle-chromegoogle-chrome-devtoolsinspect-element