Say for example I have:
<div id="container">
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
And
td { width:10px; height:10px; }
What I want to do is apply a style to the first td, of the first table.
I would have expected:
#container table:first-child td:first-child {
background: red;
}
However it does not work? Please advise!
#container table:first-child tr:first-child td:first-child { background: red; }
Seems to work.
Note that under IE, you will need to have a !DOCTYPE declaration in your html to get support for :first-child. http://www.w3schools.com/cssref/sel_firstchild.asp
To select only the first table within the div:
div#container table:nth-child(1) tr td {
color: #888;
}
To select only the first td of the first table within the div:
div#container table:nth-child(1) tr td:nth-child(1) {
color: #444;
}
For me this works easier if you want to change it to a second table or second tablecell
div#container table:nth-child(2) tr:nth-child(4) td:nth-child(1) {
color: #888;
}
Related
How do we target the first matching descendant, but not all other descendants further down the tree? e.g.,
if the HTML looks like
<div class="wrapper">
<table>
<tbody>
<tr>
<!-- i want to target this td -->
<td>
<table>
<tbody>
<tr>
<!-- but not this one -->
<td>...</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
I've attempted the below, but it doesn't seem to work
.wrapper > table > tbody > tr > td {
...
}
Inherited properties, such as color, would effect the children of the td even if they are not matched by the rule. In this case, 2nd td is a child of the 1st td.
You can reset inherited properties by initial on the children of the matched element. You can also set other properties on any effect children.
Example with color:
.wrapper > table > tbody > tr > td {
color: red;
}
.wrapper > table > tbody > tr > td > * {
color: initial;
}
<div class="wrapper">
<table>
<tbody>
<tr>
<!-- i want to target this td -->
<td>
i want to target this td
<table>
<tbody>
<tr>
<!-- but not this one -->
<td>but not this one</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
Your css will only target direct td descendants of any direct tr descendants of any direct tbody descendants of any direct table descendants of any .wrapper classed elements.
However, keep in mind that descendants of those tds selected may inherit styles from a parent or at least appear to inherit them.
Below is an example to show that you can style them differently.
.wrapper > table > tbody > tr > td {
background: red;
padding: 4px;
color: white;
}
td {
background: blue;
padding: 10px;
color: yellow;
font-weight: 800;
}
#later-descendant {
background: white;
color: indigo;
padding: 3px;
font-weight: 300;
}
<div class="wrapper">
<table>
<tbody>
<tr>
<!-- i want to target this td -->
<td>
<table>
<tbody>
<tr>
<!-- but not this one -->
<td>yellow</td>
<td id='later-descendant'>indigo</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
So I am trying to add an incrementing number to the first cell of a HTML table. Which I have done using examples found in this forum. What I want to do next is hide any row that only contains the number in the first cell. The only real option I have available is css but I am unsure if it is possible. The code I have so far is
table {
border-collapse: collapse;
counter-reset: rowNumber;
}
table tr:not(:first-child) {
counter-increment: rowNumber;
}
table td > *:empty {
display: none;
}
tr > td:empty {
background-color: yellow;
}
table tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
<table border="1px" empty-cells:hide;>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>Test</td>
</tr>
<tr>
<td></td>
<td>Test</td>
</tr>
<tr>
<td></td>
<td>Test</td>
</tr>
</table>
please check below snippet meets your requirement.
http://bootsnipp.com/user/snippets/D2ZDA
Here I'm hiding all sibling TR elements if the first TR is empty.
Using CSS, you can not control parent as there are no parent selectors.
Here is the code -
table {
border-collapse: collapse;
}
table tr:not(:first-child) {
counter-increment: rowNumber;
}
tr > td:first-child:empty,
tr > td:first-child:empty ~ td {
display: none;
}
table tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
<table border="1px" empty-cells:hide;>
<tr>
<td>Has Text</td>
<td>Test</td>
</tr>
<tr>
<td></td>
<td>Test</td>
</tr>
<tr>
<td>Has Text</td>
<td>Test</td>
</tr>
<tr>
<td></td>
<td>Test</td>
</tr>
</table>
Building on #CharanKumar answer, what you could do is remove the first column, and apply the numbering to the row with text. You could then add some padding and a border-right to simulate a separate cell.
It would look like below:
table {
border-collapse: collapse;
}
table tr:not(:first-child) {
counter-increment: rowNumber;
}
tr > td:first-child:empty,
tr > td:first-child:empty ~ td {
display: none;
}
table tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
border-right: 1px solid black;
padding: 1px 5px 1px 1px;
}
<table border="1px" empty-cells:hide;>
<tr>
<td></td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
</table>
How to remove all (especially outer ones) borders from bootstrap table? Here is a table without inner borders:
HTML
<style>
.table th, .table td {
border-top: none !important;
border-left: none !important;
}
</style>
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-10">
<br/>
<table data-toggle="table" data-striped="true">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-1"></div>
</row>
http://jsfiddle.net/sba7wkvb/1/
Which CSS styles need to be overriden to remove all borders?
In this case you need to set the border below the table and the borders around - table header, table data, table container all to 0px in-order to totally get rid of all borders.
.table {
border-bottom:0px !important;
}
.table th, .table td {
border: 1px !important;
}
.fixed-table-container {
border:0px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-10">
<br/>
<table data-toggle="table" data-striped="true">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-1"></div>
If you are using bootstrap this will help you:
<table class="table table-borderless">
you can set classes option to table table-no-bordered, example: http://issues.wenzhixin.net.cn/bootstrap-table/#options/no-bordered.html.
Edit: this feature is only supported in develop version(after v1.7.0): https://github.com/wenzhixin/bootstrap-table/tree/master/src.
Try this:
.table th, .table td {
border-top: none !important;
border-left: none !important;
}
.fixed-table-container {
border:0px;
}
.table th {
border-bottom: none !important;
}
.table:last-child{
border:none !important;
}
Demo JSFiddle
Using Bootstrap
In html
<table class="table no-border">
In css
.table.no-border tr td, .table.no-border tr th {
border-width: 0;
}
Source: https://codepen.io/netsi1964/pen/ogVQqG
Change the border size in the CSS for the .fixed-table-container
CSS:
.table th, .table td {
border-top: none !important;
border-left: none !important;
}
.fixed-table-container {
border:0px;
}
http://jsfiddle.net/sba7wkvb/3/
html
<table class="table noborder">
css
.noborder td, .noborder th {
border: none !important;
}
for remove outer border you should remove border from .fixed-table-container as follow :
.fixed-table-container{border: 0px;}
You need set border: none !important; to .fixed-table-container and .table. Also set border-bottom: none !important; to your first rule, .table th, .table td.
Updated Fiddle: http://jsfiddle.net/sba7wkvb/5/
It's simple, Kindly add the below code in your CSS sheet.It will remove all the borders in the table
.table th, .table td, .table {
border-top: none !important;
border-left: none !important;
border-bottom: none !important;
}
.fixed-table-container {
border:0px;
border-bottom: none !important;
}
Hope helped.
If you are using CSS3 this will help you:
.table tbody tr td, .table tbody tr th {
border: none;
}
I am trying to set the first column of the outer table (tbStudentPreference) with special styles...
But the problem is that it applies not only to the outer table column but also to the table inside the outer table.
I want to apply my style only to the outer container table. Please help.
<style>
#tbStudentPreference td:first-child {
font-weight: bold;
vertical-align: top;
width: 100px;
}
#tbStudentPreference {
vertical-align: top;
padding: 3px;
}
</style>
<table id='tbStudentPreference'>
<tr>
<td>xxxxx
</td>
<td>.....
</td>
</tr>
<tr>
<td>xxxxx
</td>
<td>.....
</td>
</tr>
<tr>
<td colspan='2'>
<table>
<tr>
<td>Inside Table
</td>
<td>.....
</td>
</tr>
<tr>
<td>Inside Table
</td>
<td>.....
</td>
</tr>
</table>
</td>
</tr>
</table>
I am trying to set the first column of the outer table..
You need to negate the inner table.
Also, the browser automatically adds a tbody for you, so it is not enough to use a child combinator on tr directly. You need to override that with a child-combinator on tbody. You then negate the inner table by using the presence of colspan attribute.
So, you select td which is a first-child among those which are not having a colspan attribute, direct descendant of tr which itself is a direct descendant of tbody which itself is direct descendant of your table. Like this:
#tbStudentPreference > tbody > tr > td:not([colspan]):first-child {...
The negation pseudo-class: https://developer.mozilla.org/en-US/docs/Web/CSS/:not
Snippet:
#tbStudentPreference { border: 1px solid gray; border-collapse: collapse; }
#tbStudentPreference td { border: 1px solid gray; }
#tbStudentPreference > tr > td:not([colspan]):first-child {
font-weight: bold; color: red;
}
#tbStudentPreference > tbody > tr > td:not([colspan]):first-child {
font-weight: bold; color: red;
}
<table id='tbStudentPreference'>
<tr><td>xxxxx</td><td>.....</td></tr>
<tr><td>xxxxx</td><td>.....</td></tr>
<tr><td colspan='2'>
<table>
<tr><td>Inside Table</td><td>.....</td></tr>
<tr><td>Inside Table</td><td>.....</td></tr>
</table>
</td></tr>
</table>
Here I want to add background color to the column Sunday without adding css class to it. Can we achieve it without adding a css class and inline style? Here's a sample Fiddle
/------------------HTML----------------/
<table>
<tr>
<td>Sun</td>
<td>Mon</td>
<td>Tue</td>
<td>Wed</td>
<td>Thurs</td>
<td>Fri</td>
<td>Sat</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
</table>
/------------------CSS----------------/
table{
border:1px solid #ccc;
border-collapse:collapse;
padding:5px;
}
table td{
background:#f6f6f6;
padding:3px;
border:1px solid #ccc;
}
Yes you can:
td:first-of-type will select first td i.e. first cell of all rows.
table tr td:first-of-type{//your code}
Updated fiddle here.
http://jsfiddle.net/uQRA9/2/
Yes you can.
For example :
table td:first-child {
background: red;
}
table td:nth-child(4) {
background: blue;
}
Yes using :first-child pseudo class.
table tr:first-child > td:first-child{
background-color :red;
}
The above one is for older browsers. You can also use first-of-type as shown by Hiral.
Working Fiddle
use like this
tr>td:nth-child(1){
background-color:red;
}
you can style sun column and all under it with this
table td:first-child{
background-color :red;
}
demo
You can manage by css, :nth-child(0) property provides selector specified index (0,....., n)
table td:nth-child(0){
background:#f6f6f6;
padding:3px;
border:1px solid #ccc;
}
AND
table tr:nth-child(0){
background:#f6f6f6;
}
table tr:first-child td:first-child {
background:...;
...
}