"Text in the Bootstrap table is too lengthy to display properly

I am facing an issue with my bootstrap table. The first column's text is not fitting properly, leading to an alignment problem. I am seeking a solution to make the first column text fit perfectly within the column.

Below is the code snippet for reference:

<div class="row">
        <div class="col-md-12">
            <div class="portlet light ">
                <div class="portlet-body">
                    <table class="table table-striped table-bordered table-hover table-checkable order-column" id="matches_table">
                        <tbody>
                            {% for field, value in object.items %}
                            <tr class="odd gradeX">
                                <td width=""><b>{{ field|field_name_split|title }}</b></td>
                                <td width="">{{ value }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

Answer №1

Your code is missing the . I have included a sample bootstrap table code below:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

    </head>
    <body>
        <div class="container">
            <h2>Hover Rows</h2>
            <p>The .table-hover class allows for hover state (grey background on mouse over) on table rows:</p>            
            <table class="table table-striped table-bordered table-hover table-checkable order-column">
                <thead>
                  <tr>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Email</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>John</td>
                    <td>Doe</td>
                    <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89e3e6e1e7c9ecf1e8e4f9e5eca7eae6e4">[email protected]</a></td>
                  </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

Thanks,

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

Designing hover-activated submenus and ensuring they appear at the forefront

I am currently utilizing jquery to implement a dropdown submenu on hover action. Here is the structure of the code: <div id="menucontainer"> <ul id = "topmenu"> <li><a onmouseover="javascript:show('div_1');">menu_1 ...

Alternative form for non-javascript browsers in the absence of script

I'm currently working on a landing page for an upcoming product, and I've run into a bit of a snag. <form novalidate method="POST" class="subscribe-form"> <noscript> </form> <form method="POST" action="/ ...

Jquery not functioning properly for show and hide feature

I'm new to using Jquery and JqueryUI. I have a div named front, which I want to initially display on window load and then hide it by sliding after a delay of 5500 milliseconds. However, I'm encountering errors in the jquery.min.js file. The HTML ...

Opacity of background color only applies to the color

So, here's the scenario - I currently have a background that looks like this: background:url(../img/arrow_lch.png) right no-repeat #2e443a; The challenge I'm facing is how to decrease the opacity of only the background color (#2e443a). Any sugg ...

tips on toggling div visibility based on data filtering

<script> function toggleContent(str) { if(str == 'recent' || str == 'old' && !($(".main_content").is(':visible'))) { $(".main_content").show(); } else if( str == 'newComment') { ...

How can I effectively structure a request for a list of issuu documents on Issuu?

I am attempting to utilize issuu.documents.list in order to display a list of documents from issuu. Initially, it was working fine without any issues. However, as soon as I added two additional parameters - startIndex and pageSize - the functionality cease ...

When clicked, the menu disappears successfully with the "show" functionality, but unfortunately, the "hide" feature is not working as intended

Within my menu, I have a section for portfolios that transforms into a dropdown on desktop hover and mobile click. The issue arises on mobile devices where the first click displays the menu correctly, but subsequent clicks do not trigger any change. I att ...

Adding a class to an img tag with TinyMCE

Currently, I am utilizing the TinyMCE editor as a standalone editor in my content management system (CMS). Within the CMS, there is an automatic setting that adds a curved border to any image tags within the cms div ID. In certain cases, I require the op ...

Utilizing AngularJS in conjunction with Asp: UpdatePanel

<%@ Page Title="" Language="C#" MasterPageFile="~/Admin/AdminMasterpage.master" AutoEventWireup="true" CodeBehind="ExamSet.aspx.cs" Inherits="demo.Admin.ExamSet" %> <asp:Content ID="Content1" ContentPlaceHolderID="content" runat="server"> <s ...

How to apply color to text in Node.js

I am in the process of creating a web-based compiler using NodeJS. My main objective is to highlight syntax in different colors. For example, consider the following C code: int var; printf("%d",var); In this code snippet, I would like the "int" and "prin ...

Browsing using the "touchmove" feature feels extremely laggy

I implemented a workaround to achieve "position:fixed" on mobile devices, specifically my Android device. This involved creating two divs with heights that combined to match the screen height through JavaScript, and adding touch listeners to the bottom div ...

Set the border-bottom style to match the width of the navigation bar menu

Struggling to align a horizontal line perfectly with the container and text below on my WordPress site. Check out the image reference here The bottom border doesn't seem to be matching up with the body-container of my website. Is there a way to adjus ...

Attempting to execute code on a database using PHP and MySQL

Hey there! I am just diving into the world of HTML and PHP, attempting to create a page that can execute an SQL query to transfer data from one table to another. However, I'm facing some difficulties in making it work as I need a user-provided date t ...

Displaying a specific section of HTML only if a certain resource bundle key is present

Working with JSF and needing to load a bundle named Extra, I have encountered an issue. <f:loadBundle basename="com.ni.lib.extra.delivery.ExtraBundle" var="extra" /> Within the variable "extra", there exists a value known as downtime_notice. To imp ...

How does JQuery handle color parsing in text?

Is there a way to automatically parse colors in text and apply them to CSS? For instance, if I type #40464f, I want the color to be caught and included in some CSS styles. I am familiar with how to achieve this by adding markup: <span data-color=""> ...

Component rendering based on conditions is not working properly when using Next.js, especially on the initial load

While utilizing Ant Design and a Custom Stylesheet, I have encountered an issue where the style appears broken upon first load. However, if I navigate to another page and return to the original broken page, it displays correctly. This problem only occurs d ...

Is there a way to send my form via the submission button inside a modal in ASP.NET MVC?

Although it may seem like a simple question to some, I am struggling with understanding how to implement a submit button that opens a modal and displays user input from a text box. The user can then choose to edit their input or proceed with submitting it. ...

How can I target specific HTML comments using XPath?

I need to extract specific nodes from a large HTML page by using Xpath: <html> ........ <!-- begin content --> <div>some text</div> <div><p>Some more elements</p></div> <!-- end content --> ....... ...

Optimizing anti-aliasing for rotated images in Internet Explorer 10

Seeking a solution for implementing anti-aliasing on a rotated image with a wide border specifically in IE10 as shown above. I have experimented with -ms-backface-visibility:hidden which successfully addresses the issue in Chrome, however it does not seem ...

Issue with Django+Bootstrap: Navigation bar dropdown menu links malfunctioning

Currently, I am in the process of developing a small web application using Django and Bootstrap4. Within my Project Folder in Django, there are various templates, with one serving as the base template that other templates extend. The Bootstrap CDN has been ...