I'm having trouble with my #media query. When I resize the browser (chrome) it doesn't shrink. I've tried a couple solutions now and can't get it to work. I'm sure it's a simple user error but from the different articles and blogs I have read it seems this is the logical solution and should work.
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="body-table">
<tbody>
<tr align="center">
<td width="100%" class="container" bgcolor="#ffffff" height="100">
And the media query:
#media screen and (max-width: 600px){
*[class="container"] { width:100% !important;}
}
I think the problem is you have a fixed width in your table.
So try changing your fixed width to percentage.
Like this
width="80%"
Your .container table not shrink because it parent is fixed width. So instead of fixed width parent we will add width to the td that hold your main table.
<table border="1" cellspacing="0" width="100%">
<tr>
<td></td>
<td width="600">
<table class="container" width="100%" style="background: peru;">
<tr>
<td>This will shrink when width less than 600 pixels.</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
You can find a more detail answer here or this pen here and I highly recommended you to check out this guide to see which CSS style each email clients support.
Change width="600" to width="50%"
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
<td style="padding: 0px 30px 0px 0px;"><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="90%" bgcolor="green">
<tr>
<td ><div> </div></td>
</tr>
</table></td>
</tr>
<tr>
<td><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="" height="30px"><div style="border-left:1px solid #00f;height:50px;margin-top:-21px;"> </div></td>
<td width="50%" height="30px"><div style="border-right:1px solid #00f;height:50px;margin-top:-21px;"> </div></td>
<td width="100%" height="30px"><div style="border-right:1px solid #00f;height:50px;margin-top:-21px;"> </div></td>
</tr>
</table></td>
</tr>
</table></td>
Even though the question is horrible, here's the answer:
You cannot reposition table cells by any CSS based method. Also, you cannot control overflow or height of table cells (they never overflow, they will always wrap their full content).
Neither can you position elements absolutely inside a table-cell. It's just not possible.
Using a negative margin-top on a div inside a td will not have any effect unless the div has any other preceding element neighbors. If you had for example an h1 before your div inside the td, you could use margin-top: -10px; on the div to move the div closer to the h1 visually.
I have three entities in a row, currently I use table to display them:
<table>
<tbody>
<tr>
<td id='td1'>some text</td>
<td id='td2' style='width:600px;'>some text</td>
<td id='td3'>some text</td>
</tr>
</tbody>
</table>
What I need is to resize left and right cells simultaneously when browser resizes. I wonder if it is possible without JS.
I have even tried CSS resize which apparently does not work in IE, played with widths of the cells, but still without any success. I am totally a newbie in CSS.
Is it even possible? Thanks in advance.
Can't verify since I'm on a mobile but have you tried....
<table>
<colgroup>
<col class="first" />
<col />
<col class="last" />
</colgroup>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Then use the col.first and col.last classes to style them with css.
W3C: http://www.w3.org/TR/html-markup/col.html
Oh, and, remove all the css from your html. Having css inline will make the document completely unmaintainable through css files. And remove the IDs also from td:s and always use " to quote html attribute values.
You can also try to add:
table {
table-layout: fixed;
}
To prevent the browser from calculating the initial width of each cell according to their contents and give them all initially an equal width. (height will still expand according to content.) Then override certain columns with css.
try this css
table{
width:100%;
}
it works.
My table cells have a font-size of 9pt. Within these table cells there is either a spacer image or text. If it's a spacer image I just want the height of the table, the height of the spacer image (2px in this case). Code below:
<table width="100%" cellspacing="0" cellpadding="2" border="0" class="foo">
<tbody>
<tr valign="top">
<td width="100%" colspan="4" class="foo">
<img width="0" height="1" alt="" src="spacer.gif">
</td>
</tr>
</tbody>
</table>
<table width="100%" cellspacing="0" cellpadding="2" border="0" class="foo">
<tbody>
<tr valign="top">
<td width="100%" colspan="4" class="foo">
bar <span>barbar</span>
</td>
</tr>
</tbody>
</table>
As of right now, whether it's text or a spacer image the height of the cell is 9pt. And if this wasn't bad enough, I CANNOT change the markup. What you see is what I get.
OK, cpara :)
This is not best practice, but if you really cannot change your HTML, you could still use a stylesheet. If the styles in the stylesheet do not overwrite the HTML styles, you can also try to add !important (like width:100% !important;) to any style in your stylesheet...
Well, if the 9pt font-size is not set anywhere but the text is rendered to 9pt, it can be that you do use a separate stylesheet and the 9pt are set in either the div or the body, or your browser's standard font-size (if not font-size is set) is set to 9pt...
But great, if the answer was finally closer than thought and it works now for you :)
Is there a standard method for calculating fixed width values for tables in HTML? Right now, I'm working on formatting tables on a web page to be a fixed width, I have a table that's within another table, when testing the page in IE I notice that the alignment of the colon is off as the second picture below illustrates. My intention is to make sure the colons are properly aligned as they are in Firefox and was just curious if the misalignment was due to the settings in the HTML or if it has more to do with how the browser renders the page.
Firefox:
Internet Explorer:
UPDATE:
Sorry for not providing any reference code, here's a snippet of the particular section I'm working with.
<div style="width: 1600px; text-align: center; position: absolute; top: 10%; left: 0%;">
<span id="labelInstructions" style="font-size: xx-large;">PAGE TITLE <br><br></span>
<table style="width: 1000px;" align="Center" border="0">
<tbody>
<tr>
<td style="width: 1000px;"><label for="FileUpload1" style="font-size: x-large;">ENTER: </label><input name="FileUpload1" id="FileUpload1" size="70%" type="file"></td>
</tr>
<tr>
<td style="width: 1000px;"><span id="fileUploadError" style="color: Red; font-size: medium;"><br><br></span></td>
</tr>
<tr>
<td style="width: 1000px;">
<table style="width: 1260px;" border="0">
<tbody>
<tr>
<td style="font-size: x-large; width: 800px;" align="right" valign="top">FILE INSTRUCTIONS:</td>
<td style="font-size: x-large; width: 1800px;" align="left" valign="top">INSTRUCTION 1<br>INSTRUCTION 2<br></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td style="font-size: x-large; width: 800px;" align="right" valign="top">FILE EXAMPLE:</td>
<td style="font-size: x-large; width: 1800px;" align="left" valign="top">EXAMPLE 1<br>EXAMPLE 2<br><br></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
I know it's ugly, just a note, this is an ASP.Net generated webpage and I'm setting the attributes of the HTML elements pro-grammatically from the code behind. I sorta inherited this and my employer wants to keep major changes to a minimum.
UPDATE 2:
When I adjust the inner table width I can get it to align in IE when set to 1377px. For Firefox, the sweet spot for alignment is 1260px.
All you have to do is make the table columns the same width as each other.
Example of style:
table tr td:first-child { background-color:yellow; width:200px; }
HTML:
<table>
<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
<tr><td>Row 3 Cell 1</td><td>Row 3 Cell 2</td></tr>
</table>
Sorry for not directly answering to your question, but...
Stoneage is over! You really shouldn't use Tables for layouting-purposes, as they are hardly-accessible for disabled people and make your HTML-File way too big (in relation to the content).
Seperate Content and Layout, use CSS.
Make sure to place the the parts that you want to align together in one table.
<table id="layout">
<tr><td>HEADER</td>
<tr><td>
<table id="form">
<tr><td>LABEL</td><td>INPUT FIELD</td></tr>
<tr><td>LABEL</td><td>INPUT FIELD</td></tr>
<tr><td>LABEL</td><td>INPUT FIELD</td></tr>
</table>
</tr>
<tr><td>FOOTER</td>
</table>
i would create two classes, left and right and apply the left class to the <td> on the left and the right class to the <td> on the right. the left class would be something like
.left{width:100px; text-align:right;}
heres an example
Given HTML like the following, how can I get the last row to take up the remaining height, and have the n-1 first rows to take up just as much height as they need?
This seems to work as is in Chrome, but not in Firefox2 or IE6/7/8.
<table>
<tr>
<td rowspan="5"><div style="border: 1px solid #cdcdcd; width: 100px; height: 300px;"/></td>
<td/>
</tr>
<tr>
<td>one</td>
</tr>
<tr>
<td>two</td>
</tr>
<tr>
<td>three</td>
</tr>
<tr>
<td>full</td>
</tr>
</table>
So, the idea is that the last row, with "full" in it, should be really tall, and the other rows, "one", "two" and "three" should be as small as possible.
I've tried stuff like putting exact heights on the rows, say "<tr style="height:20px;"> and I've tried 100% height on the last row, no luck so far!
Update:
This layout is going to be used for varying types of content, and the intention is for the table to size itself to the content. Sometimes the div will be tall, then its height determines the table's height, but othertimes the div is short, then the rows (one, two, three) determine the table's height.
If javascript is ok, you could use jQuery and find the top position of the last row and the position of the bottom of the window or element. The difference should be set as the height of the last row.
I didn't do any code yet, because I wasn't sure if you were looking for a table inside of an object or to have it fill to the bottom of the window. I can do that for you if you'd like with some more detail.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><body>
<table border=1>
<tr>
<td rowspan="2"><div style="border: 1px solid #cdcdcd; width: 100px; height: 300px;"/></td>
<td valign=top style="padding:0px;">
<table height=1>
<tr>
<td>one</td>
</tr>
<tr>
<td>two</td>
</tr>
<tr>
<td>three</td>
</tr>
<tr>
<td valign=top>full<br><br><br>more full</td>
</tr>
</table>
</td>
</tr>
</table>
</body></html>
Updatedx3, works in ie6/ff