Styling TD with CSS for bottom border

Is there a way to adjust the bottom border of a TD element in CSS? The image provided demonstrates the desired effect, but with a slight overhang. I need the border to align perfectly with the width of the blue cell above it.

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

This is the code snippet I am currently working with:

table {
  border-collapse: collapse;
  width: 100%;
}

.tab {
  border-collapse: separate;
  background-color: #5B86EE;
  text-align: center;
  border-width: 1px;
  border-bottom: solid 3px #A0A0A0;
  border-top: solid 3px #E1E1E1;
  border-left: solid 3px #E1E1E1;
  border-right: solid 3px #E1E1E1;
  display: table-cell;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.active {
  background-color: #5B86EE;
  text-align: center;
  border-width: 1px;
  border-bottom-width: 2px;
  border-bottom: solid 3px #640000;
  border-top: solid 3px #E1E1E1;
  border-left: solid 3px #E1E1E1;
  border-right: solid 3px #E1E1E1;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
<table border="0" width="100%%" align="center">
  <tbody>
    <tr>
      <td class="tab">1</td>
      <td class="active">2</td>
      <td class="tab">3</td>
    </tr>
  </tbody>
</table>

I am limited in what HTML can be modified, but I have control over CSS styling. Is there a way to make the bottom border size match the cell width without including the border on the left or right?

Additionally, when viewed in Firefox, the border appears to overhang on the left instead of the right. Any suggestions on how to correct this issue would be greatly appreciated.

htmlcss

Answer №1

You have the option to utilize a pseudo element in place of a bottom border:

table {
  border-collapse: collapse;
  width: 100%;
}

.active,
.tab {
  border-collapse: separate;
  background-color: #5B86EE;
  text-align: center;
  border-width: 1px;
  border-bottom: solid 3px #A0A0A0;
  border-top: solid 3px #E1E1E1;
  border-left: solid 3px #E1E1E1;
  border-right: solid 3px #E1E1E1;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  position: relative;
}

.active:after {
  content: '';
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border-bottom: solid 3px #640000;
}
<table border="0" width="100%%" align="center">
  <tbody>
    <tr>
      <td class="tab">1</td>
      <td class="active">2</td>
      <td class="tab">3</td>
    </tr>
  </tbody>
</table>

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

Show a notification on the screen if the source of the iframe is blank

Is there a way to show a message "Please click on a match to get started" when no match link has been clicked? For example, when the iframe does not have an src attribute. My backend is built on Django. Below is the HTML code snippet: </form><b ...

htmljquerycssdjangoajax

Why do selected items in Ionic 3 ion-option not get deselected even after reloading or reinitializing the array

HTML File: <ion-item class="inputpsection" *ngIf="showDeptsec"> <ion-label floating class="fontsize12">Department</ion-label> <ion-select (ionChange)="showDepartmentChosen($event)" multiple="true" formControlName=" ...

htmlangulartypescriptionic3

Struggling to align your website content properly?

Currently, I am attempting to center all of the products on my Wordpress page so that everything is aligned centrally. I attempted wrapping it all in a div with specific CSS properties, but unfortunately, the content moved to the middle while the products ...

cssalignmentcenteringcenter-align

Refreshing data causes the data to accumulate and duplicate using the .append function in Jquery

I am currently working with a dynamic table that is being populated using AJAX and jQuery. Everything seems to be functioning correctly, however, I am encountering an issue when trying to reload the data as it just continues to stack up. Below is the func ...

javascriptjqueryhtmlajax

Is There a Way to Verify if JqxGrid Contains Any Errors?

Within the code below, I have successfully displayed highlighted borders when there are validation failures. Is it possible to determine any validation errors in a grid when a button is clicked? By clicking the button at the bottom, I would like to be able ...

htmlcssjqwidget

What is the syntax for implementing an if-else statement?

Just starting with algolia and looking for a hit template. Please take a look at the script below for the text/html template needed: <script type="text/html" id="hit-template"> <div class="hit"> <div class="hit-image"> <i ...

javascriptphphtml

Establish the dimensions of the element to match the dimensions of a responsive image

Currently, I am working on implementing flippable images on my website. It is important to me that the "back" of these images matches the dimensions of the front image. The challenge I am facing is that I have applied the Bootstrap img-responsive class to ...

jqueryhtmlcssangularjstwitter-bootstrap-3

Use of number type input on mobile devices in HTML

My goal is to display the up/down arrows alongside an input element with type="number" in Chrome on Android. I've adjusted the CSS to set opacity=1, but unfortunately, they are not appearing. On desktop, however, they show up without any iss ...

htmlcssinput

Tips for automatically adjusting a vertical side bar to fit between the browser's header and bottom

I'm having trouble with aligning my sidebar vertically between the header and the bottom of the browser window. Currently, the bottom items are extending beyond the browser's bottom edge. How can I adjust this to ensure proper alignment? Here is ...

htmlcss

Ways to superimpose images

Everything seems to be functioning correctly in my code, but I would like the output images to overlap slightly. This could possibly be achieved using margins, padding, or some other script. Additionally, is there a way to incorporate z-index so that the ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to send props to a styled component without needing to convert them to transient props beforehand

Recently, I designed a custom Text component that accepts several props. These props are then forwarded to the styled component where specific styles are applied. However, I am facing an issue where I do not want these props to be passed down to the DOM, b ...

javascriptcssreactjstypescriptstyled-components

The progress bar for uploading a file is causing issues with the redirect function in the

I am currently facing an issue with my file submission form and progress bar in JavaScript. The progress bar is interfering with the controller, preventing it from redirecting back home with the link. I have tried removing window.location.href="/"; but thi ...

javascripthtmljqueryajaxlaravel

The initial child expands in width according to the content until it reaches the boundaries of the parent, triggering the

My goal is to achieve a layout where the parent container's width can vary. The first child element (red) should expand based on its content until it reaches the end of the parent, at which point text-overflow: ellipses should be applied. The second c ...

htmlcss

Utilizing jQuery to establish various AJAX requests through functions on page load and button click

Utilizing a basic ajax call both on page load and click events, where I have defined separate functions for each. Despite using different URLs and parameters in the function, the JSON data from the previous call is still being displayed when clicked. Bel ...

javascriptjqueryhtmlajax

Using CSS grid can allow for paragraphs to overlap on top of each

https://i.sstatic.net/LVsgQ.jpgCurrently working on constructing a biography page filled with text content, and I aim to utilize CSS GRID instead of floats. I encountered an issue in getting the text to occupy all the available white space within the layou ...

htmlcsspositionoverlappingparagraph

In ASP.NET MVC, use CSS styling specifically for Partial Views by encapsulating the styles within a `<style scoped>` tag

A new HTML attribute has emerged, known as scoped, however, it is currently only supported by Firefox. This attribute allows you to declare internal styles solely for the parent element. I am curious if it is feasible to replicate this functionality in AS ...

asp.net-mvchtmlcssasp.net-mvc-5

Including a drop-down arrow or triangle next to the initial button

In the navigation bar displayed below https://codepen.io/shaswat/pen/XzpRXL Is it possible to create a down triangle or arrow next to the "home" link, which changes direction upward when hovered over? How can this be achieved without modifying any HTML e ...

htmlcss

Transfer data from TWO input fields within a PHP document to another PHP document using only one submission button

Is it possible to have two textboxes and submit the values entered in them to another PHP file using a single submit button? Transferring value from page1.php to page2.php Currently, I am able to pass a value from one text box: <form action='pag ...

phphtmltextboxsubmit

Struggling with my Transform Origin in CSS for SVG

I have two classes (firstCircle & spin) on the first circle on the left, and I'm attempting to make it rotate in place. After removing them from the css so you can see the circle, I am having trouble with transform-origin. My code seems wrong as i ...

csssvg

Sending information from a parent component to a child component within an Angular application

How can I efficiently pass the this.formattedBookingPrice and this.formattedCheckingPrice values to a child component using the value array instead of static values, especially when they are inside the subscribe method? This is my parent component. expor ...

htmlarraysangulartypescript