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/
I have experience in coding HTML and PHP, but unfortunately, [email protected] (mail address) is still unable to receive emails from my website (http://cloudsblack.info/) and when I click the submit button, it leads to a blank page (http://cloudsblack.info ...
I'm in the process of creating a React project using the material-ui library. Currently, I am facing an issue with customizing the drawer component's background color. After some research, I learned that modifying the paper attribute of the drawe ...
I wish to create a dynamic menu that appears when hovering over a user, but only if the window size is above 977 pixels. Take a look at my code below: $(document).ready(function() { $(window).on("load resize", function(event){ var windowS ...
Greetings fellow developers, I've been working on enhancing my application's user system to include functionality for administrators to upgrade an account's level (granting admin privileges if it reaches level 10) or ban users from the site ...
I have developed the following script: let data = [ {day: 1, time: '08:00', note: 'madrid'}, {day: 2, time: '08:00', note: 'barcelona'}, {day: 3, time: '10:00', note: 'juve ...
I am working with an object that looks like this: var obj = { "00a9": ["\u00A9", ["copyright"]], "00ae": ["\u00AE", ["registered"]], "203c": ["\u203C" ...
Looking for a way to determine if the current moment is less than 3 minutes after midnight of the next date using a JavaScript Date object (e.g. 09.08.2020 15.45). This condition should evaluate to true for times ranging from 09.09.2020 00:00 up until 09.0 ...
For instance, function checkingScroll(){ var newHeight = element.scrollHeight; var scrollTopValue = element.scrollTop; alert("The scrollHeight property is: " + newHeight + "px"); alert("The scrollTop property is: " + scrollTopValue ...
Here is an example taken from: https://reactjs.org/docs/hooks-reference.html#usereducer const initialState = {count: 0}; function reducer(state, action) { switch (action.type) { case 'increment': return {count: state.count + 1}; ...
I recently started implementing CSS3 animations from the Animate.css library and I must say, they really enhance the look and feel of my website. The animations pair perfectly with WOW.js to create stunning effects. However, I have encountered a minor iss ...
I'm currently developing a resume builder app using ReactJS. One of the functionalities I'm working on is enabling users to download their resumes as PDFs. However, I've encountered an issue with the generated PDFs when using jsPDF. The down ...
I have an ajax-based asynchronous loader for select options. It accepts a remote address and returns an observable array that is correctly populated with descriptions and key values to be used in the following binding. <select data-bind="value: select ...
My HTML form is designed with an action on a PHP script, and the submit button displays a custom image instead of the default grey. While this code works perfectly in Chrome, it fails to function properly in Internet Explorer 7. Do you have any suggestions ...
I am experiencing an issue with filling out a form. I have attempted the following methods: driver.FindElementByXPath("//div[@id='s_dane_dokumentu-section?grid-1-grid?c_nr_lrn_komunikatu-control?xforms-input-1']").sendkeys "2112345 ...
Encountering an error consistently when running my code with the pseudocode provided below (Just to clarify, my code is built on the react-redux-universal-hot-example) Error: Can't set headers after they are sent. [2] at ServerResponse.OutgoingMe ...
Looking to spawn a child process from node.js and monitor its stdout before closing the pipe to terminate the node process. Here's my base code snippet that is currently not ending the node process: const childProcess = require("child_process"); con ...
Similar Question: How to retrieve a variable set during an Ajax request I am facing a challenge, as I am making an ajax call and receiving a number as the response. My query is, how can I assign this returned number to a variable that is accessible ou ...
I have a group with two radio buttons labeled purchase and expenses. When the purchase radio button is clicked, the panelpurchase will be displayed, and similarly, the panelexpense will show for the expenses radio button. Check out the image of the output ...
Working on an app that utilizes JQuery and JQTouch for iOS. The issue I'm facing involves dynamically generated HTML lists where the user clicks a row that needs to be highlighted. However, achieving this has proven tricky due to nesting 3 sets of quo ...
I have a question that is similar to the issue of circular dependency in GraphQL code discussed on Stack Overflow, but my problem lies within JavaScript (ES6). The size of my schema definition has become too large, and I am struggling to find a way to bre ...