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>
I have the following code:
<div class="main-l">
<table class="tbl">
..
</table>
</div>
I am using the following CSS to exclude tables with "main-l tbl" classes:
table:not(.main-l .views-table) {
..
}
What I noticed is the not: selector excludes all the tables with classes .views-table regardless of using '.main-l .views-table'.
How would I guarantee that only those with threaded classes such as '.main-l .views-table' are excluded, but not those with only .views-table class?
Since .tbl is a child of .main-l it doesn't work this way. The :not() selector only works for the element itself, not for parent elements.
You would have to do this:
div:not(.main-l) .tbl {
...
}
Note that using div in css should be avoided, better set a class like .tbl-container or similar.
Since .main-1 is parent element you will have to use not() on that element to exclude table that is insede it.
table {
width: 50px;
height: 50px;
border: 1px solid black;
}
*:not(.main-l) > table {
background: red;
}
<div class="main-l">
<table class="views-table"></table>
</div>
<table class="views-table"></table>
You are already referring to the table but your selector is trying to refer to a class of the outer div by using main-l.
You can use one of the following to achieve what you are after:
table:not(.views-table) {
background: teal;
}
or if you want to be more specific
div.main-l table:not(.views-table) {
background: teal;
}
.main-l table {
height: 100px;
width: 100px;
border: 1px solid black;
}
table:not(.views-table) {
background: teal;
}
div.main-l table:not(.views-table) {
background: teal;
}
<div class="main-l">
<table class="tbl">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="main-l">
<table class="views-table">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="main-l">
<table class="tbl">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
Want to show table contents(text / hyperlink/ div contents) horizontal in safari browser but dont know how to fix it as in google chrome table contents are absolutely showing fine as horizontal
enter code here
<div class="itemFields">
<table>
<tbody><tr>
<td class="label" dir="ltr">Call Number</td>
<td><div>PS169.F7 H3 1961</div></td>
</tr><tr>
<td class="label" dir="ltr">Publisher</td>
<td><div><span dir="ltr">F. Ungar Pub. Co.</span></div></td>
</tr><tr>
<td class="label" dir="ltr">Year</td>
<td><div><span dir="ltr">1961</span></div></td>
</tr>
</tbody></table>
</div>
div.itemFields {
margin: 0;
margin-right: 15em;
}
.itemFields table tr td {
vertical-align: top;
}
.itemFields table tr td {
padding: 0;
}
.itemFields table tr td.label {
padding-right: 1em;
font-weight: bold;
white-space: nowrap;
}
.itemFields table tr td div {
display: table;
table-layout: fixed;
width: 100%;
border-collapse: collapse;
word-wrap: break-word;
}
.itemFields table tr td div a,
.itemFields table tr td div span {
display: inline;
}
this itemFields class content is showing contents of it vertical in safari browser
Try This Code ! You have to need reset code also better if you use bootstrap............. This code just simple HTML5 Table format & Style. You can change table width 960px & more..........
<div class="itemFields">
<table width="960px" align="center" border="1">
<tbody>
<tr>
<td class="label" dir="ltr">Call Number</td>
<td>
<div>PS169.F7 H3 1961</div>
</td>
</tr>
<tr>
<td class="label" dir="ltr">Publisher</td>
<td>
<div><span dir="ltr">F. Ungar Pub. Co.</span></div>
</td>
</tr>
<tr>
<td class="label" dir="ltr">Year</td>
<td>
<div><span dir="ltr">1961</span></div>
</td>
</tr>
</tbody>
</table>
</div>
I have a table within a table. I have set table background-color to white.
The inner table's background is to remain white while all other cells of the outer table are set to lightgrey.
However, the outer table's white background-color is showing up as a border around all its <td> cells which I cannot figure out how to get rid of - all grey cells should be borderless. I have tried setting the border property of all elements to none without success. Any help would be appreciated.
Here is a jsfiddle
<style>
body{
background-color: lightcyan;
}
.gems {
margin:0 8px;
padding:0;
}
.gems table{
width:100%;
background-color:white;
}
.gems td {
padding:0px 1px;
margin:0;
}
.gems tr.filelist {
margin:5px;
background-color: lightgrey;
}
.gems tr.tools {
background-color: lightgrey;
}
div.textarea {
background-color: white;
}
</style>
<body>
<div class="gems">
<table>
<tr class="filelist">
<td>filelist</td>
<td>filelist</td>
</tr>
<tr class="tools">
<td>tools</td>
<td>
<div class="textarea">
This is a table
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
<table cellspacing="0">
Add this property in your table tag.
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;
}