I'm attempting to style just the first two elements of this particular table:
<table class="myTable">
<tbody>
<tr>
<td>some stuff</td> <--- needs style
<td>some stuff</td> <--- needs style
<td>some stuff</td>
<td>some stuff</td>
<td>some stuff</td>
</tr>
</tbody>
</table>
Multiple tables exist on my HTML page so I don't believe I want to use first-child or nth-child selectors. What is the best way to go about this? Thanks in advance.
Actually, if that class is unique to the table in question, nth-child is the way to go:
.myTable tr:first-child td:nth-child(1),
.myTable tr:first-child td:nth-child(2) {
background-color: red;
}
...assuming you only want to style the first two columns in the table's first row. Otherwise, for all rows:
.myTable td:nth-child(1),
.myTable td:nth-child(2) {
background-color: red;
}
Example: http://codepen.io/paulroub/pen/eogcb
You can easily use nth-child selectors for a specific class or even ID which is more strict. What makes you think that you can't use them in this case?
Put an Id on the table and then access selectors via id
OR
if that's not possible try this
$('.myTable td:lt(3)').addClass('yourClass');
PS:Please remember that n-the child is 1 based and not 0 based indexing.
Related
I have this table <table></table> and there are many <label></label>'s inside. Is there a way to apply some property to all the labels inside the table but to none of the labels outside.
In other words, I'd like to write something:
FOR each label IN my table:
APPLY: property
PS: I know about the classes, but if I use class, I'll have to use <class= > for each label manually.
Are you just trying to style <label>'s that are inside a table? If so, just use a parent/child selector so only those applicable are styled as follows:
table label {
color: red;
}
<table border="1">
<tbody>
<tr>
<td><label>LABEL INSIDE TABLE</label></td>
</tr>
</tbody>
</table>
<label>LABREL OUTSIDE TABLE</label>
If you add a class to the appropritate table's, you can style labels only in those tables:
table.test label {
color: red;
}
<table border="1" class="test">
<tbody>
<tr>
<td><label>LABEL INSIDE TABLE with class TEST</label></td>
</tr>
</tbody>
</table>
<table border="1">
<tbody>
<tr>
<td><label>LABEL INSIDE TABLE with no class</label></td>
</tr>
</tbody>
</table>
<label>LABREL OUTSIDE TABLE</label>
what you need is google more and read more.
it called css selector. you can use it like this
table label{
color:red;
background:green;
}
and so on. the class it self it's to specify what this particular label should do and this label should do. you can find it more in here all about selector
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;
}
Currently I am getting the data-name of the second <td> and using CSS to place it inside the second <td> and then add a line. Instead, I would like to get the value of what is between the FIRST <td></td> and place that inside the SECOND/LAST <td></td> instead of using the attr(data-name) is this possible purely with CSS and NO JavaScript/jQuery?
JSFiddle example: https://jsfiddle.net/90e6u449/
HTML
<table>
<tr>
<td>Some text</td>
<td data-name="Some text">Column 2</td>
</tr>
</table>
CSS
table tr td:last-child:before {
content: attr(data-name) ": \A";
white-space: pre;
font-weight: bold;
}
table tr td:first-child {
display: none;
}
NO. This is not possible with css.
You cannot get attribute value in other element set in another element.
Javascript or Jquery is the best option.
You cannot make function/action with css.
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
I have table with some rows.
I would like to create a CSS that allow me to change the color for the first TD element in a TR row recursively only for a table which has the class mytable.
Could you give me a sample of CSS?
<table class="mytable">
<tr>
<td>Event Title:</td><!--Change color here-->
<td>{EventTitle}</td>
</tr>
<tr>
<td>Start date:</td><!--Change color here-->
<td>{DateTimeStart}</td>
</tr>
<tr>
<td>End date:</td><!--Change color here-->
<td>{DateTimeEnd}</td>
</tr>
</table>
For this you can use :first-child property. Write like this:
.mytable td:first-child{
color:red;
}
Use the CSS "first-child" element: http://www.w3schools.com/cssref/sel_firstchild.asp
So can do something like:
.mytable td:first-child {
something here
}
as #sandeep has written you can use first-child to achieve the goal. Better approach, if possible, is to add a class name to your first td. If this is supposed to be the header, you might also want to use th instead of td
Sandeep has the right idea, but you seem to be asking for a style rule that's slightly more specific. Try this:
table.mytable td:first-child {}
:first-child does not work in IE, a practical approach would be to change these td which you are gonna apply a background to th and then style them
You can try this:
HTML
<table class="mytable">
<tr>
<td>Event Title:</td><!--Change color here-->
<td>{EventTitle}</td>
</tr>
<tr>
<td>Start date:</td><!--Change color here-->
<td>{DateTimeStart}</td>
</tr>
<tr>
<td>End date:</td><!--Change color here-->
<td>{DateTimeEnd}</td>
</tr>
</table>
CSS
.mytable tr td:first-child{
color:red;
}
http://jsfiddle.net/hrBAn/1/