Remove the borders on the right and left sides of a Bootstrap table that has

I have a table structured like this:

<table class="table table-hover table-bordered">

The table currently has borders on all four sides of each cell. I am looking to remove the left and right borders while keeping the top and bottom borders intact.

I attempted the following CSS code:

.table thead>tr>th,.table tbody>tr>th,.table tfoot>tr>th,.table thead>tr>td,.table tbody>tr>td,.table tfoot>tr>td{
   border-right:none;
   border-left: none;
   border-bottom: 1px solid red;
}

Although the code successfully adds a red border at the bottom, it does not remove the left or right borders as intended. The CSS is being processed, but the desired effect is not achieved.

Any suggestions on how to solve this issue?

csstwitter-bootstrap

Answer №1

Update this line of code: 

<table class="table table-hover table-bordered">

Change it to: 

<table class="table table-hover">

Don't forget to include this CSS code as well: 

.table {
  border: 1px solid #dddddd;
}

Alternatively, if you prefer to keep the border, use this CSS:

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #dddddd;
  border-right-width:0px;
  border-left-width:0px;
}

Check out the DEMO here: http://jsbin.com/IbebIpob/2/edit

Answer №2

Give this a shot:

border: 1px solid #eeeeee;
border-top: hidden!important;
border-bottom: hidden!important;

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

Is it possible to assign a numerical value to the prev() function or the prevUntil() function in jQuery?

Is there a way to apply a specific style to the six previous and six next items of a list, while giving a different style to those outside of this range using only CSS? I am currently using a functional but redundant jQuery code for this purpose. Can the p ...

jquerycsslistmenuseries

Web design featuring an aesthetic reminiscent of an open folder on an iPhone

I'm struggling a bit and could really use some assistance. I've been searching for a long time but can't seem to figure out how to create an iPhone folder-like design for the web. The design should have that "slide out" effect when you click ...

jqueryiphonecssstylesheet

Show the content within the carousel indicators div

I'm working with a bootstrap carousel that has 3 tabs and I want to name them Step 1, Step 2, and Step 3. Even though I've placed these names in the carousel-indicator divs, they are not showing up. Any assistance on this issue would be greatly ...

htmlcssbootstrap-5

The bottom of the page showcases the menu element

I have been utilizing Bootstrap to display a navigation bar: https://i.sstatic.net/P9maf.png In the provided screenshot, you can observe that the first menu item is positioned at the lower level compared to the rest of the menu elements. Below are the CS ...

htmlcsstwitter-bootstrap

Aligning a flex container that has wrapping enabled

I need help with displaying a list on the user's screen that can be reordered by drag and drop. Currently, the drag and drop functionality is working fine. However, I want to display the list in multiple columns as sometimes there are too many option ...

htmlcssflexboxcentering

Guidelines for attaching a div to the bottom of a page?

I have a navigation menu inside div.wrapper, and I am trying to make the div.wrapper stick to the footer. <div class="wrapper"> <div id="menu"> <ul> <li>1.</li> <li>2.</li> ...

javascriptjquerycsshtml

Is there a way to apply -webkit-line-clamp to this JavaScript content using CSS?

i have a random-posts script for my blogger website <div class="noop-random-posts"><script type="text/javascript"> var randarray = new Array(); var l=0; var flag; var numofpost=10; function nooprandomposts(json){ var total = ...

javascriptcssblogger

Eliminate the gaps within CSS3 columns

I'm attempting to achieve an effect that looks like: C---------------------------------------) | Address 1 | Phone Numbers | | Address 2 | Times place is open | (---------------------------------------) However, the spacing with th ...

htmlcss

Having trouble adjusting the top menu on my Shopify theme to fit on a single line

Check out this online store: On the site, you'll notice the menu at the top with options like Home and Chain Saw Safety. Despite my best efforts to adjust the CSS, I can't seem to get it all to fit on one line. I've played around with the ...

htmlcssshopify

CarouFredSel Transition Troubles

I am currently using CarouFredSel to create an image carousel, but I am encountering some issues with the transitions between items. My goal is to incorporate simple HTML elements into the carousel instead of just plain images. However, when I attempt to ...

javascriptjqueryhtmlcsscaroufredsel

What methods can be employed to maintain a consistent width for a multi-line span that aligns with the content?

Inside a div, I have 2 spans. When the content of the first span is short enough to fit on one line, the span's width matches the text content and positions the second span next to it. If the content of the first span is long and causes it to wrap, t ...

javascripthtmlcssflexbox

How can I create a responsive input group with automatic width using Bootstrap 3.1?

I am having trouble with the layout of my two floating divs. The first div contains buttons and the second div contains an input-group. However, the input-group is moving down a line instead of utilizing the available space. Here is a link for reference: ...

htmlcsstwitter-bootstrap

Highlight the phrase "figure x" within the paragraph to emphasize its importance

I want to emphasize figure 1, figure2, ...all the way up to figure 111. I am limited to making changes in HTML and CSS only, without using JavaScript or jQuery. Is there a different method than just inserting <strong> in the HTML? In CSS, we have : ...

htmlcssfigurecss-counter

The HTML select element - Styling the selected item using the option font

Currently, I am working on adding a font dropdown list to a web page. Each option in the dropdown list is styled with the corresponding font it represents like this:- <option value="Arial, Helvetica, sans-serif" style="font-family: Arial,Helvetica,sans ...

htmlcssuser-interface

Simple Selection Panel

Looking to include a simple dropdown menu with 5 choices. Once a selection is made, an answer corresponding to that choice will appear in another field next to it. For example: Choosing France from the dropdown would display 'Paris' in the adjac ...

htmlcsstextboxdropdowntextfield

Refreshing the page using location.reload triggers a reload of various elements

I am currently working on a website that supports multiple languages and utilizes a cookie named nav_lang to determine the user's preferred language for navigation. Whenever a user selects a new language, the cookie is updated accordingly and the page ...

javascriptjquerycssapachecookies

How to position two divs next to each other using CSS with just one adjustment

Is it possible to position two divs side by side, with one of them moving continuously up and down while containing an image? I attempted the following code: <div> <div style="margin:30px;width:100px;height:250px;position:relative;float:left; ...

htmlcssmove

What about a Material UI-inspired homepage design?

Looking at the demo image on the main page for Material UI has me really impressed. I am interested in using a similar theme with MUI for my web application. Can you advise me on how I can achieve this look, or do I have to start from scratch? https://i.s ...

cssreactjsuser-interfacematerial-uitheming

Achieve a safari-inspired checkbox appearance across all web browsers with custom CSS styling

In my asp.net mvc project, I am dealing with numerous checkboxes. The client has provided me with a PSD file in which the checkboxes are either white or black. In the absence of any check mark indicator, I assume the black ones are checked. My goal is to r ...

asp.netasp.net-mvc-3css

Utilizing jQuery for animating SVG elements with dynamic color changes and scaling effects upon hover

Seeking assistance from coding experts! I have created an icon and am attempting to modify it so that the color changes when hovered over. Additionally, I want the white square to scale down by 50% starting from the top-left corner of its current position. ...

javascriptjqueryhtmlcsssvg