Unsuitable Size of Bootstrap Table Row

https://i.sstatic.net/swXci.png I'm struggling with formatting a table using Bootstrap. Despite checking the code multiple times, I can't figure out why it's not displaying correctly.

<table class="table table-striped table-bordered">
    <thead>
        <th>#</th>
        <th>Match</th>
        <th>League</th>
        <th>Odds</th>
        <th>Start Date</th>
    </thead>
    <tbody>
        <tr data-toggle="collapse" data-target="#accordion" class="clickable">
            <th scope="row"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></td>
            <td>Test</td>
            <td>Test</td>
            <td>Test</td>
            <td>Test</td>
        </tr>
        <tr>
            <td colspan="3" style="padding: 0px;">
                <div id="accordion" class="collapse" style="padding: 5px;">Hidden</div>
            </td>
        </tr>
    </tbody>
</table>
htmlcsstwitter-bootstrap

Answer №1

Your code appears to be functioning correctly, except for the issue of the 'th' inside the 'tbody' tag being closed by a 'td' tag. I have made a correction in the HTML code to resolve this issue. It's also possible that there are other styling rules conflicting with your table styling. You can try disabling other stylesheets and only using Bootstrap to see if this resolves the problem.

Here is a demo of your table:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
    <thead>
        <th>#</th>
        <th>Match</th>
        <th>League</th>
        <th>Odds</th>
        <th>Start Date</th>
    </thead>
    <tbody>
        <tr data-toggle="collapse" data-target="#accordion" class="clickable">
            <td scope="row"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></td>
            <td>Test</td>
            <td>Test</td>
            <td>Test</td>
            <td>Test</td>
        </tr>
        <tr>
            <td colspan="3" style="padding: 0px;">
                <div id="accordion" class="collapse" style="padding: 5px;">Hidden</div>
            </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

Rectangles on canvas, each with identical dimensions, appear in varying sizes when positioned at different locations

In my canvas, I have created two rectangles using the rect element. Both rectangles are supposed to be 40 units wide and 20 units tall. The first rectangle starts at coordinates 0,0 for its top-left corner, while the second one begins at 60,40. Interesti ...

javascripthtmlhtml5-canvas

Dynamic flexibility for content scrolling across components

Creating a mobile-friendly terms of service page with a title, content, and two buttons is my current project. The specific requirements are: All components should not exceed 100% of the viewport to allow for scrolling The buttons need to stay sticky at t ...

htmlcssreactjsmaterial-ui

Using javascript, add text to the beginning of a form before it is submitted

I'm trying to modify a form so that "https://" is added to the beginning of the input when it's submitted, without actually showing it in the text box. Here's the script I have so far: <script> function formSubmit(){ var x ...

javascripthtmlforms

Implementing the style tag within a view

In my exploration of various Razor views, I've noticed a common practice where developers include a <style> tag directly in the CSHTML file. While this method may seem to work without issue, it actually places the <style> tag within the & ...

c#cssasp.net-mvcmodel-view-controller

What is the process for incorporating styles into an external widget?

I am currently navigating my way through NextJS and attempting to incorporate a bespoke stylesheet into my code using a third-party widget. Unfortunately, I have hit a roadblock in this process. The names I have assigned to the style sheet align with what ...

cssreactjsnext.js

Attempting to design a customized tooltip for an SVG element embedded within the HTML code

Recently, I've delved into Js with the goal of creating an interactive pronunciation guide using inline svg. If you're curious to see what I've done so far, check it out here. My current focus is on incorporating basic styled tooltips that ...

javascriptcsssvghovertooltip

Setting boundaries for <td> widths: min-width and max-width

Similar Question: Min-width and max-height for table atrributes The <tables> and <td> elements do not recognize the percentage-based attributes min-width or max-width as per specification. How can this be simulated? ...

htmlcss

Proceed to the section with modal

My goal is to create a modal with 4 sections, each loading its content dynamically using the .load() function to the container on the right side. The challenge I'm facing is that I have a footer menu that triggers the modal to open, and I need it to ...

javascriptjqueryhtmlcssajax

The art of arranging elements on a webpage using HTML and

I designed a rectangle using position: relative; and placed an icon inside it. However, when I added a new div class called .Home, and included an element <h4>Home</h4> with position: relative;, the element appeared outside of the rectangle. Wh ...

htmlcss

Creating a semi-circular shaped rectangle using CSS

Is it possible to achieve the unique rectangle borders shown in the image using border-radius or any other CSS property? Here's what I'm trying to create: https://i.sstatic.net/YKPEW.png Currently, this is what I've been able to achieve us ...

htmlcss

CSS descendant selector add style excluding child elements

My issue involves two divs each containing a table. When I apply the CSS class "table" to the first div, the second table in the div is impacted as well. .tbl-generic th:nth-child(-n+2),td:nth-child(-n+2) { background-color:red; width:25px; } ...

htmlcss

Align the inner container in the outer container-fluid

I'm struggling to center a container inside a container-fluid. Any suggestions on how to make it work? /* Setup Buttons Specific Styling */ .setup-bg { background: url("https://image.ibb.co/geAGqy/setupbtns_bg.png"); background-repeat: no-repea ...

htmlcssbootstrap-4

Using CSS grid for optimal responsive design

Today I delved into the world of CSS grid and instantly saw its potential in creating stunning layouts. However, one aspect that has me perplexed is how to adapt the grid for mobile devices. Below is an example that functions perfectly on a desktop screen ...

htmlcssmedia-queriescss-grid

Achieving Perfect Alignment in Website Layout using CSS and HTML

I have a customized CSS layout that was made for me, but I am no longer in contact with the original creator. I wanted to increase the size of a specific div (#rightcolumn) by 55px. To achieve this, I resized the iframe within the div and it automatically ...

htmlcss

Guide to setting up a custom js file in Laravel admin template

Currently working with Laravel 5.8 and utilizing the laravel-admin Template for administrative purposes. There are times when I require custom JavaScript and CSS files specifically for certain admin controllers. How can I include these JS and CSS in lara ...

javascriptcsslaravel-5laravel-admin

Angular 2's innovative approach to implementing a sticky footer concept

Is there a way to make my footer sticky without being fixed? I attempted using the CSS negative margin trick, but it did not work as expected. In the provided Plunker code, I tried to replicate the issue in my Angular 2 app. The goal is for the footer to s ...

htmlcssangularsticky-footer

The font implemented in Bootstrap does not appear to be adapting well to different

As I embark on the Bootstrap journey, I find that everything looks great on my desktop browser in terms of responsiveness. However, when I switch to my iPhone 6, it doesn't seem to display as expected... Provided below are a few screenshots: Desktop ...

csstwitter-bootstrapfontsresponsiveness

Blackberry - Printing HTML String within a text box

My question involves dealing with HTML Strings such as <p>something</p> etc... some other html string etc... <p>something</p> I want to display this formatted string in a field. For Android, I use a WebView... For iPhone, a UIWe ...

htmlstringblackberrybrowserfield

Expand the table in the initial state by using CSS to collapse the tree

I am struggling to collapse the tree view and need assistance. Below is the code snippet I've added. My goal is to have each node in the tree view initially collapsed and then expand a particular node on user interaction. For example, when I execute ...

javascriptjquerycss

What steps should be taken to correct the misalignment of the closing x symbol in the alert box?

After making adjustments to the line height, the closing x mark on the right now aligns closer to the bottom of the alert message box. I am currently utilizing Bootstrap version 5.0.1. Is there a way for me to vertically center the x mark? Thank you. CSS: ...

htmlcsstwitter-bootstrapbootstrap-5