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;
}