Would it be feasible to emphasize the border of a <tr> and add a background-color to the same <tr> within the table?
Would it be feasible to emphasize the border of a <tr> and add a background-color to the same <tr> within the table?
As per this particular response, it is possible to customize the borders of tr if the table has border-collapse set.
CSS :
table {border-collapse:collapse;}
tr {border:2px solid black;}
HTML :
<table>
<tr>
<td>cell</td><td>cell</td><td>cell</td>
</tr>
</table>
To view the outcome, you can check out this example.
If you have any uncertainties regarding setting background colors for tr, reviewing the provided fiddle may give you the clarity needed.
Check out this cool feature that allows you to highlight an entire row with a border using the .odd and .even classes:
table.dataTable tbody tr.selected td:first-child {
border-left: 1px solid lime;
}
table.dataTable tr.selected td:last-child {
border-right: 1px solid lime;
}
table.dataTable tbody tr.selected td {
border-top: 1px solid lime;
border-bottom: 1px solid lime;
background-color: yellow !important;
}
table.dataTable tbody tr.selected td:not(:first-child):not(:last-child) {
border-left: 0px;
border-right: 0px;
}
$("#example").on('click', 'tbody td', function() {
$(this).parent().toggleClass('selected');
});
See it in action here -> http://jsfiddle.net/z8bn8rj2/
New answer: Here's a nifty workaround since CSS doesn't support setting border colors for <tr> elements.
To remove the default .odd / .even classes added by dataTables, use the following code:
var table = $('#example').dataTable({
asStripeClasses : []
});
Next, set the borders of rows to lime and background color to yellow like so:
/* border-bottom of the headers, they appear as first row border-top */
table.dataTable thead th {
border-bottom: 1px solid lime;
}
/* set first column left border */
table.dataTable tbody td:first-child {
border-left: 1px solid lime;
border-top: 1px solid lime;
}
/* set last column right border */
table.dataTable td:last-child {
border-right: 1px solid lime;
border-top: 1px solid lime;
}
/* remove border between columns, alternatively set border as background-color */
table.dataTable tbody td:not(:first-child):not(:last-child) {
border-top: 1px solid lime;
border-left: 0x;
border-right: 0px;
}
/* set last row columns border-bottom */
table.dataTable tbody tr:last-child td {
border-bottom: 1px solid lime;
}
/* set all columns background-color */
table.dataTable tbody td {
background-color: yellow;
}
Try it out here -> http://jsfiddle.net/jasjek8p/
Is there a library or package available for Node.js that can help me create a task queue with a fixed timeout between the start of each task and an overall callback that is triggered after all tasks have finished? https://i.stack.imgur.com/j1wCY.jpg ...
Consider the following HTML code snippet: <div class="comment"> <span class="test">some content here</span> <p>Lorem ipsum</p> </div> <div class="comment"> <p>Lorem ipsum</p> </div> The ob ...
I need assistance to show the user input via the submit button. Users will enter tool types and the first five inputs will be displayed in list items (li). Once the limit of 5 tools is reached, a message 'Thanks for your suggestions' should appea ...
I have a slider range that I'd like to modify using JavaScript. Specifically, I want to change its background-image property. To achieve this, I attempted the following script: document.getElementById("range").style.backgroundImage = "linear-gradient ...
I started delving into coding a few months back, with my focus on mastering three.js/react. Currently, I am engrossed in a tutorial located at [https://redstapler.co/three-js-realistic-rain-tutorial/], where I aim to create a lifelike rain background. The ...
Within my AngularJS application, I implement MixPanel for analytics by using the asynchronous script in my index.html file. index.html <script type="text/javascript">(function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;a=e.createElement("script ...
I have a division with a specific class in the CSS named display: none;. When I click on a button, I switch the class using a toggle class feature called ng-class="vm.showing ? 'zoomIn' : 'zoomOut'". The issue arises when Angular does n ...
I have a list where each item is assigned a unique ID. I have written the HTML structure for a single item as follows: The structure looks like this: <div id='33496'> <div class='event_content'>..... <div>. ...
I've been experimenting with styling elements using absolutely positioned :before pseudo-elements. My current approach looks like this: .element:before { content: ""; display: block; height: 0; width: 0; border: 10px solid #ad ...
Currently utilizing Django and attempting to fetch data directly using javascript. Below are the code snippets. Within the idx_map.html, the JS section appears as follows: var act = '{{ activities_json }}'; document.getElementById("json") ...
I am facing a challenge where I need to clip a String at a specific index, taking into consideration that the String may contain HTML tags. The goal is to skip over any HTML tags while clipping the text. For instance, if the initial String is: "Les pirat ...
What is the most effective solution for addressing this issue related to closure in JavaScript? Here is a simple problem I am facing: I have 10 spans with onclick events (I want an alert showing the number of the span clicked on each click): var spans = ...
Here is the code that I am having an issue with: render() { var urlstr : string = 'http://localhost:8081/dashboard2/sustain-master/resources/data/search_energy_performance_by_region.php'; urlstr = urlstr + "?division=sdsdfdsf"; urlst ...
I'm currently working on creating a CSS design template. Within this project, I have two images named imageOne and imageTwo. Both images are styled with position: relative, as setting one to position: absolute would compromise the responsiveness of ...
As I was exploring the source code of various websites, I noticed a common pattern - all the icons were stored in one image map. Upon further investigation, I discovered that each icon is referenced individually when needed. I came across a helpful article ...
After reviewing various inquiries on this platform, it has been commonly believed that embedding an anchor tag inside another anchor tag is not achievable. However, I recently stumbled upon a website that successfully accomplishes this and I am curious to ...
I have encountered an issue while appending HTML from a dynamically created div using JavaScript. The problem arises when I try to append the HTML multiple times - each time it adds the content twice, thrice, and so on. This is possibly happening because i ...
Does anyone know how to troubleshoot the issue with this code? I am trying to make it so that when btnOne is clicked and a is true, a confirm box pops up. If yes is selected, then it should execute the btnTwo method. Currently, the popup isn't appeari ...
I'm encountering a 404 error while attempting to send a post request, along with a 'possibly unhandled rejection' error. Given my limited experience with Angular, any advice would be greatly appreciated. I've gone through the documentat ...
Imagine this scenario: https://i.stack.imgur.com/cliKE.png I am looking to determine the size of the red box within the textarea. Specifically, I want to measure the dimensions of the text itself, not the dimensions of the entire textarea. The HTML code ...