Is there a way to add a bottom border to <tr> elements without affecting <td> cells that have no border?
I attempted the following approach, but setting border: 0 for <td> overrides the border for all <tr> elements as well, leaving only <thead> and <th> with borders!
table.admin_datagrid tbody tr {
border:1px solid red;
}
table.admin_datagrid td{
border: 0;
}
Were you asking about adding borders between the rows but not between the columns?
table.admin_datagrid tbody tr {
}
table.admin_datagrid td{
border-left: 0;
border-right: 0;
border-top:1px solid red;
border-bottom:1px solid red;
}
The problem here is not with the td border overriding the tr border, but rather with attempting to set a border on the tr element. Instead, consider applying a class to the td elements in the row that require a bottom border:
Here's an example using HTML:
<table class="data-table">
<tbody>
<tr>
<td class="border-bottom">
Text1
</td>
</tr>
<tr>
<td>
Text2
</td>
</tr>
</tbody>
</table>
And the corresponding CSS:
table.data-table td.border-bottom {
border-bottom: 1px solid blue !important;
}
table.data-table td{
border: 0;
}
Check out this JSFiddle for a working example: http://jsfiddle.net/8t7Lz/
Revise the sequence and include display:block :
table.admin_datagrid td{
border: 0;
}
table.admin_datagrid tr {
display: block;
border:1px solid red;
}
Fiddle: http://jsfiddle.net/z5GZN/
To improve the structure of your table, include the CSS property border-collapse: collapse.
table{
border-collapse: collapse;
}
table.data_table tbody tr {
border: 1px solid blue;
}
table.data_table td{
border: none;
}
Currently, I am attempting to create a component within a wrapped styled component. The Styled component has a circular shape, and I am seeking assistance in styling it accordingly. Can anyone provide guidance on how to apply the styles needed to achieve a ...
It has come to my attention that Firefox (specifically v19.0.2) is encountering an issue with the jQuery css() function when attempting to retrieve an element's padding. While using .css('padding-left') seems to be a workaround, it would be ...
Update: To achieve the desired typography, I will need to implement some creative jquery / css techniques. The first step is to create a class called .underlined which will allow me to have complete control over the underline by setting a background imag ...
We have a dynamic menu created using JavaScript (React/JSX) that opens on hover due to styling. My inquiries are: Instead of relying on CSS for the hover effect, where in the code can I implement an OnClick event to trigger the menu opening using Java ...
When floating a h4 and 2 divs to the left, and another div to the right, how can I place a block inside the remaining space that perfectly fills it? The background color of this space should not spread outside. [h4][div][div][remaining space][div] Thank ...
Is there a way to dynamically change the SCSS file with color variables based on the changing body class? For example, if my HTML includes: <body class="custom"> ... </body> I would like to load in style.scss: @import 'custom&a ...
Feeling a bit overwhelmed... I've been developing an app using nitrous.io and everything was working perfectly (CSS displayed, able to login to Steam and save entries in the database). Exciting stuff! However, when I deployed it to Heroku, things star ...
Having an issue with keeping text centered in the middle of a div that overlaps an image. It looks fine on desktop but when I try to make it mobile-friendly, things go haywire. I believe the problem lies in using fixed heights for the div, as setting heigh ...
I am currently working on customizing a one-page web template and I don't have much experience with Bootstrap. The template can be found at . My issue is that the menu items are not functional in Chrome. When I click on any menu item, nothing happens ...
Currently, I am in the process of writing CSS to customize the appearance of an XML document. Specifically, I aim to alter how child elements are displayed and have them resemble HTML OL/UL/LI elements. The structure of my XML file is as follows: <?x ...
I've customized some checkboxes to resemble a select dropdown by hiding the input and using only the label as the visible element. However, I'm struggling to add margin between the elements, which seems to work only when the checkbox is visible. ...
My objective is : To display a popin when the user clicks on a button To hide the popin when the user clicks elsewhere I previously implemented this solution successfully: Use jQuery to hide a DIV when the user clicks outside of it However, I wanted to ...
Is there a way to display a black transparent div in front of a <MediaCard/> when hovering over it? Below is the code snippet I am using with Material UI: <Box> <Typography variant='h3'>Home Page</Typography> < ...
I am currently experimenting with a basic Scrolldeck Jquery Parallax effect to scroll items at varying speeds. However, I am encountering some difficulties in making items move from top to bottom. In the example provided below, you will see a shoe moving f ...
Looking to replicate the effect of background-size: cover on a <video> element. I was able to achieve this with the code below: <video id="videobackground" autoplay="true" loop="true"> <source src="BackgroundFinal2.mp4" type="video/mp4" ...
I'm in the process of developing a calendar feature where users can select a specific "day" element to access a dropdown menu for time selection. The functionality is working fine, but I've encountered an issue. When a user selects a time from th ...
Recently, I started learning javascript and I am attempting to use vanilla javascript to show and hide text on click. However, I can't seem to figure out what is going wrong. Here is the code snippet I have: Below is the HTML code snippet: <p cla ...
On my website, I have a calendar displayed with dates like "11/29/2014" stored in an attribute called "data-date". The goal is to check the server for a log file corresponding to that date and change the CSS of the div on mouse hover. Here is the current ...
I am struggling with logic writing in my Angular2 project. On a HTML page, I have two buttons - YES and NO that I want to style with different colors. I have set up a condition in the div tag like this: ngClass="'result'?'yes':' ...
Utilizing the google visualization table to generate a html table, I have successfully fixed the top section of the html using the stuckpart div. This ensures that regardless of how I scroll, the button remains in place. However, I now aim to fix the table ...