http://jsfiddle.net/qse5owx6/
Just sick, tried to debug this for an hour. Why the table is stretch by the content? I have wrap the layout properly with tr and td. I'm designing html for emails.
why the width:600px doesn't work on the table?
see here jsfiddle
well this happens because you've set specific fixed widths ( in pixels ) to all the elements , that's why you can't force the table to a smaller width.
i suggest you use percentages as widths for the elements inside the table. for example
tbody { width:100%;}
tr { width:100%;}
td { width:50%;}
OR if you want to keep the widths of the elements fixed (873px) you could wrap all the table inside a div like .wrapper and add
.wrapper {
width:600px;
overflow:auto;
}
see here : jsfiddle
I did some research to create email templates.
I hope this will help you in this.
The steps to create email templates are:
Create the email template as per the guidelines of article
Once the template is ready, transfer all CSS from css files to <style> in <head>
Make all the CSS inline using service
To check which tag and CSS elements are valid for email client, please check link
Related
I could take any bbcode, parse it and put it in the forum ad area without much modification. Since I changed the ad area a few months ago, the ad area now tends to totally mess up such ads. It seems to insert line breaks between most elements.
So, I want to do something like this without any javascript, using classes and not IDS and valid XHTML 1.0 Transitional
How it should look
But it should look wrong scale down
wrong scale down
Test website with scale down
scaledown wsrong.esy.es/index.html (REMOVE SPACE)
Can anyone help me.
It is because of a class defined in your test page which applies min-width:100% and display:inline-block; to your table cells:
.APNFQEmuvdnRbBnOdYJEyg table,.APNFQEmuvdnRbBnOdYJEyg tbody,.APNFQEmuvdnRbBnOdYJEyg tr,.APNFQEmuvdnRbBnOdYJEyg td {
display:inline-block; max-width:100%; min-width:100%; overflow:hidden
}
So, you should prevent that class to be applied to your table or edit that style class (at line 30)
or somehow override it by adding a new class like as below:
.noMinWidth tr, .noMinWidth td { min-width:0; }
and apply it to your parent row containing your code
<tr class="APNFQEmuvdnRbBnOdYJEyg noMinWidth"> ...
Note: i see you use <tr class="APNFQEmuvdnRbBnOdYJEyg" style="min-width: initial;"> for the parent row containing your code but the APNFQEmuvdnRbBnOdYJEyg class will also be applied to all td cells inside your tr which overrides that min-width: initial; style you set.
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/
I'm creating a wordpress page and creating a certain part with background image, The main issue was, one of the image in css is being cut or split here is the link to the site:
http://testpress.dramend.com/amend-2/ the image being split was loopmid.gif which was not connecting to looptop.gif here is the screenshot:
<tr>
<td height="23"><img width="707" height="23" alt="" src="http://dramend.com/looptop.gif"></td>
</tr>
Have I done anything wrong in my CSS?
Thanks
You need to use display: block; or you can use vertical-align: bottom; as well for the img tag since it is inline element by default...that will solve the issue.
Also, you are using table for designing layouts which is just dirty.. Learn CSS Positioning, floats, and make layouts using other tags like div, section etc
Instead of using table for design, try using div and CSS Positioning
Since you are using table for designing layout, which is not suggested as Mr.Alien said, you may use display:table; for that img tag as well.
In your css file please add following lines:
table, td, tr {
margin:0;
padding:0;
}
I have a year calendar that shows just the way I want on normal browsers, but in responsive browser I want it to show all the months below each other, due to layout problems.
I know how to apply code to responsive browser - this is not what I am asking about.
I tried giving the td's the value of display:table-row, and its giving me almost the desired result .. it keeps pushing the rows to left and wont accept width:100% value, that's the problem.
Here is a link to the website I am working with www.5eren.dk
you need to set display:table on <tr> and set display:table-row on <td>. use this CSS:
.year-view>table>tbody>tr {
display: table;
width: 100%;
}
.year-view>table>tbody>tr>td {
display: table-row;
}
Hi all and thanks in advance for your help.
I'm pretty new to the CSS, and I would like to have a good input to start building and learning the fastest way possible. I'm already doing some CSS tests myself. Right on the question.
this is the relative css code (I put it on pastebin because it's a bit long)
CSS CODE
As you can see in the code, the 2 tables showing up in the image, have a background and I had to set their size manually with
width:100px;
height:120px;
in the td.menuleft and td.menucenter classes.
1° Question
How do I make automatically resizing cells?
For example i want to say:
Make table tag wide 100% of the page width, then let me make classes for cell tables that are a certain percentage of the table width.
Example
Pic of my work, and how I want to make it like
This way it will be easy to make up tables into tags to automatically fill pages. I've seen something about positioning (relative, absolute) but I didn't managed to make it work.
2° question
What's the best way to structure a web page with css in general? It's ok to do like I said, a div, with tables inside and place every element in a table like manner?
Or can you give me any guide step to step on how to do a particular template?
Thanks guys.
when you want to learn how to make good and effective design that are also considered any worth by search engines, then don't use tables for layouts. tables are there for showing table data, not layout. Use instead divs and start reading about positions, displays, floats.
That is the way you want to go
If you set the tds to be a certain percentage width, they will be the percentage of the parent. so:
table {
width: 100px;
}
tr {
width: 100% /* Will be 100px */
}
td.quarter {
width: 25%; /* Will be 25px */
}
td.half {
width: 50%; /* Will be 50px */
}
And I agree with the previous poster, do NOT use tables for layouts. Not that you are doing that here. But for layouts stick to divs and such.