i want to apply css before p tag td. other td should be not effected
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>heading</td>
<td>some data</td>
<td><p class="may-class">Date</p></td>
</tr>
</table>
What it sounds like you are looking for is a parent selector, which CSS doesn't contain (yet...)
http://css-tricks.com/parent-selectors-in-css/
What I would do is apply a class to the td that you want to style. If you can't access the HTML than maybe you can style the p tag inside of the td with a direct child selector:
td > p { ... }
Refer to this question for ways to style it using Javascript:
Is there a CSS parent selector?
When the td with the p-class is always the only and last element of the tr you can use :last-child css styling.
Like:
tr td:last-child {
color:red;
}
EDIT:
It doesnt work with CSS. CSS cant get the parent of an element. Use jQuery/javascript instead:
jQuery('.may-class').parent().addClass('someClass');
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/
Using CSS, how do I set the formatting of just a single cell or a single column?
Use the ID selector to target just that one element of the page, in this case, a table cell:
<tr>
<td id="foo"></td>
</tr>
Then in the CSS:
#foo
{
//-- CSS styling goes here just for this element only
}
That hash symbol (#) marks that name selector as belonging to an id. You can further lock it down in the stylesheet to apply only to a TD cell with that ID like so:
td#foo
{
//-- CSS styling goes here just for this element only
}
If you add in the rowspan attribute into the TD, you'll be able to turn that into a column and keep the styling you may have set out.
<td id="foo" rowspan="3"></td>
If you mark the CSS selector name with a preceding period (.), like this:
.foo
{
//-- CSS styles
}
that will target class selectors in the HTML and you can style more than one matching element if you apply the CSS class attribute to the tag, like so:
<tr>
<td class="foo"></td>
<td class="foo"></td>
<td class="foo"></td>
</tr>
Don't use CLASS unless it will appear more than once on the page.
Give the cell a class name and style the class.
<td class="cellClass">test</td>
.cellClass { color: #a9a9a9 }
For table cells, you'll need to give it some sort of identifier such that you can refer to it. Depending on your needs, this will be either a class or an id.
<td class="specialCell">...</td>
In your CSS you can then apply different formatting:
.specialCell { color: red; }
If you want to apply different styles to a column, there is the <col> tag, but browser support is limited. You're probably better to apply that class to all elements manually (or by using Javascript)
You can style the COLGROUP that applies:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#special { background:yellow }
</style>
</head>
<body>
<table>
<colgroup></colgroup>
<colgroup id="special"></colgroup>
<tr>
<td>a</td>
<td>1</td>
</tr>
<tr>
<td>b</td>
<td>2</td>
</tr>
</table>
</body>
</html>
Check out the HTML <col> and <colgroup> tags, which allow you to apply formatting to entire columns or adjacent groups of columns at once.
give the cell/column a class or id and use css to apply the formatting to that
you can assign two names to a column. ex
<div class="foo"></div>
<div class="foo bar"></div>
<div class="foo"></div>
div.foo { color: #fff; }
div.bar { background-color: green; }
perhaps that could solve your problem?