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.
Related
I am kind of new to CSS. I have css that applied to table->td and table->td->input separately like below in the local file but i am moving these two styles to global css files. So i want this style to be applied to all the table available in the project and also i don't want to create two separate classes and apply it instead i want to create one class, inside that class apply styles for both table=>td and table->td->input. Is there any way to combine these two into one.
What i have currently is,
table td {
...
}
table td input {
..
..
}
Expecting something like this.
CSS:
.someclassname {
table td
{
....
}
table td input
{
....
}
}
HTML:
<table class="someclassname">
..
</table>
Please guide if there is any way to implement in css. Thanks in advance.
If you like to use nested CSS then you have to take a look to the preprocessing / precompiled CSS like SCSS.
CSS preprocessors compile the code written with a special compiler. A valid CSS file would be created, which you can include to your page.
https://sass-lang.com/guide
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;
}
Is it possible to apply a CSS style to an existing HTML table that is constructed as a tree?
For example, in Firefox, the Bookmarks Library table is constructed as a tree. Is it possible to apply a CSS style to one of the columns (but not the others)?
Using treechildren it is trivial to apply a style to an entire row. But how about applying a style to just one column?
CSS nth child should help you solve your problem.
https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child
Here's a quick example fiddle: https://jsfiddle.net/0gztemg6/
And the CSS from the above example:
td:nth-child(2) {
background-color: red;
}
Use treechildren:-moz-tree-cell-text(*property*), replacing property with the appropriate property name.
For example:
#placeContent > treechildren:-moz-tree-cell-text(placesContentTags) {
color: blue !important;
}
Will color the tags column blue.
Works perfectly.
I am trying to get the white border on this page to disappear:
http://www.donaldrussell.com/blog/carving
password:testpage
I only want it to disappear on pages with this specific template.
Here's the CSS I'm trying to use:
.fullwidth #wrapper{
background-color:#000;}
Can anyone point out what's wrong please?
Thanks
It's the white border, I would like to get rid of, so it looks like this:
Im not sure where the .fullwidth class is actually being used on the page.
The white background is being called from the main style.css stylesheet on line 224.
If you have access to that file, then just change the value there.
If not, try adding this to the page.
#wrapper.black_bg{
background-color:#000 !important;
}
and change your wrapper div to this:
<div id="wrapper" class="hfeed black_bg">
There is no parent container with the class .fullwidth (as far as I can see). The only option for classes in your body (which is the parent container in this case) are:
<body class="page page-id-7703 page-template page-template-onecolumn-sliderpage-php custom-background">
Try instead adding a class to the wrapper and styling this:
.page-template-onecolumn-sliderpage-php .SOME-CLASS{
background-color:#000;
}
You shouldn't use the class then ID like that. best to stick to classes when styling.
Since you want it to disappear only on on the pages with that particular template, here's what you do.
Open the page's template and add an ID called "login-page" to the body tag so that you can target it separately.
Then create the block of CSS code below being specific with the ID you added to the template's body tag.
#login-page #wrapper {
background-color: #000; /* or Inherit */
}
Note You can change or add to the above block of code and it'll affect just the the template that you applied the the given ID to.
Note, this is different than the older question How can I apply CSS on all buttons which are present in that page? because this is an already existing style. So given that a style, which we'll call "standard_label_style" already exists in an included CSS file, what can I do to say that all the labels on this page should have that style short of adding:
class="standard_label_style"
to each and every one? And yes, I know I could apply the styles ex-post-facto with a snippet of jQuery or JavaScript code. I'm just trying to learn how I'm supposed to do it with CSS.
Follow Up
I've gotten several comments that say just use syntax like this .standard_label_style, label... Unfortunately that does nothing like what I want. That would allow me to apply additional rules to the standard_label_style class, as well as rules to labels within this page, but would not allow me to apply that style to all the labels on this page. To see an example of this, here is a stylesheet and html to demonstrate. The label without a class will still not appear in red but that's what I'm hoping to have happen. I want to apply an existing class to all those labels on the page, not just the one with the class and without adding new styling on this page, the existing style should be the only style.
included.css:
.standard_label_style { color: red; }
test.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="included.css">
<style>
.standard_label_style, label { }
</style>
</head>
<body>
<label class="standard_label_style">Test Label</label><br/>
<label>Unclassed Test Label</label>
</body>
</html>
CSS doesn't really work like that.
You can apply a style to all labels directly:
label {
color: Lime;
}
or apply a class to all labels
.labelClass {
color: Lime;
}
<label class="labelClass"></label>
You can also have multiple selectors, so you could ammend your current style to be
.labelClass, label {
color: Lime;
}
What you can't do in standard CSS is something like
label {
.labelClass;
}
The good news is that there are a bunch of server side libraries which make CSS suck less and let you do exactly this kind of thing, see for example dotLess if you're using .NET which provides nested rules and a basic inheratance model.
To apply a style to every label on the page, use this CSS:
label {
/* styles... */
}
If you have an existing style (e.g. "standard_label_style") in the CSS already, you can apply that to every label:
.standard_label_style, label {
/* styles... */
}
This will affect every label through the site, so use with caution!
In your css file, can't you just put
.standard_label_style, label
{
//styles
}
.standard_label_style, label {
/* stuff */
}
I'm not sure you can... one possible workaround (feels a bit hackish though) is to attach the style to your body tag, then change the css to be this:
body.standard_label_style label{
//Your styles here
}
One of the most underused CSS tricks of all time: Give your bodies an id or class!
HTML:
<body id="standard_label_style">
<label>Hey!</label>
</body>
CSS:
#standard_label_style label{
the styles
}
will take the styles, while
HTML:
<body id="custom_label_style">
<label>Custom!</label>
</body>
Will not.
You are dealing here with CSS precedence. Declarations which are "more vague" (body tag, classes) are applied before declarations which are "less vague" (specific elements, inline CSS).
Thus your answer depends on how the stylesheet is defining label styles. If for example it says label {...}, then that's fairly specific, and your best bet is to use a more specific CSS style, see:
http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/ (good tutorial?)
CSS precedence
The level of "specificity" you need to override, as I said, depend on how specific your other stylesheet was. According to the link, "CSS embedded in the html always come after external stylesheets regardless of the order in the html".
There is also a chance that if you yourself define label {your custom css} that should work, if you import your stylesheet afterwards. It is what I would try first to see if it works. Have you tried this? What was the result?
Note that if you want to completely override the other stylesheet, you will need to also reset any CSS you are not using by settings its values to inherit or as appropriate.