Using jQuery to modify the border of a particular row

I am facing an issue where I need to apply a border to two specific rows in a table after it has loaded. These two rows are consistent every time the table is loaded. The code snippet below works, but the default line breaks between the table rows prevent me from using a border thickness less than 2px. A 2px border appears too heavy for my requirements, while a 1px border does not show up against the default black lines.

This is the code I currently have:

$('#table-selections tr:eq(5)').css('border-bottom','2px dashed black');
$('#table-selections tr:eq(5)').css('border-top','2px dashed black');
$('#table-selections tr:eq(17)').css('border-bottom','2px dashed black');

This method of adding a border is not elegant and fails to override the default lines between the rows.

edit:

I've created a fiddle here showcasing how 1px doesn't work while 2px does

jqueryhtmlcsstwitter-bootstrap

Answer №1

To achieve the desired effect, I suggest implementing 2 distinct classes for each type of border and then utilizing addClass and removeClass within your jQuery code.

Have you ensured that your CSS styles for the table include border: 2px !important; ?

Answer №2

The reason why you are not seeing the expected 1px border is due to the CSS that is applied to each td element for the top border.

Within bootstarp.min.css

.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-top: 1px solid #DDDDDD;
    line-height: 1.42857;
    padding: 8px;
    vertical-align: top;
}

To resolve this issue, you will need to manually remove the top border from the 3rd row with the following code:

$('#table-selections tr:eq(2)').css('border-bottom', '1px dashed black');
$('#table-selections tr:eq(3) td').css('border-top', 'none');
$('#table-selections tr:eq(4)').css('border-top', '2px dashed black');

You can view the fiddle example here

Answer №3

Include a bit of styling with CSS

.table-condensed tr{
    display:table;
    width:100%; 

}

.table-condensed td{
     width: 100px; 
}

Check out the FIDDLE here

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

Display the remainder of an image's height within a div container

Here is the code snippet I am working with: HTML: <div id="mapWrapper" style="height: 624px;"> <div class="box" id="map"> <h1>Campus</h1> <p>Description Campus Map.</p> <img src="abc.png" ...

htmlcss

The VisJS Network lacks proper alignment

I am attempting to generate a vis js network. This is how I envision the graph should appear https://i.sstatic.net/xIv3s.png Here is the code snippet extracted from the page source <script type="text/javascript"> var options = { ...

jquerybootstrap-4vis.js

Looking for a custom JavaScript color wheel with advanced features?

In search of a javascript color picker/wheel that allows users to easily select colors for our paint shop. Once the color is selected, it should automatically add the color value to the shopping cart. Our online store is operated using PrestaShop, so we ...

phpjavascriptjqueryprestashopcolor-wheel

What steps do I need to take to get a website up and running with the index.html

After successfully hosting my website, I encountered an issue where it opens the index of the website (a list of files added via FTP) instead of the Index.html page. Can you advise on how to resolve this? Your assistance is greatly appreciated. ...

htmlftp

Ensure the padding and margin are both set to 0 when using inline styles

As someone who is not a designer, I attempted to send an email from PHP. In order to do so, I took a template and converted all styles to inline. However, I am unsure of where to include the universal margin and padding style in the template. *{margin:0px ...

phphtmlcsstemplates

sequentially linked dropdowns using jQuery, PHP, and MySQL for repeated

Here is a Sample MySql Table (including an id column): +----------------------------------+ | one | two | three | four | five | +----------------------------------+ | v1 | v2 | v3 | v4 | v9 | +----------------------------------+ | v1 | v2 | ...

phpjquerymysqlselect

When I log out and hit the back button, the PHP page continues to display without any changes

After logging out of my PHP session and being redirected to the login page, I am facing an issue where pressing the back button shows me the previous page without requiring a login. How can I fix this problem? Thank you in advance. index.php <form sty ...

javascriptphphtmlajax

One project contains a pair of React instances

I am currently working on a React Web App and recently encountered an issue with an 'invalid hook call' error. Upon further investigation, I discovered that there are duplicate copies of the React library in my project, including within the CSS f ...

javascripthtmlreactjswebpackredux

Drop-down selection triggering horizontal auto-scroll

Within my div element, I have a table with dropdowns. The div is set up to be horizontally scrollable. To create the dropdown functionality, I utilized Harvesthq Chosen. Let me provide some context. In Image 1, you'll notice that I've scrolled ...

javascriptjqueryhtmlcssharvest

CSS: The element's relative size causes the background image to vanish

I am facing an issue with displaying a background-image that is 800x480 pixels. The background image appears when the element has a fixed size, but not when the element has a relative size or a max-width. Functional CSS code: .audio-container, .settings- ...

htmlcss

Instructions on removing an HTML element from a div that has the attribute contentEditable

Here is an example of HTML code: <div id="editable" contentEditable="true"> <span contentEditable="false">Text to remove</span> </div> I want to be able to delete the entire span element (along with its text) with just one bac ...

javascripthtmlfbjs

What is the best way to ensure that a child div can expand to fit within the scrollable area of its parent div

I am facing an issue with a parent div that changes size based on the content inside it. When the content exceeds the initial size, causing the parent to scroll instead of expanding, I have a child div set to 100% width and height of the parent. However, t ...

javascripthtmlcssreactjs

What is the best way to create a hover effect for this text?

When I hover over the image div, the text section will smoothly appear from the bottom. You can see an example of what I want here. Below, you'll find the HTML and CSS code I've implemented for this effect. ============================== ...

htmlcss

Is the process of adding a new row by duplicating an already existing row dynamic?

I've encountered an issue where a row in a table is not being displayed because the CSS style has been set to display:none. Here's the HTML table: <table class="myTable"> <tr class="prototype"> ........ </tr> </ ...

javascriptjquery

Transform the numerical character into a checkbox within a table using AngularJS

In my HTML code, I am utilizing AngularJS to present data in a table. <div ng-controller="CheckCtrl"> <table class="table table-hover data-table sort display"> <thead> <tr> <th class="Serial_"> ...

htmlangularjscheckbox

Automatically inserting a row into an HTML table

My table structure looks like this: <form name="frm_data_nasabah2" method="post" enctype="application/x-www-form-urlencoded" action="<?php echo $page_action;?>"> <table class="table table-bordered table-hover" id="tab_logic_ ...

javascripthtml

Motion of the atoms

I recently came across an interesting effect on the IconArchive website, but I am unsure how to implement it. If anyone could help me understand the concept with a small example, that would be greatly appreciated. You can see the effect in action by visi ...

javascriptjqueryhtmlcss

Have you ever wondered how the automatic video play on scroll feature works on Tiktok.com and YouTube shorts when using a mobile device?

My goal with React JS is to develop a website similar to Tiktok, where the video below will automatically play with sound as the user scrolls down. I attempted to set this up using window.addEventListener("scroll",...), but after looking into it further, ...

javascripthtmlcssreactjs

To add an image, simply click on the designated area instead of using the traditional file input button. The image will then be displayed in the specified image container and resized on the client-side

Objective: I am aiming to enhance the image upload functionality by enabling users to click on an <img> element to initiate the file selection process, instead of using the traditional <input type="file"> button. There will be three placeholde ...

jquerycssimage

Is there a way to ensure uniform font display across all browsers?

Is there a way to ensure consistent font display across all browsers? I am facing an issue with font consistency on my webpage. While browsers like Internet Explorer Edge and 11, Chrome, and Firefox display the desired font correctly, Internet Explorer 8 ...

htmlcssinternet-explorerfonts