Need some help with CSS styling CSS experts!
Using bootstrap in which
they have the following defined in bootstrap.css:
.table > tbody > tr.active > td{
background-color:#f5f5f5;}
I'm trying to highlight a row in a table when a user clicks it- easy enough,
my html structure follows exactly and I have the active class being inserted to the html when I click the row but it is just not highlighting and the style does not get applied...
<div class="container">
<div class="row">
<div ng-class=".....">
<div id="firstTable" class="group-table-split-body">
<table class="table-bordered table-condensed table-hover col-md-12">
<thead>
<tbody>
<tr ng-repeat="item in items"
ng-mouseenter="..."
ng-mouseleave="..."
ng-click="onRowClick(item)">
<td class="col-md-12">{{item.name}}.....
</td>
</tr>
</tbody>
</table>
.......................
however, if I try it with just a random test style class it works, like:
.anything
{background-color:#f5f5f5;}
so if I try .anything, it highlights....
I'm using Firefox...any ideas??
What you need to do is:
First make sure your own css file is loaded AFTER bootstrap.min.css
(this way your rules has higher priority)
After that you can easily override that bootstrap style by copying the exact same rule and changing its properties.
for example in your css add:
.table > tbody > tr.active > td{
background-color:red;}
and you will see difference. Another way to do this is by creating more specific rule that will override the bootstrap rule for example, I assume your base element here with class "table" is actually table so you could do this:
table.table > tbody > tr.active > td{
background-color:blue;}
Easiest and fastest solution to this problem is by overriding the property with important rule. But this is by far the worst solution and you should try to avoid important as long as possible (it will create problems later on).
However if nothing seems to work you can do it like this:
.active {
background-color: red !important;
}
You have forgotten class table from your table :)
.table > tbody > tr.active > td{
background-color:#f5f5f5;}
where is the class "table" ?
make it this
table > tbody > tr.active > td{
background-color:#f5f5f5;}
Related
I have a Bootstrap table, I want to remove the lines between some of the rows in the table (at the end of the table) is there a quick way to achieve this?
You can remove the border from Bootstrap tables using the following CSS:
.table>tbody>tr>td,
.table>tbody>tr>th {
border-top: none;
}
This will override Bootstrap's td and th selector specificity and apply your border-top style instead of theirs.
Note that this will only apply to tr elements within the tbody. You'll need to add in styling for the thead and tfoot elements if you want this to work for those as well.
Now where you specify some of the rows, I'm guessing you don't want this applying to all of them. For that, simply add a new class to the tr elements you wish remove the border on, and include that class name in your CSS selector(s):
<tr class="no-border">...</tr>
.table>tbody>tr.no-border>td,
.table>tbody>tr.no-border>th {
border-top: none;
}
For the rows in which you don't want border's to appear. Give them an additional class and add the border:none property to it.
For Ex : If you give the additional class name as .noborder to the element of the row.
Hope this helps you.
.noborder{
border:none;
}
<table border="1" width="100%">
<tr><td>Data 1</td></tr>
<tr><td>Data 1</td></tr>
<tr ><td>Data 1</td></tr>
<tr><td class="noborder">Data 1</td></tr>
<tr><td class="noborder">Data 1</td></tr>
</table>
You may use border-bottom: none; in your right selector. Please provide your html code so that we can figure out and analyze your structure.
<table class="table no-border">
<tr>
<td></td>
</tr>
</table>
i think you want to remove two remove vertical line between two row or column
go through this link to see demo LInk :- http://v4-alpha.getbootstrap.com/content/tables/
also you can apply
.table>tbody>tr.no-border>td,
.table>tbody>tr.no-border>th {
border-top: none;
}
I'm trying to write a custom style for a website and am running into a bit of trouble. The following bit of code appears a lot, and I need to remove the float attribute of the span. There are other spans on the page inside <td> elements with floats that must stay untouched, and CSS doesn't have any parent selectors. I can't edit the html in anyway or add any Javascript. What can I do?
<table class="forum_post box vertical_margin" id="post00001">
<tbody>
<tr class="colhead-dark">
<td colspan="2">
<span style="float: left">
<a class="post_id" href="stuff.com">text</a>
</span>
</td>
</tbody>
</table>
.box > tbody > tr > td > span { float: none !important; }
This says:
Find all
spans that are the direct descendant (child) of a...
td which is a child of a...
tr which in turn is a child of...
tbody and finally it being the one and only child of...
table
OR maybe ...
span[style*="float"] { float: none !important; }
This says:
Any span with an attribute of style containing the word float.
rel *=[external]
My HTML code
<div id="myelement">
<table class="myclass">
<tbody>
<tr>
<td>something</td>
<td>
<table>
<tbody>
<tr> hari </tr>
</tbody>
</table>
</td>
</tr>
<tr>
foo
</tr>
</tbody>
</table>
</div>
Xpath solution
"//tbody[1]"
Problem
I am looking for a CSS expression which should select first tbody which is a direct child of table, not the one inside tr.
If I use the CSS as tbody, then it would select 2, but I am looking for a way to fix it here. I know table>tbody will work, I am looking for if any more is there or not. As in my case I can't use table>tbody.
tbody tr td:first-of-type {
color: red;
}
DEMO
td:first-of-type will works too.
:nth-of-type(1) and :first-of-type are the same. Docs
Try using the immediate child selector >:
.myclass > tbody
Or if you just want the first one inside that div, you can do:
#myelement:first-child tbody
Use the direct child selector >. It will only select elements that are a direct descendant of another element
.myClass > tbody
Make sure to specify the class of the table so that you don't select the table further down in the DOM
This selector below will select the first tbody inside the table with class myclass, and not the one inside the descendant tr.
table.myclass > tbody
Common
table tr td
{
vertical-align:middle;
}
Custom
table.custom tr td
{
vertical-align:top;
}
When I use like this:
<table class="custom">
<tr>
<td>
<table>
<tr>
<td>this text align top, but I want to align middle
</td>
</tr>
</table>
</td>
</tr>
</table>
sub table behave like its parent. How can ignore parent element style?
One thing that you can do is adding the child selectors like so:
table.custom > tr > td { }
Then only the immediate children will match the style
You can use the > indicator to only target direct child elements
table.custom > tr > td
{
vertical-align:top;
}
However it should be noted that using a table within a table is generally not a good idea.
Note 2: this will not work in IE6.
table.custom tr td will select children at any level. The following DOM chains will all match
table.custom->tr->td
table.custom->tr->foo->td
table.custom->foo->tr->bar->td
Take a look at the CSS child selector >
http://www.w3schools.com/cssref/sel_element_gt.asp
http://css-tricks.com/child-and-sibling-selectors/
I have the following CSS which isn't working for me.
table.fields tr > td:first-child { padding-right: 50px; }
The HTML is like the following:
<table class="fields">
<tbody>
<tr>
<td> text... </td>
<td> another td elem... </td>
</tr>
</tbody>
</table>
I want to apply the padding to the first <td> element but not the second.
This was posted before stevebot fixed the question. Leaving my post here for the sake of its comments.
Your table has no fields class. Change it to this and your CSS selector should pick it up.
<table class="fields">
As discussed in the comments of the first answer, my lucky guess ended up solving the problem:
Use: table.fields tr > tr instead of table.fields tr > td:first-child
P.S: As I said, it might have been worth trying, and it was! Lucky me haha!