Bootstrap Table with Numerous Rows and Columns

I am striving to create a table layout similar to the one shown in the image using bootstrap 5.

https://i.sstatic.net/lEnYX.png

My attempt so far looks like this

<table class="table table-bordered">
    <thead>
        <tr>
            <th><span>Domain</span></th>
            <th colspan="3"><span>DATE</span></th>
            <th colspan="3"><span>DATE</span></th>
            <th colspan="3"><span>DATE</span></th>
            <th colspan="3"><span>DATE</span></th>
            <th colspan="3"><span>DATE</span></th>
            <th colspan="3"><span>DATE</span></th>
            <th colspan="3"><span>DATE</span></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span>Example1</span></td >
            <td  rowspan="3" ><span>DR</span></td >
            <td  rowspan="3" ><span>IR</span></td >
            <td  rowspan="3" ><span>SR</span></td >
            <td  rowspan="3" ><span>DR</span></td >
            <td  rowspan="3" ><span>IR</span></td >
            <td  rowspan="3" ><span>SR</span></td >
            <td  rowspan="3" ><span>DR</span></td >
            <td  rowspan="3" ><span>IR</span></td >
            <td  rowspan="3" ><span>SR</span></td >
            <td  rowspan="3" ><span>DR</span></td >
            <td  rowspan="3" ><span>IR</span></td >
            <td  rowspan="3" ><span>SR</span></td >
            <td  rowspan="3" ><span>DR</span></td >
            <td  rowspan="3" ><span>IR</span></td >
            <td  rowspan="3" ><span>SR</span></td >
            <td  rowspan="3" ><span>DR</span></td >
            <td  rowspan="3" ><span>IR</span></td >
            <td  rowspan="3" ><span>SR</span></td >
            <td  rowspan="3" ><span>DR</span></td >
            <td  rowspan="3" ><span>IR</span></td >
            <td  rowspan="3" ><span>SR</span></td >            
        </tr>
        <tr>
            <td><span>Example2</span></td >
            <td  rowspan="3" ><span>DR</span></td >
            <td  rowspan="3" ><span>IR</span></td >
            <td  rowspan="3" ><span>SR</span></td >
            <td  rowspan="3" ><span>DR</span></td >
            <td  rowspan="3" ><span>IR</span></td >
            <td  rowspan="3" ><span>SR</span></td >
            <td  rowspan="3" ><span>DR</span></td >
            <td  rowspan="3" ><span>IR</span></td >
            <td  rowspan="3" ><span>SR</span></td >
            <td  rowspan="3" ><span>DR</span></td >
            <td  rowspan="3" ><span>IR</span></td >
            <td  rowspan="3" ><span>SR</span></td >
            <td  rowspan="3" ><span>DR</span></td >
            <td  rowspan="3" ><span>IR</span></td >
            <td  rowspan="3" ><span>SR</span></td >
            <td  rowspan="3" ><span>DR</span></td >
            <td  rowspan="3" ><span>IR</span></td >
            <td  rowspan="3" ><span>SR</span></td >
            <td  rowspan="3" ><span>DR</span></td >
            <td  rowspan="3" ><span>IR</span></td >
            <td  rowspan="3" ><span>SR</span></td >
        </tr>
    </tbody>
</table>

However, my current output looks strange as depicted in this image

https://i.sstatic.net/hbPku.png

I am puzzled about what I might be overlooking. I have searched extensively but haven't found a suitable solution. If anyone here can assist me in resolving the issue, I would greatly appreciate it.

Thank you!

htmlcssbootstrap-5

Answer №1

