Table to fit and not scale down - html

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.

Related

table width doesn't work on multiple row

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

How to position elements inside a TD or TH without getting a warning in Firefox?

I'm using an absolutely positioned element in a table header cell. To do this, the TH has to be positioned itself, to make it the child element's offsetParent (in my case, using position:relative). Unfortunately, it appears that current Firefox versions will issue a warning any time a TD or TR is given a position other than static.
With the following minimal table HTML
<table>
<tr><th>head</th></tr>
<tr><td>cell</td></tr>
</table>
and the following minimal CSS rules
th { position: relative } // either of these is enough
td { position: relative } // to trigger the warning
table { border-collapse: collapse }
this warning appears in the console for Firefox 30 and 32:
Relative positioning of table rows and row groups is now supported. This site may need to be updated because it may depend on this feature
having no effect.
(the warning does not appear when the table borders are kept separate)
The source of this message is Firefox's table layout code:
/* static */ void
nsTableFrame::RegisterPositionedTablePart(nsIFrame* aFrame)
{
// Supporting relative positioning for table parts other than table cells has
// the potential to break sites that apply 'position: relative' to those
// parts, expecting nothing to happen. We warn at the console to make tracking
// down the issue easy.
So it seems we get this warning even if we're doing nothing wrong at all, because other sites may rely on the position rule doing "nothing". Is there a way to get rid of this annoying warning? It's basically telling me: Warning, what you're doing actually works!
I was getting the same warning and resolved it by applying positioning to a div inside the th or td rather than directly to the td or th. Not sure why it cares but now I don't need to see it anymore.
td div{position:relative;}
<table>
<tr>
<td>
<div></div>
</td>
</tr>
</table>
Have you tried this?
<table>
<tr><th><span class="pos1">head</span></th></tr>
<tr><td><span class="pos2">cell</span></td></tr>
</table>
css:
.pos1{
position:absolute;
top:25px /* example*/
}
.pos2{
position:absolute;
top:10px /* example*/
}

Embedded overflow:hidden only partially working

Problem: In one type of embedded styling "overflow:hidden" is working fine, and in another type of embedded styling it does not.
Here is the CSSDesk code (jsfiddle is not working as of this writing).
Background: In my project I have to use HUGE tables to show variables coming from a db - up to 75 variables per page. I tried my best using divs alone, but I wasted 20 hours and ultimately, I went back to tables (For you CSS purists, I apologize).
In some of my td's the data is a bit long, and needs to be "hidden" (it doesn't matter in this particular case because the data is just a "preview"). I've searched the web, and did an experiment in which the only styling element that could use "hidden" is a div (I tried tds and spans in an experiment and they don't work).
In one td, I'd like to put one variable on the left, and another on the right - most of the time, both will fit into the td, but on a very long variable it's OK to chop off part of the right variable. So, I write the CSS and html, and style the divs so that they meet my criteria - those are the upper two tds on the CSSDesk page noted above. Everything works fine.
BUT! Over the last few months I've learned that it's possible to "mix" multiple styles in the "class" part of the element identifier (e.g. <td class="redcolor blueunderline">) and I've found that on many occasions it is VERY convenient to use "little additions" on an element that is the only one on a page, and you'd have to rewrite/add a whole embedded style or change the style sheet (e.g. Name, address, phone number, zip and you only want to "bold" the name - class="identifers" vs class="identifiers bold") - I wonder if you experts ever do something like that?
So I played a bit and got most of it working EXCEPT for the "overflow:hidden".
For the upper left div in the CSSDesk example I use this CSS and html (it works great):
.leftdivclass {
float:left;
background-color:green;
color:black;
border:2px solid yellow;
overflow:hidden;
white-space:nowrap;
width:25%;}
<td><div class="leftdivclass" >Upper Left 123456789</div>
For the upper right div in the CSSDesk example I use this CSS and html (it works great):
.rightdivclass {
float:right;
background-color:red;
color:black;
border:2px solid yellow;
overflow:hidden;
white-space:nowrap;
width:25%;}
<div class="rightdivclass" >Upper Right 123456789</div></td>
For the lower left div in the CSSDesk example I use this CSS and html (everything works but the "hidden" - note the numbers sticking out)
.floatleft {
float:left;}
.bgblue {
background-color:blue;}
.bgred {
background-color:red;}
.lcwhite {
color:white;}
.lcblack {
color:black;}
.border2y {
border:2px solid yellow;}
overflowhidden {
overflow:hidden;}
.wsnowrap {
white-space:nowrap;}
.width25pc {
width:25%;}
<td><div class="floatleft bgblue lcblack border2y overflowhidden wsnowrap width25pc">Lower Left 123456789</div>
But if I use the same html and add "style="overflow:hidden" everything works fine, like in the lower right example of the CSSDesk example.
<div class="floatright bgred lcblack border2y overflowhidden wsnowrap width25pc" style="overflow:hidden;">Lower Right 123456789</div></td>
Questions:
Why would a single embedded css style containing "overflow:hidden" work, yet when it is parsed out to a single addition to a class command it doesn't work? And why would it work if I added "style="overflow:hidden" - inline?
Do you experts ever use little "class snippets" like this?
Again, I thank you in advance.
You can mix and match these classes. If it saves redundancy, great. If it confuses classes and container classes (i.e. the parents they are inside of) then it gets kind of hard to debug your problem.
Most likely it's not working because either its parent or another class is conflicted with the overflow property. Inline styles like style="overflow:hidden;" almost always get prioritized the highest, but remember that overflow has a default property of visible.
If you call 2 classes, one having overflow:hidden; and the other overflow:visible;, then there's a chance that you won't get your desired effect.
Keep in mind, too, that a selector like this
#divid .divclass
will always win over
.divclass
and will be treated with greater priority.
Also, have you tried
overflow:hidden !important;
which tends to take precedence over everything. Hope that helps.

