In a table all <th> are having class and <td> dont.
Is it possible to apply the styles from those <th> class to all its corresponding <td>'s with plain css and dont need of any script?
Additionally table is dynamic and so columns index may differ. So i cant use nth-child and only way i can navigate it with class.
Here is the Fiddle
Any better ideas for cross-browser?
Update:
table may have n number of columns and not limited to 2 columns
You could handle this using <col>, http://www.quirksmode.org/css/columns.html#background, only other way I see would need to add the classes everywhere or to use JS.
Try this
<table>
<tr>
<th class="a">`Column A`</th>
`<th class="b">`Column B`</th>
</tr>
<tr>
<td class="a">`aaa`</td>
<td class="b">`bbb`</td>
</tr>
<tr>
<td class="a">`ccc`</td>
<td class="b">`ddd`</td>
</tr>
</table>
Related
When creating a HTML table in an Email, how can add space above one row, but not above all of them?
Example: I have a table that is two columns wide. Part way down the table I am inserting a 'sub header' of sorts by having one cell merge the two columns. Above this row, I want to have more space, but I don't want to apply this above all rows, like css would commonly do.
Any suggestions?
Your code should be inline anyway, because many email clients do not read embedded styles (the code within <style>...</style>).
I.e., as #David said in comments,
<table>
<tr>
<td>...
</td>
<td>...
</td>
</tr>
<tr>
<td style="padding-top:30px">Sub-header
</td>
</tr>
</table>
You can't use margin as Outlook desktops don't allow it.
An alternative that might suit you is a faux-table row, with a non-breaking space set at a specific height (both parameters there are necessary for cross-email-compatibility):
<tr>
<td style="font-size:30px;line-height:30px;">
</td>
</tr>
I'm trying to style a ng-table layout, which contains a table in each row. The way this expanding functionality is implemented in angular, looks like this:
<tr ng-if="org.expanded" ng-repeat-end>
<td></td>
<td></td>
</tr>
The issue is more related to CSS.
The problem is that, when clicking on the plus icon next to the ServiceType column the 4 expanded columns aren't aligned with the parent tablecolumn headers i.e. Service Type, Location , Contact details and Last Updated.
How can I set it, that the values look nicely aligned(left)?
Also, I can't align the Last Updated column to the left.
Here is a plunkr sample of the problem:
http://embed.plnkr.co/UlMg7J/preview
http://plnkr.co/edit/UlMg7J?p=preview
For the last column not aligned issue I have replaced the table for phone,website..etc with divs and it started to align to the position you desired. What it was doing was it was creating extra headers (th) tags which is not desired.
Your Code:
<td data-title="'Contact Details'">
<table>
<tr>
<td>Phone:</td>
</tr>
<tr>
<td>Fax:</td>
</tr>
<tr>
<td>Email:</td>
</tr>
<tr>
<td>Website:</td>
</tr>
</table>
</td>
Changed Code:
<td data-title="'Contact Details'">
<div>Phone:</div>
<div>Fax:</div>
<div>Email:</div>
<div>Website:</div>
</td>
I am having an issue stylizing a class in the first table while keeping the rest of the tables the same. Let me show an example
<table>
<tbody>
<tr class="a"></tr>
</tbody>
</table>
<table>
<tbody>
<tr class="a"></tr>
</tbody>
</table>
<table>
<tbody>
<tr class="a"></tr>
</tbody>
</table>
So I want the class a of the first table to be different than the rest of the tables. How do I go about doing that?
Thank you for your time.
Edit:
I forgot to mention. I cannot add separate classes on each table. I can only give them all the same class. It is generated that way.
In newer browser you can use CSS3's nth-child():
table:nth-child(1) tr.a{
background-color:#ff0000;
}
This works if this is the 1st child of the parent element (e.g. say that these 3 tables are the children of the body.
You can be also more specific that this is the nth table element using the :nth-of-type() selector.
I'm trying to customize my bootstrap table. If the table height is larger than a certain height I want the <tbody> to scroll without scrolling the rest of the table. I have tried pretty much everything I can think of but the table wont even change sizes.
Does anyone know what classes I need to modify to fix this? Here's the elements I use in my table:
<div class="table-responsive">
<table class="table table-condensed">
<colgroup>
<col class="col-xs-1"/>
<col class="col-xs-1"/>
</colgroup>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
And here's a jsFiddle.
I ran into a similar problem with Bootstrap 2.3.2. I had to modify my table some, but a pretty good website I found with a complete css solution is here:
http://www.cssbakery.com/2010/12/css-scrolling-tables-with-fixed.html
I basically took the scrollableArea and scrollableContainer css parts on this site, changed a couple class names to match with what I already had, and used this instead of bootstrap. Maybe this can help, maybe not, but definitely a good alternative.
I'd like to have a normal table to look like RadGrids, is there an easy way I can use the RadGrid styles (keeping theming in mind)?
Using a tool like Firebug, you can inspect the table generated by RadGrid.
The example shown on this page gives the following results:
<table class="rgMasterTable rgClipCells">
<thead>
<th class="rgHeader" scope="col">header</th>
</thead>
<tbody>
<td class="rgRow">cell</td>
</tbody>
</table>
Adding the classes stated here to your own table should copy the style from the rad grid.
I have been playing with this, and it seems you need to wrap the table in div(s) with certain styles - maybe due to themes? Maybe I'm still missing something, but this is the only way I could get it to work.
<div class="RadGrid RadGrid_Sunset">
<table class="rgMasterTable rgClipCells">
<thead>
<th class="rgHeader" scope="col">header</th>
</thead>
<tbody>
<td class="rgRow">cell</td>
</tbody>
</table>
</div>