Why Does My Bootstrap Borderless Table Still Show a Border?

Just starting out with Boostrap and struggling to identify what might be causing this issue on my Create view and how to resolve it.

https://i.sstatic.net/nWNkc.jpg

Below is the relevant section of my view:

 <h3 class="text-primary pl-3">Client Demographic Information</h3>
        <table class="table table-bordeless" style="width:100%">
            <tr>
                <td style="width: 30%">
                    <div class="form-group, mb-3">
                        <label asp-for="Incident.CaseType"></label>
                        <br />
                        @foreach (var item in Html.GetEnumSelectList<CaseType>())
                        {
                            <input type="radio" asp-for="Incident.CaseType" value="@item.Text"/>@item.Text
                        }
                    </div>
                </td>
                <td style="width: 30%">
                    <div class="mb-3">
                        <label asp-for="Incident.PIFirstName"></label>
                        <input asp-for="Incident.PIFirstName" class="form-control" />
                        <span asp-validation-for="Incident.PIFirstName" class="text-danger"></span>
                    </div>
                </td>
                <td style="width: 10%">
                    <div class="mb-3">
                        <label asp-for="Incident.PIMiddleInitial"></label>
                        <input asp-for="Incident.PIMiddleInitial" class="form-control" />
                        <span asp-validation-for="Incident.PIMiddleInitial" class="text-danger"></span>
                    </div>
                </td>
                <td style="width: 30%">
                    <div class="mb-3">
                        <label asp-for="Incident.PILastName"></label>
                        <input asp-for="Incident.PILastName" class="form-control" />
                        <span asp-validation-for="Incident.PILastName" class="text-danger"></span>
                    </div>
                </td>
            </tr>
        </table>
        <table class="table table-bordeless" style="width:100%">
            <tr>
                <td style="width: 40%">
                    <div class="mb-3">
                        <label asp-for="Incident.PIAddressCity"></label>
                        <select asp-for="Incident.PIAddressCity" id="Select1" class="form-select" asp-items="@(new SelectList(Model.DisplayCityData.OrderBy(x => x.CityName),"CityName", "CityName"))"><option value="" selected disabled>---Select Residence City---</option></select>
                    </div>
                </td>

Any help would be greatly appreciated. Thanks!

Answer №1

typo in class name detected:

table class="table table-bordeless"

correction:

table class="table table-borderless"

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 is causing all three boxes to shift when I'm attempting to move just one of them?

Seeking assistance with a problem I'm encountering. As I work on creating my website, I've run into an issue where trying to move one of the three individual boxes (as shown in the image) causes all three of them to shift together. You can view t ...

Get the div to occupy the rest of the available height

I am facing a challenge with two divs on my webpage. The bottom one contains content that expands the highest. The page is set to 100% height and width using the CSS property position: absolute. <style> body, html { height:100%, width:100% } ...

What is the best way to add border-radius to an image while incorporating padding?

I am facing an issue with images that have white padding at the top and bottom. Please refer to the attached image. Whenever I try to apply the border-radius property to these images, the edges appear distorted. Is there a way to resolve this problem wit ...

HTML5, canvas covering every element

Below is the code that I am working with: <html> <head> <title>canvas</title> </head> <body> <canvas width="1745" height="569" style="width: 1730px; height: 1680px; position: absolute; z-index: 1"></canvas> ...

Tips for adjusting the width of Material UI TextField within a Table

I am utilizing a Material UI Table. This is how I construct it: tableValues.map((curRow, row) => { tableRows.push( <TableRow key={this.state.key + "_row_" + row}> {curRow.map((cellContent, col) => { let adHocProps ...

Disrupting Alignment Due to Input Tag

Hey there, I'm having an issue with my header design. I have a horizontal list of links in my header, and next to them, I wanted to add a search bar. Unfortunately, when I added the search bar next to the links, they all ended up appearing behind my b ...

Length of borders at the bottom of `td` elements in tables

I have been searching everywhere for a solution and just can't seem to figure it out. I am trying to adjust the length of the bottom border for td elements within a table. I have attached two screenshots for reference. Any assistance would be greatly ...

Build a custom form for the purpose of exporting an HTML file

I am in search of a way to provide my users with various "feature" choices that will assist them in creating an HTML file for an email. I already have the code ready for each feature, but I want users to be able to select a feature (such as Hero Image Head ...

What are some techniques for disguising text on a website to give the illusion of being in English but is actually impossible to read

I am seeking a way to obscure text by rendering it completely unintelligible. While this task is easily accomplished in handwriting, I require a method for achieving this on a webpage using the Verdana font. One idea I had was to create a Verdana-style f ...

Conceal all div elements except for displaying the initial two

Can an entire div be hidden with only the first 2 entities visible? <div class="inline-edit-col"> <span class="title inline-edit-categories-label">Brands</span> <ul class="cat-checklist product_brand-checklist"> < ...

Choosing the most suitable stylesheet in Angular 8 when multiple CSS files are present

In my project, I have several CSS stylesheets for angular components. I am curious if there is a method to designate a preferred stylesheet when multiple sheets loaded by a component contain the same styles but with different values. ...

Problem arising from animation not commencing at expected starting point

Creating a feature on an app that involves breathing exercises using CSS animations. The challenge I'm facing is ensuring the words "exhale" and "inhale" appear synchronously with the animation of a circle shrinking and enlarging. However, the animati ...

What is the proper way to ensure a flex item takes up 50% of the space when a gap is included in

It appears that I have misunderstood something about flexbox and am struggling to resolve the issue correctly. In my current setup, I have a flexbox container with four columns as its direct children. I want each .flexbox-item to take up 50% of the contai ...

Tips for minimizing the spacing between a label, span, or paragraph that causes the text to wrap

I recently created a label with text inside it. However, when I shrink the screen size, the label splits into two lines but the spacing between them is too wide. How can I narrow down this space? Below is the code snippet: <div class="col-xs-12 textA ...

Animate the jQuery display property to show a table without changing any specified spatial dimensions

When utilizing jQuery's $.animate() on an element styled with display:table, any spatial dimensions that are not explicitly specified to change will animate. Check out the fiddle here In the scenario presented, the width is defined for animation, bu ...

Retrieve the class name from a CSS stylesheet

How can I extract all the CSS class names from a CSS file? This is what my CSS file looks like: p.juicy{ margin-left:40px; } p.csBody{ text-align:justify; } p.csCode{ font-family:"Lucida Console", Monaco, monospace; background-color:sil ...

Vue is actively eliminating a background image through the use of the style attribute

There appears to be an issue where Vue is removing both the style attribute and the background image from this tag. <section style="background: url(images/banners/profiles/profile-banner-1.png);" class="profile-banner flex items-end md:items-end md:j ...

Is it possible to customize the color of the placeholder and clear-icon in the ion-search bar without affecting

I am working with two ion-search bars and I need to customize the placeholder and clear icon color for just one of them. <ion-searchbar class="search-bar" placeholder="search"></ion-searchbar> My goal is to target a specific i ...

avoid triggering the on hover state

When working with jQuery, I have a CSS style targeting a specific div: div.right-sm:hover{background-color: blue} Now, I am trying to prevent the hover effect using jQuery: $(this).parent('div').removeClass('right-sm:hover'); Howev ...

Controlling the scroll behavior of div elements with the CSS overflow-y property

This is the current setup I have: <div> <div> </div> <div> </div> <div> </div> </div> The inner divs are styled with this CSS: float: left; margin-right: 40px; width: 100px; While ...