HTML Tables aren't aligning correctly with CSS

I have a series of tables that are stack on top of one another. They could be a single table, but for functional reasons, they are split up. They look something like this:
Now, the problem is that they aren't lining up as I would expect them to. The code that governs them looks like so (It is quite lengthy):
http://pastebin.com/eWhEPzF5
The structure is 3 tables deep, and you can see it poke outside of the most inner table when it splits tables. Global styles are pretty simple:
body *
{
font-family:'Consolas';
font-size:12pt;
padding:0px;
}
table
{
border: 0px;
border-style:solid;
padding:0px;
border-spacing:0px;
border-collapse:collapse;
}
td
{
padding:0px;
border:0px;
height:25px;
border-style:solid;
}
--
Now, I originally thought the input boxes is what was screwing up the alignment, but after removing them completely, nothing changed. In fact, adding rows one by one, it only 'breaks' when I add the first row of the first table ("Oh my look at all this data").
I doubled checked all the styling and everything and it all is correct.
Why aren't these cells lining up?
use class, <col> tag and colspan to set equals width in each tables.
add table-layout:fixed; to avoid width to be resized by content.
Now, if you make a codepen from your pastbin it would be confortable to re-use your code and see what you are up to , to devellop further.
regards
Try using this on all the tables:
table-layout:fixed;
Table layout property in w3schools
Regards,
Nikola
There are various places you have the typo
cellWdith310
Assuming you've left out some CSS then that could be the issue
UPDATE:
Here's a JS fiddle. There were just various problems with your HTML such as not having enough TDs in the last table etc. Diff the source see what's different
http://jsfiddle.net/AhLAD/7/

Tables: How to achieve “normal” td widths, but 100% table width?

On our site we have tables containing data. We like the column widths we get with a normal table, but we like the border-bottom of tds to stretch the entire width of the page like we get with CSS: table { width:100% }, as can be seen on a demo table widths page, which renders like this:
Is it possible to achieve the same column widths as with a normal (non-width-100%) table in a table where the border-bottom stretches the entire width?
And no, td { white-space: nowrap } in combination with an extra width: 100% td (see the link above) is not good, as sometimes the tds are long and so we want the tds to wrap exactly like in a normal table.
We need a solution that works in at least IE6-8 + FF.
Btw, is there a better way (tm) of showing HTML snippets than linking to an external page? I can show just source, but having HTML rendered too is very illustrative.
This was originally posted on Webmasters, but following a suggestion there, I now (re)post it here.
I finally figured it out.
My first few attempts dealt with floating <td>s and <tr>s, but apparently I was on the right track but had the wrong element.
I think what you want to do is to float the <tbody>. The <table> will still be 100% width, so it will stretch the whole width of the page, but the <tbody> inside of it will act as a container for everything else, and floating it will release it from the shackles of the size of its <table> container width.
The downside of this is that you won't be able to use <thead> or <tfoot> elements, because you will no longer have any way to align them with the <tbody> content.
Try this out:
table {
width: 100%;
border: 1px #000 solid;
}
tbody {
float: left;
}
td {
border: 1px #000 solid;
}
You can use the new CSS properties min-width and max-width to bound the columns sizes without setting them explicitly.
To get a proportional version of what would be rendered when the table's width is not specified, I think you'd have to let it render normally (remove your table width setting) and then use javascript to read the column widths and resize.
Pulled this example of using jQuery to syncronize the column widths of two tables from another question:
$("#t1").width($("#t2").width());
$("#t1 tr td").each(function (i){
$(this).width($($("#t2 tr:first td")[i]).width());
})
Should be a pretty good starting point for scaling your column widths.
This is pretty ugly and not exactly what you asked for, but it works in Firefox and appears to get the same gist...
<html>
<head>
<style type="text/css">
td{background-color:blue;}
div{border:1px solid red;position:absolute;width:100%;}
</style>
</head>
<body>
<table>
<tr>
<td>asdf<div></div></td><td>hello blah blah</td>
</tr>
<tr>
<td>lorem ipsum dolor si amet</td><td>testing</td>
</tr>
</body>
</html>
I was looking for a similar answer to this question, however I don't understand what you mean by
And no, td { white-space: nowrap } in combination with an extra width: 100% td (see the link above) is not good, as sometimes the tds are long and so we want the tds to wrap exactly like in a normal table.
But anyway, I found a solution to my problem. Not sure if it can be used here, but it solved my problem. Maybe it can be helpful to others.
I didn't add in another td. I just applied 100% to every last td with content.
So I could add a class to every last td to do that, or I could use the last-child selector to do it for me.
Something like:
table
{
width:auto;
}
table tr td:last-child
{
width:100%;
}