Can a border not be added to a <tr> in an HTML table using CSS for any specific reason?

I am facing an issue with the borders of a table row (tr) when applying CSS styling. The tr has a class called "underRow" which is supposed to add a border at the bottom.

In my CSS, I have defined the following for the ".underRow" class:

.underRow {
    border-bottom-color: #7a26b9;
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

However, despite adding this class to the tr element, the border does not appear as expected. It only works if I apply these border attributes to the td elements, but that creates unwanted space between the cells. I want a straight line below the entire row without any gaps.

My question is whether it is correct to use CSS border attributes on a row (tr) element or if there is another way to achieve the desired result.

For context, here are the other CSS styles applied to this table:

.quantityTable {
    border-radius: 5px;
    background-color: #d6b4E1;
    padding: 5px;
    margin-bottom: 5px;
    width: 100%;
    border-width: 2px;
    border-color: #7a26b9;
    border-style: solid;
}

Answer №1

Yes, it should definitely work.

Check out the example here: http://jsfiddle.net/jasongennaro/qCzrg/

You might need to collapse your borders with

border-collapse:collapse

Or it's possible that other styles for the TD are taking precedence

Could you provide more code samples?

In response to your edit:

(but the issue is that I get a space in the middle where the padding is between the cells. I want to avoid this space and have one continuous line below the row.

It sounds like using border-collapse is crucial

You should incorporate it into the style of the table.

For more information, visit:

EDIT 2

Considering the new code and the comment provided:

The issue arises when using: border-collapse:collapse then the border-radius styling no longer functions correctly

I assume you are looking for something like this

.quantityTable{
    border-radius: 15px 15px 15px 15px;
    background-color: #d6b4E1;
    margin-bottom: 5px;
    width: 100%;    
}

.underRow{
    border-bottom-color: #7a26b9;
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

.underRow:last-child{
    border-bottom:none;
}

.underRow td{
    padding: 15px;  
}

Example: http://jsfiddle.net/jasongennaro/qCzrg/1/

NOTE

  1. I increased the radius for better visibility.

  2. I removed the border from the table itself

Answer №2

Certain web browsers may not support applying border styles directly to tr elements.

To work around this issue, you can apply the border styles to the td elements instead.

.underlineRow td {
    border-bottom: 1px solid #7a26b9;
}

If your table has border spacing, consider using border-collapse: collapse; to ensure consistent borders.

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 the best way to center align my horizontal subnav?

I am currently working on a horizontal navbar with horizontal submenus. One issue I am facing is getting the elements in mysubnav to align centrally instead of being pushed to the left all the time. If you need a visual representation of what I mean, plea ...

issue with the margin-bottom property not functioning as expected

Question about CSS code: .dropdown-menu { position:absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; list-style: none; font-size: 14px; background-color: #ff ...

Styling elements with Css Flex in a single row

Hi there, I'm currently working on a project and I'm facing an issue with aligning all the items in the same row. I've attempted to use flexbox but the items end up overlapping each other and I'm unsure of how to resolve this issue. To ...

Error: Bootstrap/CSS not functioning properly on IE and ED browsers

Currently, I am tackling a web application project, and much to my surprise, I discovered that the CSS/bootstrap is not functioning properly on Internet Explorer and Microsoft Edge. Despite attempting various solutions found on Stack Overflow, none seem to ...

What is the most efficient way to access a cell within an HTML table using jQuery or the Document Object Model (

I have an unchangeable HTML table styled with CSS. My goal is to extract the value from the first column for filtering purposes. I've been struggling to locate a suitable jQuery or DOM function to accomplish this task. Unable to find a way to access ...

Want to ensure a span is perfectly centered both vertically and horizontally within a div using minimal CSS code?

I am currently working with LESS (CSS) and facing an issue with aligning a span element (which contains button text) inside a div container (button). The span is horizontally centered but vertically aligned to the top. I also want the span to automatically ...

What causes Firefox's CPU to spike to 100% when a slideshow begins that adjusts the width and left coordinates of certain divs?

Seeking Advice I'm in need of some help with identifying whether the code I'm working on is causing high CPU usage in Firefox or if it's a bug inherent to the browser itself. The situation is getting frustrating, and I've run out of so ...

Issue with SVG mask not functioning when transform is applied

I am struggling to apply a mask to a transformed SVG element. When I try to do this with a path, the structure is the same. If I apply the mask to an element outside of the transformed group, it works as expected. However, if I try to do the same inside, t ...

Menu selection without javascript

Recently, I encountered an issue with a menu containing tabs. When hovering over a tab, a list of items appears at the bottom of the tab. However, I decided that I wanted this list to transition downwards instead of simply appearing (previously set as disp ...

Employing jQuery to save the href value as a fresh variable

There is an anchor tag with id 'item-1' that needs to be stored in a new variable called 'href'. The tag looks like this: <a id='item-1' href='#something'> To achieve this using jQuery, what approach should be ...

JavaScript Switch Open/Close Mobile Navigation Menu

I'm currently facing a challenge with a specific issue. I want to implement a toggle menu for mobile devices on a website that I'm developing. It's functioning smoothly, and you can see it in action on this CodePen. The JavaScript code for ...

Ways to dynamically incorporate media queries into an HTML element

Looking to make some elements on a website more flexible with media rules. I want a toolbar to open when clicking an element, allowing me to change CSS styles for specific media rules. Initially thought about using inline style, but it turns out media rul ...

The input range in ChromeVox is behaving incorrectly by skipping to the maximum value instead of following the correct step value

Attempting to get an input type="range" element to function correctly with ChromeVox has presented me with a challenge. Here's what I'm facing: When I press the right arrow key to move forward, it instantly jumps to the maximum value of 100 in ...

What is the process for opening a local HTML file in IE compatibility mode?

Having issues with IE compatibility mode while opening my HTML file on desktop. In IE8, unable to switch it to compatibility mode as the icon seems to disappear in local HTML documents. Any insights on this? LATEST UPDATE: Tried three solutions but still ...

Is it possible to utilize CSS to generate a full-width slider while maintaining the aspect ratio of the content?

I am currently utilizing the unslider plugin to design a full-width slider header on a webpage (). Although it functions well at the dimensions I set it up for (1920x450), issues arise when viewed on different screen resolutions. See below: The background ...

The `tailwind.min.css` file takes precedence over `tailwind.css` in my Nuxt

Having trouble configuring Tailwind to use a custom font without it overriding the tailwind.css file and not displaying the changes? https://i.stack.imgur.com/ExDCL.png Check out my files below. // tailwind.config.js const defaultTheme = require('ta ...

adjusting label widths using jQuery mobile

I am currently using jQuery mobile to develop my user interface, however I am facing an issue with adjusting the width of my labels. Can anyone provide guidance on how to set the width of all my labels to 108px? http://jsfiddle.net/GZaqz/ Check out the c ...

The JavaScript and CSS properties are not functioning properly with the HTML text field

I came across this CodePen example by dsholmes and made some modifications: Here Furthermore, I have developed my own form on another CodePen pen: Link The issue I'm facing is related to the placeholders/labels not disappearing when typing in text f ...

Update the class name of an element depending on the URL

Hey there! I'm working on customizing the style of some elements (specifically tds within a table) based on the current URL. Here are the pages I'm targeting: http:\\domain\site\welcome.html http:\\domain\site& ...

Is it possible to use bootstrap to hide specific components depending on the size of the media screen?

Struggling with styling responsiveness and hoping to find a Bootstrap class that can easily hide components on medium and small screens. I'm looking for a way to hide headings, paragraphs, buttons, and more without any extra hassle. ...