How to apply CSS to td of one particular table; excluding all other tables in web page?
<table class="pure-table fullWidth" id="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 fullWidth" id="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:23px;font-weight:bold}
i want to apply it on td's of table having ID ''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 ID ''NotToBeApplied''
How to modify HTML and CSS to achieve above?
Use CSS selectors like,
#ToBeApplied td {padding:23px;font-weight:bold}
This should work (Assuming that you dont want to specify id for table)
table.pure-table:first-child td {padding:23px;font-weight:bold}
DEMO
This is what you want.
Check out this fiddle.
#ToBeApplied td {
padding:23px;
font-weight:bold
}
Here is the snippet.
#ToBeApplied td {
padding: 23px;
font-weight: bold
}
<table class="pure-table fullWidth" id="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 fullWidth" id="NotToBeApplied">
<tbody>
<tr class="pure-table-odd">
<td>
<label>Bank</label>
</td>
<td>
<label>Japha Bank</label>
</td>
</tr>
</tbody>
</table>
Just add style below:
<style type="text/css">
#ToBeApplied tr td{padding:23px;font-weight:bold}
</style>
One can limit the CSS application using the parent ahead of the style..
I hope this will help you achieve what you need!
Related
I have a problem using Bootstrap tables in Angular:
My <td> tags does not fit the corresponding <th> from my tableheader: I am not sure, if it is caused due my calls to the template presenting the <td>:
Here is my code:
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Students</th>
<th>Links</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let c of tests">
<app-preview-container id={{c.id}} name={{c.name}} description={{c.description}} studentCount={{Count[c.id]}}"></app-preview-container>
</tr>
</tbody>
</table>
And thats the component which gets called (<app-preview-container>):
<td>
{{name}}
</td>
<td>
{{description}}
</td>
<td>
{{count}}
</td>
<td>
some buttons
</td>
Does anyone has a tip how I can fix that? I have tried a lot using Bootstrap width-params like w-xx or col-md-x or col-x or using scope="col"/"row". But none of these fixed it.
Tables often look that way when you change <tr> / <td> display property. HTML tables have their own unique display properties display: table-row; and display: table-cell;.
You either have done that or wrapped your <td>s with additional div.
You can inspect your table in the console, and check if <td>s are direct children of <tr> and then set by hand <tr> and <td> display property to table-row and table-cell.
An example of a broken table:
td {
border: 1px solid gray;
}
*[style] {
outline: 2px dashed red;
}
<table>
<tr>
<td>
Column 1
</td>
<td>
Column 2
</td>
<td>
Column 3
</td>
</tr>
<tr>
<tr style="display: block;">
<td>
Broken
</td>
<td>
Row
</td>
<td>
!
</td>
</tr>
<tr>
<td style="display: inline-block;">
Broken td
</td>
<td>
!
</td>
<td>
!
</td>
</tr>
<tr>
<td>
Correct
</td>
<td>
row
</td>
<td>
!
</td>
</tr>
</table>
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 6 years ago.
I want the whole row to change background-color on hover. The HTML is really old and I must leave it as it is. So I need this done purely in CSS. No JavaScript nor JQuery. Once I hover on .GMDataRow td I also need to trigger (change background) on the same element in another td. The order of elements is same in both td's.
Here's the smaller skeleton of code so you understand what im talking about:
<table>
<tr>
<td>code here</td>
<td>code here</td>
</tr>
</table>
Those two tds have identical children elements and the most important, they have same <tr class="GMDataRow">. So I was thinking maybe it can be done with :nth-child(). I need your suggestions
JSFiddle:
And here's the real skeleton:
<table class="GMMainTable" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div class="GMBodyLeft">
<table>
<tr class="GMDataRow" >
<td>
xxx
</td>
</tr>
<tr class="GMDataRow">
<td>
xxx
</td>
</tr>
</table>
</div>
</td>
<td>
<div class="GMBodyMid">
<table>
<tr class="GMDataRow">
<td>
yyy
</td>
<td>
yyy
</td>
</tr>
<tr class="GMDataRow">
<td>
yyy
</td>
<td>
yyy
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
try this :
.hoverTable{
width:100%;
border-collapse:collapse;
}
.hoverTable td{
padding:7px; border:#4e95f4 1px solid;
}
.hoverTable tr{
background: #b8d1f3;
}
.hoverTable tr:hover {
background-color: #ffff99;
}
<table class="hoverTable">
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
<tr>
<td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
</tr>
</table>
I am trying to style a specific element inside a datepicker using CSS. Although I thought that it must be super simple using the nth selectors I can't seem to figure out how it is possible.
I have CSS and HTML code like this:
.ui-datepicker tr td:not(.ui-state-disabled) + td:nth-of-type(1)
{
background-color: red;
}
<table class="ui-datepicker">
<tr>
<td class="ui-state-disabled">
...
</td>
<td class="ui-state-disabled">
...
</td>
<td>
This is the td element I like to select
</td>
<td>
...
</td>
</tr>
</table>
<table class="ui-datepicker">
<tr>
<td class="ui-state-disabled">
...
</td>
<td class="ui-state-disabled">
...
</td>
<td class="ui-state-disabled">
...
</td>
<td class="ui-state-disabled">
...
</td>
<td>
This is the td element I like to select
</td>
<td>
...
</td>
<td>
...
</td>
</tr>
</table>
I would like to select the first td element after the last ui-state-disabled element. The problem is that the position of that td element as well as the number of td elements is not always the same. You can see what I tried in the CSS code of the snippet however it is not working. What I am looking for is a "first occurrence" selector. Is there any way to accomplish this using only CSS?
td.ui-state-disabled + td:not(.ui-state-disabled) {
color: red;
}
<table class="ui-datepicker">
<tr>
<td class="ui-state-disabled">
...
</td>
<td class="ui-state-disabled">
...
</td>
<td>
...
</td>
<td>
...
</td>
</tr>
</table>
<table class="ui-datepicker">
<tr>
<td class="ui-state-disabled">
...
</td>
<td class="ui-state-disabled">
...
</td>
<td class="ui-state-disabled">
...
</td>
<td class="ui-state-disabled">
...
</td>
<td>
...
</td>
<td>
...
</td>
<td>
...
</td>
</tr>
</table>
I have a very peculiar use case which requires me to use two ng-repeats.
One array is of dates and another contains some date in form of associated array with argument as those dates.
<tbody>
<tr ng-repeat="date in dates">
<!-- <tr ng-repeat="datum in data[date]"> -->
<td> {{date}} </td>
<td> {{datum.carName}} {{datum.regNumber}}</td>
<td> {{datum.driverName}} </td>
<td> {{datum.startTime}} </td>
<td> {{datum.endTime}} </td>
<td> {{datum.trip.sourceName}}</td>
<td> {{datum.trip.destinationName}} </td>
<!-- </tr> -->
</tr>
</tbody>
Now HTML doesn't allow me to use any another tags inside tbody apart from tr and td. Also I know that we cannot have two ng-repeats inside a tag so what could be the workaround for this ? Can I insert any other tag ?
You can repeat <tbody> and then repeat <tr> within each <tbody>
<tbody ng-repeat="date in dates">
<tr ng-repeat="datum in data[date]">
There are no limits on having more than one <tbody>
Another way
<table>
<tbody>
<tr ng-if="0" ng-repeat-start="date in dates"></tr>
<tr ng-repeat="datum in data[date]">
<td> {{date}} </td>
<td> {{datum.carName}} {{datum.regNumber}}</td>
<td> {{datum.driverName}} </td>
<td> {{datum.startTime}} </td>
<td> {{datum.endTime}} </td>
<td> {{datum.trip.sourceName}}</td>
<td> {{datum.trip.destinationName}} </td>
</tr>
<tr ng-if="0" ng-repeat-end></tr>
</tbody>
</table>
This uses a combination of ng-if and ng-repeat-start / ng-repeat-end. Here ng-if="0" ensures that the element won't be rendered.
You can always other tags inside the td.
<tbody>
<tr>
<tr>
<div>here</div>
<p>there</p>
</tr>
</tr>
</tbody>
So I am creating tables on a page dynamically, and the rows in each table are also dynamic. I want to display them all in one line and make them scroll horizontally if there is an overflow instead of wrapping. I set inline and overflow scroll:
.tableDiv {width:100%; overflow:scroll; display:inline}
but they are still wrapping. Any help on this would be greatly appreciated!
Here is the jsfiddle: http://jsfiddle.net/xAxfr/
http://jsfiddle.net/xAxfr/2/
.tableDiv {
width:100%;
overflow:auto;
white-space:nowrap;
}
.table {
border-collapse:collapse;
border-spacing:0;
display:inline-block;
}
white-space:nowrap; and display:inline-block;
Remove float: left on .table and add white-space: nowrap on .tableDiv.
http://jsfiddle.net/xAxfr/1/
I think that you could use "The Table Method" as described here. If you next the tables in another table instead of a div, you can make the row as wide as you want creating the same effect.
ex.
<table class="tableContainer">
<tr>
<td>
<table class="table">
<tr>
<th colspan="2">
Table One
</th>
</tr>
<tr>
<td>
two
</td>
<td>
three
</td>
</tr>
<tr>
<td>
four
</td>
<td>
five
</td>
</tr>
</table></td>
<td>
<table class="table">
<tr>
<th colspan="2">
Table Two
</th>
</tr>
<tr>
<td>
two
</td>
<td>
three
</td>
</tr>
<tr>
<td>
four
</td>
<td>
five
</td>
</tr>
</table></td>