This question already has answers here:
How to apply CSS to td of particular table?
(4 answers)
Closed 7 years ago.
How to apply CSS to td of particular table using Classname? (Not ID or Name)
Following is HTML
<table class="pure-table ToBeApplied">
<tbody>
<tr class="pure-table-odd">
<td>
<label>Bank</label>
</td>
<td>
<label>Japha Bank</label>
</td>
</tr>
</tbody>
</table>
<table class="pure-table NotToBeApplied>
<tbody>
<tr class="pure-table-odd">
<td>
<label>Bank</label>
</td>
<td>
<label>Japha Bank</label>
</td>
</tr>
</tbody>
</table>
I want to apply CSS say
td {padding-top:0; padding-bottom:0;}
i want to apply it on td's of table having Classname''ToBeApplied''.
I do not want to write a class and write same on each td of table
I do not want it to apply on td's of second table have Classname''NotToBeApplied''
How to modify HTML and CSS to achieve above?
Try this
table.ToBeApplied tbody tr td{
padding-top:0; padding-bottom:0;
}
Use:
.ToBeApplied td {padding-top:0; padding-bottom:0;}
try this
table.pure-table.ToBeApplied td{
padding-top:0px;
padding-bottom:0px;
}
i want to apply it on td's of table having Classname''ToBeApplied''.
Use:
.ToBeApplied td { ... }
I do not want to write a class and write same on each td of table
You don't need to, the code above will apply to all cells in table.ToBeApplied
I do not want it to apply on td's of second table have Classname''NotToBeApplied''
It won't.
Related
How can I remove for example margin from the last content__graph-item in this situatation?
<table>
<tr>
<td>
<div class="content__graph-item"></div>
</td>
<td>
<div class="content__graph-item"></div>
</td>
</tr>
</table>
It is the td that is the last child so try
td:last-child .content__graph-item
table tr > td:last-child .content__graph-item{
margin:0px;
}
In this case, it is recommended to give a class name to the table.
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 7 years ago.
I have such issue, I have something like that:
<tr>
<td class="someclass">
<input />
</td>
...
<td> </td>
<td> </td>
..
</tr>
I want to override "someclass" css class that will be applied only to first <td> with <input>. How can I do it? Maybe with parent specification or something like that? Note: I can't add new classes
You can use css pseudo class first-child
Supported from IE7 +
.someclass{background:red;}
#table1 tr > td:first-child {background:blue;}
<table id="table1">
<tr>
<td class="someclass">One</td>
<td>Two</td>
<td>Three</td>
</tr>
</table>
Please refer this link to know more about css selectors
Please try this:
table tr > td:first-child input{
property: value;
}
I'm trying to write some HTML/CSS to display a certain row with some of the elements left-aligned and some of them in the center. This was my HTML code:
<tr class="mainInfo" id="header">
<td> Item </td>
<td> Color </td>
<td> Size </td>
<div class="mid">
<td> Subtotal </td>
<td> Tax </td>
<td> Total </td>
</div>
</tr>
And this is my CSS code:
.mid {
text-align: center;
}
.mainInfo {
font: bold 13px Tahoma;
}
#header {
background-color: #68891;
color: white;
}
But the last three elements are not moving to the center, and I really don't understand why not. I tried putting class="mid" in the <td> tags and that worked, but doesn't that defeat the purpose of DRY?
Fiddle Demo
You cannot put a div instead of td element.
You should validate your HTML code with w3 validator.
If you'll do so you'll see you get this error message:
document type does not allow element "DIV" here; missing one of "TH", "TD" start-tag
Maybe you can do it this way:
<table>
<tr class="mainInfo" id="header">
<td> Item </td>
<td> Color </td>
<td> Size </td>
<td class="center">Subtotal</td>
<td class="center">Tax</td>
<td class="center">Total</td>
</tr>
</table>
JSFiddle example
No, you should not put divs inside tr's or tables.
And you should not use tr's or td's without table-element.
<table>
<tr>
<td>hello world</td>
<!-- This is bare minimum to use tables properly -->
</tr>
</table>
You can insert whatever(not tr or td, but could start new table) you want inside TD-elements though.
It's possible to use other elements to replace these standard ones with css display-property set to table-row etc., but you should stick to conventional tags.
Use colspan/rowspan to span over multiple table columns or rows.
CSS classes are designed to be used as often you need/want to. Only IDs should appear once per page.
Of course you should always keep the DRY concept in mind but in your case it's totally fine. It wouldn't if you would set your .mid class to every <td> because in that case you could just set the properties directly to the <td> element.
middle is not a valid value for text-align, so I'm going to assume, in your CSS, that's meant to be vertical-align. If so, it's because vertical-align will only apply to table cells, not divs - that would explain why it is only being successfully applied to your tds.
Additionally, you shouldn't really put a div inside a table (and shouldn't put a td inside of that) but that's not related to your problem.
Assign one class for left alignment and other for center like so...
.left {
text-align:left;
}
.center {
text-align:center;
}
Asign class to TD elements
<tr class="mainInfo" id="header">
<td class='left'> Item </td>
<td class='center'> Color </td>
</tr>
Table with only one border line, in this case i have two borders...
<table width="100%" border="1">
<tr>
<td width="12%"> </td>
<td width="88%"> </td>
</tr>
</table>
Thanks
Add the border-collapse CSS rule:
table {
border-collapse:collapse;
}
jsFiddle example
CSS:
table {border-collapse:collapse;}
You should really use css for styling where possible. A great article about it is here http://www.w3schools.com/css/css_table.asp
Try adding this to you css
table
{
border-collapse:collapse;
}
An example is here http://jsfiddle.net/cxmBW/1
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/