The DOMAIN is missing the rowspan, and there should be a second tr in the header section. Also, it is unnecessary to have colspans for the subsequent tds:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="791b16160d0a0d0b1809394d574a57c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th rowspan="2" class="align-middle"><span>Domain</span></th>
                <th colspan="3" class="text-center"><span>DATE</span></th>
                <th colspan="3" class="text-center"><span>DATE</span></th>
                <th colspan="3" class="text-center"><span>DATE</span></th>
                <th colspan="3" class="text-center"><span>DATE</span></th>
                <th colspan="3" class="text-center"><span>DATE</span></th>
                <th colspan="3" class="text-center"><span>DATE</span></th>
                <th colspan="3" class="text-center"><span>DATE</span></th>
            </tr>
            <tr>
                <th><span>DR</span></th>
                <th><span>IR</span></th>
                <th><span>SR</span></th>
                <th><span>DR</span></th>
                <th><span>IR</span></th>
                <th><span>SR</span></th>
                <th><span>DR</span></th>
                <th><span>IR</span></th>
                <th><span>SR</span></th>
                <th><span>DR</span></th>
                <th><span>IR</span></th>
                <th><span>SR</span></th>
                <th><span>DR</span></th>
                <th><span>IR</span></th>
                <th><span>SR</span></th>
                <th><span>DR</span></th>
                <th><span>IR</span></th>
                <th><span>SR</span></th>
                <th><span>DR</span></th>
                <th><span>IR</span></th>
                <th><span>SR</span></th>
           
            </tr>
        </thead>
        <tbody> 
            <tr>
                <td><span>Example1</span></td >
                <td><span>DR</span></td>
                <td><span>IR</span></td>
                <td><span>SR</span></td>
                <td><span>DR</span></td>
                <td><span>IR</span></td>
                <td><span>SR</span></td>
                <td><span>DR</span></td>
                <td><span>IR</span></td>
                <td><span>SR</span></td>
                <td><span>DR</span></td>
                <td><span>IR</span></td>
                <td><span>SR</span></td>
                <td><span>DR</span></td>
                <td><span>IR</span></td>
                <td><span>SR</span></td>
                <td><span>DR</span></td>
                <td><span>IR</span></td>
                <td><span>SR</span></td>
                <td><span>DR</span></td>
                <td><span>IR</span></td>
                <td><span>SR</span></td>
            </tr>
            <tr>
                <td><span>Example2</span></td >
                <td><span>DR</span></td>
                <td><span>IR</span></td>
                <td><span>SR</span></td>
                <td><span>DR</span></td>
                <td><span>IR</span></td>
                <td><span>SR</span></td>
                <td><span>DR</span></td>
                <td><span>IR</span></td>
                <td><span>SR</span></td>
                <td><span>DR</span></td>
                <td><span>IR</span></td>
                <td><span>SR</span></td>
                <td><span>DR</span></td>
                <td><span>IR</span></td>
                <td><span>SR</span></td>
                <td><span>DR</span></td>
                <td><span>IR</span></td>
                <td><span>SR</span></td>
                <td><span>DR</span></td>
                <td><span>IR</span></td>
                <td><span>SR</span></td>
            </tr>
        </tbody>
    </table>

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

Issues arise when attempting to use Stylus in conjunction with React

I am currently working on developing a web application that utilizes Stylus and React. I have successfully rewritten all the Stylus language files, but I am encountering an issue where the React components are not being styled as expected. Below is one of ...

cssreactjsweb-applicationsstylus

Adjusting the spacing of the first letter using CSS, leave room

I'm encountering issues with the alignment of titles and text using the 'Lato' Google font. It seems like there is a space or kerning issue on the first letter causing them not to align properly to the left. Any suggestions on how to fix thi ...

htmlcssfontswebfonts

Clicking on a dynamically generated link will not result in the file being downloaded

I have a list of document names and IDs retrieved from a database, displayed in an unordered list like this: <ul id="list"> <li onmouseover="onHover(docNumber)"> <a herf="#" id="docNumber">DocName</a> </li> </ ...

javascriptjqueryhtmlajaxbase64

Combining two containers in CSS

I am currently working on building a website design, and I have a menu positioned on the right side of the layout. Below is the code for the menu along with an explanation. #rightmenu { border-top: 1px solid #000000; border-right: 1px solid #00000 ...

csspositionpositioninghtml

Styling Fonts in Safari with CSS

Because FixedSys doesn't appear correctly in Chrome or Safari, I switch it to Lucida Console. While this solution works for Chrome, I encounter a problem with Safari. Unless Lucida Console stands alone, the font will not display as desired. If there a ...

htmlcss

"Troubleshooting IE-specific problem: Loading dropdown options dynamically with AJAX on change

