I have 2 tables on a single html page.
I would like to remove the border on just one of them.
The css I have currently is...
.table th, .table td {
border-top: none !important;
}
this is also linked with the table (I have bootstrap on it also, I think the table class is also linked with that?)
<table class="table">
<tbody>
<tr>
<th>1</th>
</tr>
<tr>
<td>1</td>
</tr> etc.....
So in the CSS I just want to make a rule that applies no border to only one of the 2 tables on my page. However I can't figure out how to to do it because the are using the same table class, and not sure if I need more than one rule? I've tried using parent selectors and ID selectors but could be calling them wrong. Thanks everyone!
You could just add a unique class or id to whichever table you do want to style and target that selector in your CSS. Like so:
HTML
<table class="table unique-name">
...whatever contents
</table>
CSS
.unique-name {
// some styles.
}
UPDATE
Here's a Fiddle to show you what I'm talking about.
Notice that the table with the class styled-table assigned to it has some formatting, while the table with the class unstyled-table has no formatting.
One way to do it would be to add another class to table you want to remove the border from.
Something like <table class="table noborder"> and then apply whatever css you want to the noborder class.
The proper way would be to have styles on the table, and then modify the table accordingly. This would be an example of how:
.table--bordered {
border: 1px solid #666;
}
<table class="table">
// No Borders
</table>
<table class="table table--bordered">
// With Borders
</table>
Bootstrap class for bordered table is table-bordered. If you don't use it, there'll be no border on table.
Related
I have 3 tabulator tables in a single HTML page. I want to add a custom class with a specific styling or add a custom styling. E.g.
overflow-x: hidden
to one table and not affecting others. How can I do that without changing any default styling of other tables on the same page?
The above examples are correct, you just need to apply the ID or class to the div holding the table instead so it would be:
HTML
<div id="table-1"></div>
JS
var table = new Tabulator("#table-1",{...});
CSS
#table-1{
///your styles here
}
Though i would be wary about changing properties like overflow on the table element, they will likely result in unexpected behaviour.
You can give that table an id and apply the style to the id. You can do something like:
style.css
#custom_table{
overflow-x: hidden;
}
index.html
<table id="custom_table"></table>
Hope this works for you.
just add unique class to table tag in which you want to apply style.
<table class="custom-table">
<table>
<table>
</table>
</table>
</table>
css
.custom-table {
overflow-x:hidden;
}
I'm working with AEM CMS and the user can build a table in a rich text editor. It works pretty well. Our implementation also uses bootstrap 3.1. Bootstrap sets td and th padding to 0. This takes precedence over the cellpadding set by the system based on the user's settings for the table compoonent. The generated HTML looks like this. The users' setting for cell padding was set to 4 in this example...
<div class="parbase table">
<table width="100%" cellspacing="0" cellpadding="4" border="1">
<tbody>
<tr><td>Hello 1</td>
<td>Hello2</td>
<td>Hello3 </td>
</tr>
<tr>
<td>lsdvn dfijkn jsdvoi m orijojnl JDFIUJ</td>
<td>adfbsk ik</td>
<td>lsdvn dfijkn jsdvoi m orijojnl JDFIUJ</td>
</tr>
</tbody>
</table>
</div>
Using Chrome Inspect Element I can see the Bootstrap rule is applied. When I uncheck this rule the table cellpadding takes effect, and the td's look good.
td, th {
padding: 0;
}
I've tried to remove the rule using initial and unset, but neither worked.
td, th {
padding: initial; /* and unset */
}
I'm hoping there's a css solution that doesn't involved changing the implementation of the component code generating the table html. Also, since we use a CDN for the bootstrap css/js, I don't want to customize the framework either.
Hopefully there's a CSS solution such that the bootstrap td and th padding rule can be unset/removed/deleted/etc.
You could try adding a more specific rule, which if I'm not mistaken will take priority over any less specific rule:
div.parbase td {
padding: 4px;
}
If this works, you can take out the cellpadding property of the table.
I suggest using jQuery cssText function:
$("td, th").css("cssText", "padding: 0 !important;");
This will override the rule after it.
I am working on existing project. I created a simple table.
<table border='0' width='100%'>
<tr>
<td></td><td></td>
</tr>
<tr>
<td></td><td></td>
</tr>
</table>
I did not apply any CSS class on table but still it is showing blue background color when I mouse over on tr. So there is already some CSS implemented on table somewhere. I want to disable this effect but I can't change existing CSS.
How can I stop this mouse over effect on this specific table. I tried some inline CSS but it did not work yet.
just use !important on your css which should override existing css
tr:hover {
background:red !important;
}
You can try to reassign css property using "!important;" keyword. Simply create the new css property with this keyword and bind it to necessary tag. I think this is a hack, but in any cases it very helps me.
If you want to make the hover changes only to this table tr , then its better to assign an ID or class to the table and then write the CSS.
.tableclass tr:hover{
background:none !important;
}
In the following example
http://jsfiddle.net/xBRPg/
I'm trying to create a yellow background for one of my table rows. The following line of code
<table class="table table-bordered table-striped">
Seems to supersede my own styling. If I remove the classes the row appears yellow as desired. Is there some way to maintain the classes yet override the setting so that my colour takes top priority?
The row is yellow. It is just that the cells inside it are #f9f9f9 so you can't see the row's background colour through them.
You need to change your selector to match the cells in the row, and not the row itself. You will also need to increase the specificity of the selector as the ones being used already are more specific then you have.
This occurs because of CSS specificity - table.table-striped tr is more specific than table tr. More specific rules override less specific ones. In my opinion you should avoid !important as long as possible, and instead focus on making your selectors more specific. So in your case, make that:
table.table-striped tr.zebraHover td {
background-color: #FFFACD;
}
Change this in your css
tr.zebraHover td {
background-color: #FFFACD !important;
}
And yes I know it is very dirty. If someone knows this better, comment on my answer. I'd rely like to know a better solution!
Change the class to an id.
CSS:
#zebraHover td{
background-color: #FFFACD;
}
HTML
<tr id="zebraHover">
<td>1</td>
<td>User1</td>
<td>user1#gmail.com</td>
<td><a class="btn btn-danger" href="#">Deactivate</a></td>
</tr>
http://jsfiddle.net/xBRPg/
The problem is caused by the rule that set alternating background colors for rows using selectors with high specificity. To suitably override them, use e.g.
tr.zebraHover,
.table-striped tbody tr:nth-child(2n+1).zebraHover td
{
background-color: #FFFACD;
}
I have an empty table row just for separation between rows.
<tr>
<td colspan="5"></td>
</tr>
It's rendered in IE, FF, Opera and Safari. The question is, whether I should put some content inside of it or it is okay to leave it as it is?
Like:
<tr>
<td colspan="5"> </td>
</tr>
Well you could put an as column content to make sure the rows are displayed. The better way is to use CSS for spacing though.
Semantically, does the empty row serve a purpose, or is it purely for layout? If the latter, it may be worth considering dropping the empty row, and providing the separation via CSS. E.g.
<tr class="separate-below">
<td>Data before separater</td><td>More Data</td>...
</tr>
<tr>
<td>Data after separater</td><td>More Data</td>...
</tr>
With the following in the stylesheet:
TR.separate-below TD,TR.separate-below TH {
border-bottom: 1em solid white; /* use the background colour of a cell here */
}
Alternatively, you can use multiple <tbody> elements to group blocks of rows together (adding rules="groups" to the table element causes <tbody> elements to gain a horizontal border at top and bottom, and <colgroup> element to gain a border to their left and right):
<table rules="groups">
<thead>
<tr><th>Header</th><th>Header</th>...</tr>
</thead>
<tbody>
<tr><td>Data</td><td>Data</td>...</tr>
<tr><td>Data</td><td>Data</td>...</tr>
...
</tbody>
<tbody>
<tr><td>Data</td><td>Data</td>...</tr>
...
</tbody>
...
</table>
As you can see in this example from W3Schools using the is the best way to do what you want.
This is a very old question, but if somebody still needs a solution (problem exists with display: table-cell or table-row elements)
here's the solution:
.emptyElement:after{
content: "\00a0";
}
I wanted to add my solution which is a modification of #Dariusz Sikorski solution.
td:empty:after, th:empty:after {
content: "\00a0";
}
if you want to put content inside, i would use a no-breaking-space: , rather than a normal blank
You may have already tried this but if your trying to add some space in between rows have you tried adding some padding.
CELLSPACING=Length (spacing between cells)
CELLPADDING=Length (spacing within cells)
Karl
To ensure that empty cells are displayed the following CSS can be used:
table { empty-cells:show; }
You can use multiple tbody tags to group table rows. It's totally valid and more semantic.