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;
}
Related
I want to add class "responsive-table" to every table element in on my page. What should I do?
If you really want to take the time to do it, simply add class="responsive-table" between the carrots, like this for example:
<tr class="responsive-table">
But if you're already adding the same class to every part of your table with using only CSS, why don't you just put the CSS you want for 'responsive-table' in the table section?
i.e. instead of .responsive-table {/* your css here */}
you just do table {/* your css here */}?
To solve this problem using CSS only, go ahead as follows:
Find the CSS block that declares rules for .responsive-table which should start like this:
.responsive-table { /* rules here */ }
Then add the element selector for table elements to make sure all tables are matched:
.responsive-table, table { /* rules here */ }
You have to add them manually; there's no way to do that with just HTML and CSS, unfortunately. (Then again, if you could, they'd become just another Javascript...)
If you want all table become ".responsive-table" then why not applying all '.responsive-table' CSS code under table selector like following?
table { /* .responsive-table css here */ }
You cannot add classes dynamically to every table element on your webpage by using html and css only. if you want to add class to every table on your webpage, you have to do that manually. or if you want to add same css to all tables on your webpage, try using 'table' element selector css as follows:
table { /* add your css here */ }
Use jquery
<script>
$("table").addClass("responsive-table");
</script>
if you don't know how to use jquery
then just add this line in your head section
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
and then put the code above on your page that where you want to add class.
I want to change the padding of 2/6 pages in my website, but the content divs of the website are using the same CSS, the only solution I can think of is changing the id's of all the content divs and make separate CSS for all of them. Is there an easier way to do this?
You could create a new class and apply it to only the places you want changed.
.pad-class{
padding:5px;
}
<div class="other-class pad-class"></div>
Placing the class last will allow for your new class to overwrite the first one.
You should just apply a specific class to the <body> tag of the pages you want to modify. Then you can write a CSS rule for that class.
HTML (normal page)
<body>
...
</body>
HTML (different padding page)
<body class="different-padding">
...
</body>
CSS
<style>
body { padding: 10px; }
body.different-padding { padding: 20px; }
</style>
<div class="first second"></div>
Insert second where you want to change padding else keep only single class
further reference: Using two CSS classes on one element
you can also use inline styling if no. of divs are less
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.
Here, I am facing another problem with CSS.
My HTML string is coming from database and adding to DOM with HTML Object.
new HTML(result.getResponseObject().getStringResult());
That string contains some HTML tables and have border="1", that has been overridden by default CSS (you can see that in Firebug), where as the border applied in HTML like border="1"
How to tell that the applied styles are in HTML, not from any CSS file (or did I miss something in my code)?
I tried with 1px solid !important; it's still not working.
If I understand your question correctly you could do something like this:
table[border] {
border: 1px solid black;
}
This will select any table that has a html border property eg:
<table border="1">
but will ignore those that don't
Here's a demo
Why are you using the border attributed to begin with? In HTML5, it's meant only to indicate that <table> is being used to draw an actual table, rather than just for layout. If you want to specify a table border, you should use something like 3rror404's solution (although I would explicitly use table[border="1"] as the selector to avoid problems if you also have tables with border="0" anywhere in the document.
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;
}