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!
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've closed the last topic cause havr thought it was completely answered, but as it appear now, it isn't.
link: Space between two td or tr tags
the line-height:0; isn't very useful here, because at the original work i'm doin' it obviously with other stuff, and the thing is, this line-geight is combining all content to a very small line, except the images, i guess. I know i may do the line-height:0; to specific td and not only td, but the main point here is to get rid of the space between the td's as it was once at html 4, i think.
Hope some1 know the answer
thanks!
the ''example''
<table class="main-table-default">
<tr>
<td>
<table class="main-table-header-default">
<tr>
<td><img src="http://i1.ytimg.com/vi/OguOU5cyikI/hqdefault.jpg" border="0">
</td>
</tr>
<tr>
<td><img src="http://i1.ytimg.com/vi/OguOU5cyikI/hqdefault.jpg" border="0">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>random text<br><Br>
</td>
</tr>
</table>
i've got the solution, i mean just so u'll know...
but it's very ugly.
the way i thought to solve this, is to made a line-hight 0 to a specific td, and then make an line-hight of 100% to other td's in that specific td, but it's crazy... there's must be another way to solve it. other way it's very ugly :/
Its always good to add reset.css at the start to get rid of unnecessary spaces. I guess you haven't done it. For the time being add the following CSS
CSS:
table, tbody, tfoot, thead, tr, th, td
{
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
table
{
border-collapse: collapse;
border-spacing: 0;
}
Fiddle: http://jsfiddle.net/KEK98/
Make sure during the start of the development, you are including reset.css
Don't put any whitespace (including line breaks) before closing your TD elements.
Instead of:
<td><img src="http://i1.ytimg.com/vi/OguOU5cyikI/hqdefault.jpg" border="0">
</td>
Write:
<td><img src="http://i1.ytimg.com/vi/OguOU5cyikI/hqdefault.jpg" border="0"></td>
Alternatively, depending on your doctype, you may want to omit the closing </td> tag.
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 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/