Tips for modifying the color of a specific section of the border within a table

.table {
    background: #fff;
    position: relative;
    bottom: 210px;
    width: 90%;
    border: 2px solid #fff;
    border-width: 30px;
    border-collapse: collapse;
  }

  .table-year-1 {
    font-size: 22px;
    width: 2%;
    padding-top: 3px;
  }
  .table-year-2 {
    width: 2%;
    font-size: 22px;
    padding-top: 3px;
  }

  .table-head-text {
    font-size: 18px;
    padding-bottom: 8px;
    padding-top: 8px;
  }
  
  .bk{
    font-size:23px;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  
  .top-table-text{
    font-size: 26px;
  }
  
  table .tr-border{
    border-bottom: 1px solid #4f91d8;
  }
  table .tr-border-top{
    border-top: 1px solid #4f91d8;
  }
  
 .spacer{
    display: table-cell;
   width: 3%;  
  }

  td {
    font-size: 19px;
    padding: 0px 0px 0px 10px;
  }
<table class="table">
<tbody>
    <tr>
        <td class="table-head-text top-table-text">Assets</td>
        <td class="table-year-1 bold">2018</td>
        <td class="spacer">&nbsp;</td>
        <td class="table-year-2 bold">2017</td>
    </tr>
    // Rest of the table code goes here

In order to create separation, I need to change the bottom border color to white at specific sections. Currently, all borders have one color. I'm working on adding white borders for better distinction between the blue and grey areas. This example image illustrates how I want the border changes to look.

htmlcss

Answer №1

A table row (tr) defines the bottom border line of a table. To achieve the desired effect, you must target individual table cells (td's).

You are almost there! For example, change table .tr-border to table .tr-border td. Then create rules for table .tr-border .table-year-1 and table .tr-border .table-year-2

Your final CSS could look something like this: 

.table {
    background: #fff;
    position: relative;
    bottom: 210px;
    width: 90%;
    border: 2px solid #fff;
    border-width: 30px;
    border-collapse: collapse;
  }

  .table-year-1 {
    font-size: 22px;
    width: 2%;
    padding-top: 3px;
    background-color: #4f91d8;
  }
  .table-year-2 {
    width: 2%;
    font-size: 22px;
    padding-top: 3px;
    background-color: #CCC;
  }

  .table-head-text {
    font-size: 18px;
    padding-bottom: 8px;
    padding-top: 8px;
  }
  
  .bk{
    font-size:23px;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  
  .top-table-text{
    font-size: 26px;
  }
  
  table .tr-border td{
    border-bottom: 1px solid #4f91d8;
  }

  table .tr-border .table-year-1 {
     background-color: #4f91d8;
     border-bottom: 1px solid #FFF;
  }

  table .tr-border .table-year-2 {
     background-color: #CCC;
     border-bottom: 1px solid #FFF;
  }
  
 .spacer{
    display: table-cell;
   width: 3%;  
  }

  td {
    font-size: 19px;
    padding: 0px 0px 0px 10px;
  }
<table class="table">
<tbody>
    <tr>
        <td class="table-head-text top-table-text">Assets</td>
        <td class="table-year-1 bold">2018</td>
        <td class="spacer">&nbsp;</td>
        <td class="table-year-2 bold">2017</td>
    </tr>
    <tr>
        <td>Cash &amp; Due From Banks</td>
        <td class="table-year-1">$149,753</td>
        <td class="spacer">&nbsp;</td>
        <td class="table-year-2">$77,515</td>
    </tr>
    <tr>
        <td>Investment Securities</td>
        <td class="table-year-1">$929,432</td>
        <td class="spacer">&nbsp;</td>
        <td class="table-year-2">$830,878</td>
    </tr>
    <tr>
        <td>Loans (net of valuation reserve)<br />
        ($28,582 in 2018 &amp; $27,063 in 2017)</td>
        <td class="table-year-1">$1,902,960</td>
        <td class="spacer">&nbsp;</td>
        <td class="table-year-2">$1,813,062</td>
    </tr>
    <tr>
        <td>Federal Funds Sold</td>
        <td class="table-year-1">$0</td>
        <td class="spacer">&nbsp;</td>
        <td class="table-year-2">$0</td>
    </tr>
    <tr>
        <td>Premises &amp; Equipment</td>
        <td class="table-year-1">$49,956</td>
        <td class="spacer">&nbsp;</td>
        <td class="table-year-2">$46,666</td>
    </tr>
    <tr>
        <td>Accrued Income</td>
        <td class="table-year-1">$12,652</td>
        <td class="spacer">&nbsp;</td>
        <...

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

Tips for recalling the display and concealment of a div element using cookies

My HTML code looks like this: <div id='mainleft-content'>content is visible</div> <div id="expand-hidden">Button Expand +</div> To show/hide the divs, I am using JQuery as shown below: $(document).ready(function () { ...

javascriptjqueryhtmlcsscookies

Resizing columns in HTML table remains effective even after the page is refreshed

I've created HTML pages with tables that have multiple columns, but I'm experiencing an issue. The columns are not resizable until I refresh the page. Could someone assist me in fixing this problem and explaining why it's happening? ...

javascriptjqueryhtml

Searching on Google for the Twitter Bootstrap documentation using the Google search

Seeking advice on creating a basic index page with a Google-style centered search bar using Twitter Bootstrap. Struggling to achieve desired aesthetics. Need help adding a search icon button to the right side of the search field. Utilized typeahead for fu ...

phphtmlcsstwitter-bootstrap

The elements in the list are too large for the designated area on Internet Explorer and Chrome browsers on Mac computers

I am facing an issue with my navigation menu on Internet Explorer and Chrome on MAC. The last element of the list is not fitting into the given width (which is fixed at 1000px). It works fine on Firefox, Opera, and Windows Chrome. I cannot test Safari at t ...

htmlcssmacosinternet-explorergoogle-chrome

Using Javascript to delete an HTML list

Currently, I am working on a webpage that includes notifications along with options to mark them as read individually or all at once. However, when attempting to use my loop function to mark all notifications as read, I noticed an issue. let markAllAsRead ...

javascripthtmlfrontend

problem with selection of date and month in dropdown list with jquery

Recently, I've been dabbling in jQuery and decided to create two list boxes using it. One box contains dates while the other contains months. It's quite handy since I need them in different sections of my HTML page. However, when attempting to en ...

jqueryhtmlcss

The background of the webpage section is being cropped on mobile devices

Currently, I am delving into the creation of a website completely from scratch to serve as an online CV for networking and job/school applications. My journey with HTML and CSS is relatively fresh, having started only about 5 months ago. Overall, things ha ...

htmlcssmobile

What is the best way to retrieve an <a> tag element using Selenium in Python?

I am fairly new to using Selenium and could use some guidance with the following issue. I am attempting to create a birthday bot for Facebook, but navigating through the platform's latest UI has been challenging with JavaScript disabled. I've bee ...

pythonhtmlcssselenium

The smooth transition of my collapsible item is compromised when closing, causing the bottom border to abruptly jump to the top

Recently, I implemented a collapsible feature using React and it's functioning well. However, one issue I encountered is that when the collapsible div closes, it doesn't smoothly collapse with the border bottom moving up as smoothly as it opens. ...

javascriptcssreactjssassstyled-components

Creating Immersive Web Pages

I am currently generating a large amount of data in HTML for periodic reporting purposes. The table consists of approximately 10,000 rows, totaling around 7MB in size. As a result, when users try to open it, the browser sometimes becomes unresponsive due t ...

javascriptjavahtmljson

Safari does not display disabled input fields correctly

I have designed a simple angular-material form with various inputs that are organized using angular flex-layout. The form displays correctly in all browsers except for Safari on iOS devices. The problem in Safari arises when loading a form that contains d ...

htmlcssangularangular-materialangular-flex-layout

Ways to direct to a specific div upon clicking an anchor tag following a page reload?

<a href="#goto">Link 1</a> <div id="goto">DIV</div> Whenever I click on the anchor tag, my webpage reloads and displays a new div with the ID of goto. This div was previously hidden but is now visible at the bottom of the page. I ...

javascriptjqueryhtmlcss

Unable to interact with the page while executing printing functionality in

component: <div class="container" id="customComponent1"> New Content </div> <div class="container" id="customComponent2"> different content </div> ...

javascripthtmlangularprinting

Keeping the header in place: fixed positioning

This particular situation is quite challenging for me. I have a webpage that requires horizontal scrolling. There is a menu at the top of the page that needs to remain centered on the page at all times. Even with the use of jQuery, I am uncertain how to ac ...

htmlcsspositionfixed

What is the best way to create a dynamic textbox or label within a specific div class?

I need assistance with my dynamic asp.net page where I am generating labels and text boxes in a form. Is there a way to ensure that these elements are generated within a specific div class? Below are the relevant code snippets: for (int i = 0; i < cou ...

c#htmlcssasp.net

Creating TypeScript types for enums can make your code more robust and ensure that you are using

I need to create an interface based on the values of an enum for a React use-case. The enum contains key value pairs that are used as form IDs. When the value of an input element is changed in an event listener, I want to set the state using this.setState( ...

htmlreactjstypescriptenums

Help! The CSS height property is not working properly and I'm not sure how to resolve

I'm facing an issue with the height property of a specific div and I can't seem to fix it. SCSS: .security{ border: 3px #1D3176 solid; display: flex; h2{ position: ...

htmlcss

Positioning the Submenu in Elementor Site

I've been working on creating a vertical navigation menu with a horizontal submenu for my website using Elementor. While I've made some progress, I'm struggling to position the submenu correctly. My goal is to have the submenu display next t ...

htmlcsselementor

Retrieve data from an HTML table with the power of jQuery

I have a table with the following structure. <form id="myform"> <table> <tr><th>TEST</th> <th>VALUES</th> <th>UNIT</th> <tr><td>Abc</td><td><input type="text" & ...

jqueryhtml

Ensuring text is perfectly centered within a label and creating a label that is entirely clickable

Struggling to style a file input button and encountering some issues with labels. Here is the button in question. Firstly, how can I center the text in the label? Secondly, how can I make the entire button clickable instead of just the upper half? Also, ...

htmlcssbootstrap-5