Building a nested table within a parent table in bootstrap is a breeze

Can you provide guidance on nesting tables in Bootstrap-3? Whenever I attempt it, the second table ends up being displayed after the first one.

Answer №1

Follow these steps to create the structure:

<table class="table table-bordered">
  <th colspan="3">Outer Table</th>
  <tr>
    <td>This is row one, column 1</td>
    <td>This is row one, column 2</td>
    <td>
     <table class="table table-bordered">
       <th colspan="3">Inner Table</th>
       <tr>
         <td>This is row one, column 1</td>
         <td>This is row one, column 2</td>
         <td>This is row one, column 3</td>
       </tr>
     </table>
    </td>
  </tr>
</table>

See a live demo here: http://jsbin.com/qilebevo/2/

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

What methods can be used to keep divs from breaking onto separate lines?

My approach involves using divs to mimic a table structure. Below is the header section of this table: <div id="table-header"> <div id="header-row"> <div class="rate-rule-column s-boarder"> ...

Ways to conceal and reveal content within div elements

I have a code snippet that is currently operational, but I am looking to enhance it by displaying one div at a time. If you would like to view the code, please visit my CodePen link below: https://codepen.io/danongu/pen/YzXvpoJ Due to the extensive amou ...

fixed footer with fixed height on parent container

I have successfully implemented a sticky footer on my web pages by following specific instructions. http://css-tricks.com/snippets/css/sticky-footer/ The recommended approach includes using min-height:100% and not specifying the height property. .page-w ...

Tips for breaking out of an infinite loop while loading HTML containing a carousel into a blank <div> within another HTML file using jQuery's $(document).ready() function

Currently, I am studying HTML, CSS, Bootstrap 4, jQuery3, and JavaScript (ES6+), and to enhance my skills, I have devised an exercise for practice and consolidation. I have created 4 HTML files, all featuring responsive design based on Bootstrap 4: inde ...

Personalized designing of each letter

Is there a way to style numbers without using something like <span></span>? I'm looking for a clean way to do this for each sign. Attached is an example showing a "flip clock" effect that I would like to achieve. I have come across plugi ...

Styling tables within HTML emails for Gmail and then utilizing PHPMailer to send the emails

I've been racking my brain over this for hours with no luck! Objective: Implementing inline styles for table, td, th, p elements in an HTML email intended for Gmail using PHPMailer. Challenge: Inline styles not being rendered HTML Snippet: <sec ...

Html elements overlapping due to incorrect positioning

I'm having an issue with my div elements on a web page. Despite them being set up separately, they all end up positioned underneath the first div created (SiteFullControl). Is there any solution to prevent this from happening? <div id="SiteFullCo ...

Changes in menu layout in response to window resizing

The menu needs to be centered on the website and adjust to the browser window resizing. Currently, it's positioned in the center and the animation is working fine. However, when I attempt to make the menu responsive so that it stays centered when resi ...

Issue observed in Angular Material: mat-input does not show background color when in focus mode

https://i.stack.imgur.com/eSODL.png Looking for a solution regarding the mat-input field <mat-form-field> <input class='formulaInput' matInput [(ngModel)]='mathFormulaInput'> </mat-form-field> The blue backg ...

The function of style.marginRight differs from that of style.marginLeft

One function aligns content to the left while the other doesn't align it to the right function openNavLeft() { document.getElementById("mySidenavLeft").style.width = "100vw"; document.getElementById("main").style.marginLeft = "100vw"; } function ...

Navigation Menu Dropdown Present on the Right Side and Arranged in a Horizontal Stack

I'm having trouble with a dropdown menu in my navigation bar. I followed the example on W3Schools but when I hover, the menu appears horizontally instead of vertically and to the far right of the page. I've searched for solutions but can't s ...

As the browser window is resized, the gap between images widens while the images themselves decrease

Hey there, I'm encountering some trouble with the image links at the top of my page. As I resize the browser or change screen resolutions in media queries using percentages, the images are resizing accordingly. However, I'm noticing that as the i ...

It appears that the font in style.css is not being updated properly and seems to resemble

My issue lies within my CSS code. The text on my website is not displaying correctly and seems to be ignoring the styling that I have applied. Even though I have used similar styling on other buttons which look fine, this specific text element is causing p ...

Set the height of the main div container to a fixed size

I am facing an issue with my div container (mapInfo-Container) which contains multiple div blocks. I want the container to have a fixed height of 250px, and be scrollable for any content exceeding this height. Here is the code snippet: http://jsfiddle.net ...

Why isn't the button border displaying the color I assigned to it?

After setting a border color to my button, it's not displaying the color when I click on it. Instead, it's showing a different color. How can I resolve this issue? I need some assistance with setting the background of my button to match the imag ...

Using AngularJS to handle click events and blur events

I am attempting to dynamically change the class based on user interaction in my code. The class should switch between "large" and "active" depending on whether the input field is filled or not. Please see the modified script below. <div class="snippe ...

The flipping action will only occur on the initial card

I am working on creating a unique photo gallery that allows users to flip the picture by clicking or tapping on it. Once flipped, users will be presented with additional information about the image and a link. I have included all of my CSS, JS, and HTML be ...

Learn the process of transferring data-target IDs to another JSP using Bootstrap

Currently, I am encountering an issue where I am trying to use bootstrap to display a dialog box by clicking on a button. The dialog box is created in HTML (.jsp) and the submit button is in another .jsp file. However, when I click on the button, instead o ...

Ways to pinpoint a particular division and switch its class on and off?

Consider this scenario, where a menu is presented: function toggleHiddenContent(tabClass) { let t = document.querySelectorAll(tabClass); for(var i = 0; i<t.length; i++) { t[i].classList.toggle="visible-class"; } } .hidden-conten ...

What techniques can I use to adjust the size of an image through zooming in and out?

In my custom gallery component, the crucial code section looks like this: <Gallery> <Header> <img src={galleryIcon} alt='Galley icon' /> <h1>My Gallery</h1> </Header> ...