We are using an order management system for sending emails to customers.
This system allows us to put in "place holders" to show order related information inside the email.
For example: #?OrderItemsDetails?# gives us the following table:
<table><tr><td><strong>Item Name</strong></td><td><strong>Quantity</strong></td>...</tr></table>
The problem is, this table has no formats, like padding, margin or border-styles. The table looks ugly and is not useable.
Is it possible to use CSS for changing the look of the table inside this placeholder?
Can I put the placeholder inside a div area and change the table looks via CSS?
When I try to change the CSS for the usual table elements the whole email will be changed.
As this is an emailer you have to play via table tags only and use inline css inside table tag like <table border="" cellpadding="">
table, td {
border: 1px solid black;
color: red;
}
You can use only table in the css but above will style your table with border and red color text. If you want some sepcific styling then you can google it but put this in your css and it should work.
Related
I have a Wordpress website which contains a lot of pre-written CSS-code. One of the prewritten code-snippets looks like this:
input[type=url] {
color: #666666;
... (a lot of other styling properties)
}
Now I wanted to create a design for a single page which contains an input field of type url.
<input type="url" id="input_url" class="dtd-settings-element"></input>
The problem is, that I want to style this input field completely on my own but the pre-written code is affecting that style. Is there a possibility to "deactivate" the pre-written CSS snippet for my new input field?
I know that I can overwrite all the attributes from the pre-written snippet in my dtd-settings-element class. But doing this for multiple elements would not be optimal.
Thanks in advance for pointing me in the right direction :)
EDIT:
Last thing I tried was:
input[type=url]:not(#input_url)
You can use the unique id of the input field with !important to target that element and just apply whatever style you want...
#input_url {
color: red !important;
}
You can try to override styling.
#input_url input[type=url] {
color: #000;
font-size: initial;
...
}
Unfortunately there is no way to deactivate pre-written CSS in your terms. All the possibilities you have already mentioned:
Override all class properties
Modify original styles
Change type attribute
However you can change tag from input to (for example) textarea.
I have a wordpress site and all tables seem to be borderless as far as I can see.
When I check it with Firebug I can disable css initialization for <table> element and design seems to be OK. Firebug tells me the CSS code is set in theme's style.css file. I open the file and check the content but there is no such line.
After this I choose a worse way to manually set the style attribute of my <table> HRTML element as follows. I also apply !important directive to override anything.
As far as I can know the style attribute of an HTML element overrides all CSS and previous (inherited or not inherited) style declarations. Also the !important also makes it undestructable. I have used both I still can not make it work.
What am I possibly doing wrong and how can I fix it?
Regards.
P.S. : You can check the faulty content # http://pmiturkey.org/hakkimizda/uyelik/
The table as the bottom of the content.
OK, I played a little with firebug in your website here and had to do a few things:
1) Remove border="1" in that same table
2) Change from style="1 border #000 !important;" to style="1px border #000;"
These changes solve your problem.
EDIT
In order to draw borders around each cell of the table instead, proceed as follows:
1) Remove the table's style attribute
2) In your css file, add the following:
th, td {
border: 1px solid #000;
}
This should add borders around each table cell of yours. Hope it helps!
Well for starters you aren't adding a color to your border border: 1px solid red;. The borders are probably being removed in a css reset. You can add css to the bottom of your styles.css file and that should override any reset.
Also.. are you wanting a border around the table, or a border between the table rows? You might want to specify what exactly you want.
I am working on a page where I have to show a scrollable table. Please find it in the below jssfiddle link :
jsfiddle
Problem is the actual page where I am including the above html table and the associated css, that page itself has other layout on it and a different css file for that.
I guess my above css file table , td and body is interfering with the other css used in that page and
destroying the display, Can anybody please help me to change the css in the jssfiddle link above
so that everything is put into unique class/id and used appropriately in the html. So that no matter how are the remaining page layout , other widgets and layout do not overlap with my table.
My table should remain intact in terms of its look and feel and scroll property.
Apologies, I am not an expert of HTML/CSS
Even if someone can explain me what is the purpose of the first 4 lines
* { } and then
body { },
table { } ,
td { } , will be great help. I think those should put under appropriate class and then used in the html. Please provide some guidelines how can I do that.
Thanks
*{}
Applies to every element on the page. You still want what is there, but you want it to only apply to every element within your scrolling tables, so I changed it to :
#scrollTableContainer *{}
I move'd your body's font declaration into div#scrollTableContainer
And then I prefixed your table{}, td{}, td:first-child{}, td:first-child + td + td, td:first-child + td + td + td and td:first-child + td + td + td + td with the #scrollTableContainer ID.
The one thing I didn't decide for you was what to do with your font-size in html{}. I am guessing you will still want that. My suggestion would be to decide on a font size and merge it with the declairation in div#scrollTableContainer
And here is the result : http://jsfiddle.net/trex005/6q1avq7f/1/
Is it possible to remove a table tag on a specific HTML location using only CSS? I have access only to the CSS file unfortunately.
I want to remove the image (which say "LOUIS INVESTORS RELATIONS") on the blue background here: http://louis.stockwatch.com.cy/nqcontent.cfm?a_name=fstatement&lang=en
It would be great if I could remove the whole table that contains that image.
Is it possible, and how?
Now use to this
table tr:first-child td:nth-child(2) img {
display: none;
}
Removing the whole table that contains that image means removing pretty much everything.
If you mean to remove the <td> that the image is within, that is possible, if you assume that no other <td> has an attribute with the background-color being set to #576f9c:
http://jsfiddle.net/YY98W/
table td[bgcolor="#576f9c"] { display: none; }
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.