<table class="table table-bordered table-hover table-condensed data_table">
<tbody data-bind="foreach: outboundFaxLogs">
<tr>
</tr>
<tr>
<td></td>
<td colspan="8">
<table>
<tr style="border:none">
<td>ReFax Status</td>
<td>FaxTo</td>
<td>Completion</td>
<td>FaxID</td>
</tr>
<tbody data-bind="foreach: ResubmissionHistory"">
<tr style="border:none">
<td data-bind="text: Status" ></td>
<td data-bind="text: FaxToNbr"></td>
<td data-bind="text: $root.formatDateTime(CompletionTime)"></td>
<td data-bind="text: OutboundFaxLogId"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
The parent table has a css class applied to it which is table-bordered. Its a twitter bootstrap style element. I don't want that style to be applied to the child table. How can I do this ? I do not want the lines that appear in between the table cells for the child table.
You can set this in your CSS
.table-bordered table, .table-bordered table th, .table-bordered table td {
border:0 none;
}
That makes your table inside the table with class .table-bordered no border.
If you open your bootstrap.css you can see that the tr and td borders are defined through
.table-bordered th,
.table-bordered td {
border: 1px solid #ddd !important;
}
so if you want to change it through inline you should use
<tr style="border:none!important;">
hope this helps
You should try to cancel style in your stylesheet :
.table-bordered table th,
.table-bordered table td {
border: 0 none !important;
}
Related
This question already has answers here:
How do I apply a style to all children of an element
(2 answers)
Closed 27 days ago.
Lets say I have 2 tables. The 2nd one got an id "mytab".
<table>
<tr>
<td>abc</td>
</tr>
</table>
<table id="mytab">
<tr>
<td>xyz</td>
</tr>
</table>
Now I want a CSS for just the 2nd one but for all child-elements too (table has children th, tr, td). What would the CSS-selector look like??
I tired these 2 selectors, but none did the trick.
This would address all tables - not just the 2nd one.
table, th, tr, td
{
border: 1px solid black;
border-collapse: collapse;
}
This would address the correct table but not the children beause they do not have the id set.
table#mytab, th#mytab, tr#mytab, td#mytab
{
border: 1px solid black;
border-collapse: collapse;
}
you need to target the parent then use * to select all childs, so like parent *
table#mytab , table#mytab *
{
border: 1px solid black;
border-collapse: collapse;
}
<table>
<tr>
<td>abc</td>
</tr>
</table>
<table id="mytab">
<tr>
<td>xyz</td>
</tr>
<tr>
<td>asd</td>
</tr>
<tr>
<td>zxc</td>
</tr>
</table>
I'm trying to do something very simple: create a table with single line borders.
There are many articles saying how to do that, and almost all of them include something like
table {
border-collapse: collapse;
}
td, th {
border: 1px solid orange;
}
Which works great.
But they all apply the styling universally to the td and th tags themselves, and therefore apply to all tables.
So I tried this
.bordered {
border-collapse: collapse;
border: 1px solid orange;
text-align: center;
color: blue;
}
<table class=bordered>
<tr> <td> ABC </td> <td> DEF </td> </tr>
<tr> <td> HIJ </td> <td> JLK </td> </tr>
</table>
I get a table with orange outer border, blue letters, and no internal borders.
I also tried
table.bordered, tr.bordered, td.bordered {
to no avail. Also putting "class=" on the tr tags didn't help.
I have learned that border properties are not inherited.
The DOM Inspector confirms that: just the color and centering are inherited by the td elements from the .bordered class.
My question is this:
How do I get borders on the cells without adding "class=" to every single td tag?
(A use case would if there are two tables on the page, and I want the borders styled differently for them).
Just take the css that works for all tables, and add table.bordered before all of them:
table.bordered {
border-collapse: collapse;
}
table.bordered td, table.bordered th {
border: 1px solid orange;
}
<table class="bordered">
<tr> <td> ABC </td> <td> DEF </td> </tr>
<tr> <td> HIJ </td> <td> JLK </td> </tr>
</table>
<table>
<tr> <td> ABC </td> <td> DEF </td> </tr>
<tr> <td> HIJ </td> <td> JLK </td> </tr>
</table>
I want to create a table with only partly separated borders. The borders above and below the thead should be without spaces in between. But others in it should be separated by a small space.
Unfortunately, the border-spacing style only applies to the whole table: https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing
For example, in the following I want to have space only between the border-top of h2.1 and h2.2. Is that possible?
HTML:
<table>
<thead>
<tr>
<th rowspan="2">h1</th>
<th colspan="2">h2</th>
</tr>
<tr>
<th>h2.1</th>
<th>h2.2</th>
</tr>
</thead>
<tbody>
<tr>
<td>b1</td>
<td>b2.1</td>
<td>b2.2</td>
</tr>
<tr>
<td>b1</td>
<td>b2.1</td>
<td>b2.2</td>
</tr>
</tbody>
</table>
CSS:
table {
border-collapse: separate;
}
th,
td {
vertical-align: top;
}
thead tr:first-child th {
border-top: 2px solid;
}
thead tr:not(:first-child) th {
border-top: 1px solid;
}
tbody tr:first-child td {
border-top: 1px solid;
}
tbody tr {
border-top: 1px solid;
}
Fiddle: https://jsfiddle.net/6ov4hadd/
Edit
Here is a more sensible example.
Fiddle: https://jsfiddle.net/Lnk929q4/
I want to look it like a "book table":
You can try using two different tables for head part and body part. Something like this
https://jsfiddle.net/6ov4hadd/1/
<table id = "table1">
<thead>
<tr>
<th rowspan="2">h1</th>
<th colspan="2">h2</th>
</tr>
<tr>
<th>h2.1</th>
<th>h2.2</th>
</tr>
</thead>
</table>
<table>
<tbody>
<tr>
<td>b1</td>
<td>b2.1</td>
<td>b2.2</td>
</tr>
<tr>
<td>b1</td>
<td>b2.1</td>
<td>b2.2</td>
</tr>
</tbody>
</table>
I try to remove white space between Table1Header and Table2Header. I tried border:0px, padding:0px and border-spacing:0px; styles. Firefox and Opera tell me that my border-spacing style is overrided by the user agent style (which is 2px). How can I force browser to use my styleshits?
http://jsfiddle.net/cdjDR/2/
<table class="tableGroup">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr class="tableHeader">
<td><span class="tableHeader"><label>Table1Header</label></span>
</td>
</tr>
<tr class=" tableData">
<td>
<div class="ui-datatable">
<div>
<table>
<thead>
<tr>
<th>
<div><span><span class="ui-header-text">Table1Col1</span></span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>2</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr class="tableHeader">
<td><span class="tableHeader"><label>Table2Header</label></span>
</td>
</tr>
<tr class="tableData">
<td>
<div class="ui-datatable">
<div>
<table>
<thead>
<tr>
<th>
<div><span><span class="ui-header-text" >Table2Col1</span></span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>12345</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
span.tableHeader > label {
display: inline-block;
float:left;
line-height:30px;
padding-left:10px;
color: #202020;
font-size: 13px;
}
tr.tableHeader {
background-color: #EEEEEE;
}
table.tableGroup, table.tableGroup > tr > td > table {
border-spacing: 0px;
}
table.tableGroup div.ui-datatable th > div > span >span.ui-header-text {
color: #808080;
font-size: 11px;
}
table.tableGroup td, table.tableGroup th {
padding: 0px;
border: 0px;
}
You can simply use border-collapse: collapse; or even border-spacing: 0; is fine
table { /* Will apply to all tables */
border-spacing: 0;
/* OR border-collapse: collapse; */
}
Demo
You can easily override the useragent stylesheet with a simple element selector.
If you want to normalize the styles, you should use CSS Reset
Coming to your selector which is seems dirty to me, as yo are targeting the table with class .tableGroup and the table nested under that
table.tableGroup, table.tableGroup > tr > td > table {
border-spacing: 0px;
}
So you better use
table.tableGroup,
table.tableGroup table {
border-spacing: 0;
}
you need to add (border="0" cellpadding="0" cellspacing="0") Table tributes in every table tag
example
<table border="0" cellpadding="0" cellspacing="0">
*example with your classes *
<table border="0" cellpadding="0" cellspacing="0" class="tableGroup">
Try this
table {
border-spacing:0px;
}
works by using css
The browsers are not telling you that your border-spacing style is overridden by the user agent style sheet. Instead, they may indicate that inheritance does not take place for it. This is simply caused by the fact that some style sheet sets the property on the element.
The reason why your rule is not applied to the inner table element is that it does not match any of your selectors. The selector
table.tableGroup > tr > td > table
does not match it, because a tr element is never a child of table even if might appear to be. By HTML syntax, there is an intervening tbody element, even if its start and end tag are missing. The following selector would match:
table.tableGroup > tbody > tr > td > table
Of course, a mere table selector would do the job as well, provided that you want all table elements to be styled by the rule.
For this Bootstrap styled table, I want the three columns (Sub1, Sub2, Sub3) widths to grow and align with their corresponding columns in the nested table.
http://jsfiddle.net/jamesholcomb/r55Zc/
Instead of using a nested <table>, simply use the rowspan attribute on the first column. Borders (and some padding) can be removed with some creative CSS (example):
CSS
th { text-align: center; }
tbody td {
border-width: 0 !important;
padding-top:0 !important;
}
tbody tr th ~ td {
border-top-width: 1px !important;
padding-top:8px !important;
}
tbody tr td:first-of-type {
border-left-width: 1px !important;
}
HTML
<div class="row">
<div class="span*">
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th colspan="3">Col1</th>
</tr>
<tr>
<th></th>
<th>Sub1</th>
<th>Sub2</th>
<th>Sub3</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="3">Row1</th>
<td>[-01234543333545]</td>
<td>[4567]</td>
<td>[1]</td>
</tr>
<tr>
<td>[1]</td>
<td>[456.789]</td>
<td>[2]</td>
</tr>
<tr>
<td>[0]</td>
<td>[1]</td>
<td>[0000789.0123]</td>
</tr>
</tbody>
</table>
</div>
</div>
If you want the entire row to highlight correctly, I suggest you tweak your table as others have suggested. However, instead of creating multiple trs and giving the td a rowspan of 3 (which causes row highlighting problems), just list the data in the td as an unordered list and make some adjustments to the css.
Table:
<div class="row">
<div class="span*">
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th colspan="3">Col1</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Sub1</td>
<td>Sub2</td>
<td>Sub3</td>
</tr>
<tr>
<td>Row1</td>
<td><ul><li>[-01234543333545]</li><li>[1]</li><li>[0]</li></ul></td>
<td><ul><li>[4567]</li><li>[456.789]</li><li>[1]</li></ul></td>
<td><ul><li>[1]</li><li>[2]</li><li>[0000789.0123]</li></ul></td>
</tr>
</tbody>
</table>
</div>
</div>
CSS:
td > ul {
list-style-type:none;
margin:0;
}
Here is the updated fiddle forked from #Mr.Alien's suggestions.