Struggling with a particular issue lately. I'm attempting to populate a second dropdown menu based on the selection made in the first one using jquery ajax. Surprisingly, it works flawlessly on all browsers except for IE 11. Below is the ajax functio ...

javascriptphpjqueryhtmlajax

Evaluating h1 content in HTML using Angular Protactor testing

I am completely new to end-to-end testing. I have a login page in my application that should be displayed to users when they log out. However, I am facing an issue with retrieving the text from a specific div element containing an h1 tag, leading to unexpe ...

htmlangularseleniumprotractorend-to-end

Achieve a fading effect on an element as you scroll down the page

I successfully implemented a toggle audio button on my website, but now I would like it to fade in along with the scroll-to-top button that I also have (which operates similarly to the buttons on scrolltotop.com). Is there a simple way to achieve this? He ...

javascripthtmlcss

Maintain the fixed placement of an absolute element by adjusting the browser window size

Seeking assistance here - I currently have a box that occupies the entire window. This box is designed to be responsive with a noticeable red border. Within this box, my goal is to insert tables with specific X and Y coordinates. However, my issue arises ...

htmlcss

Guide to resetting a CSS animation with pure JavaScript

My flexbox contains 4 images, each triggering an animation on hover. However, the animation stops if I hover over the same image again. I have tried various JavaScript solutions found online to restart the animation, but none seem to be working for me. S ...

javascripthtmlcsshover

"Handling Errors in JavaScript when a Button Click Event Triggers a

There are 2 buttons intended for "Add to Favorites" and "Remove from Other Favorites". Here is the code snippet: <button type="submit" class="btn btn-warning btn-xs" id="FavoriButonex" data-id="<?php echo $sorid ?>"> <i class="fa fa-hea ...

javascriptphphtml

Retrieve the username of a specific User from the Django model

Wondering if there may be a duplicate question, but I couldn't locate it Here is the code snippet from models.py # Define user profile information model class UserProfileInfo(models.Model): # Set up one-to-one relationship with User model use ...

pythonhtmldjangomodelhtml-injections

Display each value in a foreach loop just a single time

Utilizing a foreach loop to store error messages from invalid user inputs in an array, converting it into a string, and displaying them on another page. However, although the string is successfully displayed, it appears multiple times. This snippet showca ...

phphtmlregistration

Ways to enlarge the font size of a hyperlink

I am just starting out with coding and I need to figure out how to increase the font size of my link. <!DOCTYPE html> <html> <head> <style> /* unvisited link */ a:link { color: #FFFFFF; } /* visited link */ a:visited { color: #FF ...

htmlcss

Event dedicated to the selection of mobile options

I am facing an issue with binding an event to the options of a select tag on mobile devices. The code inside the click event handler doesn't seem to be working and I'm unsure of the reason behind it. My assumption is that perhaps the click event ...

jqueryhtmlmobile

Creating a responsive grid layout using Bootstrap while addressing placement problems

Seeking help with Bootstrap for creating this particular layout design. Any advice? https://ibb.co/F7mv5V6 I've attempted the following code snippet, but it appears to be incorrect (looking for a result similar to the image provided) <div ...

htmlcssbootstrap-4grid-layoutmobile-website

Using Three.js to create a distorted texture video effect

Check out the example linked here for reference: In this particular project, there are two cylinders involved - an outer cylinder with an image texture and an inner cylinder with a video texture. Once the second cylinder is created and added to the scene, ...

javascripthtmlthree.jshtml5-video

The QR code disappears from the screen once the button is no longer pressed

After following an online tutorial on creating a QR code generator, the code works fine and I am able to display the image. However, I'm facing an issue where the image disappears from the screen once the button is released. Here is the code snippet: ...

htmlcssqr-code

Variation in element widths and CSS widths

While inspecting an element in FF, it displays a width of 225px. However, the applied CSS sets the width to 207px for this element. The discrepancy may be due to Bootstrap and varying resolutions. Is there a tool available to identify chang ...

csstwitter-bootstrapwidth

Having trouble with jQuery animate function?

I have been struggling to get my animate function to work, despite looking at multiple similar posts and making modifications to my code. My goal is to make an image of a plane move from left to right across the screen and stop halfway. Here is the code I ...

javascriptjquerycss