Here is an example:
<table>
<tr>
<td width="400px" id='myTD'></td>
</td>
</table>
here is the external code:
protected string GetHtml()
{
return "<table><tr><td width="800px"></td></tr></table>";
}
Since the width of 'myTD' is smaller than the width of the external code the displayed code is getting out of the main table boundaries , I dont want the innerHTML of 'myTD' to make the main table wider.
Suffice to say that as the external HTML code is given from outside I can't change it without ruin it as I'll never know which width or heights will be essential for the code and which wouldn't.
This wasn't easy in a way that's compatible with all browsers, but I did come up with this.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#myID {width:400px; overflow:scroll}
</style>
</head>
<body>
<table>
<tr>
<td><div id='myID'>
<table><tr><td width="800"><hr style="width:792px"</td></tr></table>
</div></td>
</tr>
</table>
</body>
</html>
(or as a jsFiddle). That is, by adding a new element inside your td that gets the scrollbars. Trying to apply overflow:scroll to a table cell doesn't work the same on all browsers.
Hope you can use this.
Related
My SVG images work fine on all browser, except IE (surprise...).
Here is my test page: http://plnkr.co/edit/qmv9G3DGRlqDdi9ww58O?p=preview
As you can see, the first svg is displayed OK (even in IE), but the next two are not. They scale down to a container (table -> tr -> td in this case).
Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
/* this will be applied to the images */
.smallicon {
width: 16px;
padding: 5px;
}
</style>
</head>
<body>
<p>
Problem exists in Internet Explorer only
<br> This is fine:
</p>
<object class="smallicon icon-white" data="http://konradpapala.beep.pl/test/040__file_delete.svg" type="image/svg+xml"></object>
<table>
<thead>
<tr>
<th>This is not OK, unless we add style = 'width:20px;height:20px' to the td tag, BTW "normal" images, like .png work fine</th>
<th>This doesn't work either:</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img class='smallicon' src='http://konradpapala.beep.pl/test/040__file_delete.svg'>
</td>
<td>
<object class='smallicon' data = 'http://konradpapala.beep.pl/test/040__file_delete.svg' type="image/svg+xml"></object>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Any ideas?
BTW, I know this question is already there and is answered ( SVG in img element proportions not respected in ie9 ), however, the solution simply doesn't work - I don't have width and height specified in my SVG files, while I do have a viewbox specified.
Unfortunately IE doesn't seem to handle the scaling of SVGs correctly when the size is unspecified. Other browsers default to a size of 300x150 when they can't otherwise determine what the intended size is. IE does not.
You therefore have to specify a width and height for your SVG. If not in the SVG itself, then in the <img> or <object> that references it.
I may be missing the obvious, but any hint on why is Chrome wrapping the last column in this table? Shouldn't it calculate the column width so that the content fits? (given that the table does not actually fill the page). Both IE and Firefox seem to render it fine (or at least the way I expect it to be rendered).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
.imgLink {
margin: 0 8px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>Some text</td>
<td>Some more text</td>
<td><span class="imgLink"><img src="iconEdit.gif">Edit</span>
<span class="imgLink"><img src="iconDelete.gif">Delete</span></td>
</tr>
</table>
</body>
</html>
Edit:
The table is NOT filling the available page width.
Here's a screenshot showing the wrapping in Chrome:
I actually found a workaround for this -- just adding white-space: nowrap; to the last column of the table. Still, I believe that Chrome is not calculating the width properly, or perhaps I am missing something. I would like to know what is going on.
Just guessing here, but I believe that Chrome does make an error in calculating the width of the table cell. Since inline elements are not supposed to have margins, it calculates the width of the td without taking the margin into account. But then it draws the spans with the margins anyway, so the spans are to wide to fit in the td's calculated width, making them wrap.
So possible solutions are:
make the spans inline-block, since inline blocks can have margins normally and then the calculations will be fine
calculate what the eventual total width will be and give the td that width
remove the margin from the span and giving it to the imgs
don't use margins at all, but give the td some padding
Add display:inline-block to imgLink class: http://jsfiddle.net/surendraVsingh/MFZX2/4/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
.imgLink {
margin: 0 8px;
display:inline-block;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>Some text</td>
<td>Some more text</td>
<td><span class="imgLink"><img src="https://dl.dropbox.com/u/19982181/a.png">Edit</span>
<span class="imgLink"><img src="https://dl.dropbox.com/u/19982181/a.png">Delete</span></td>
</tr>
</table>
</body>
</html>
Another answer figured by Grodriguez is applying white-space: nowrap to last column.
To add to SVS's answer the reason for this I suspect is that span is an inline element and as such is not allowed to have a margin. I would imagine that chrome is saying "well, if you want a margin on this you must want it to be a block element" and thus making it a block element. And being a block element now it won't sit the two spans side by side and so does a line break.
This is pretty much confirmed by the fact that setting the display to inline-block works as does removing the margin property from the styles.
Here's a piece of code to illustrates my problem:
<!DOCTYPE HTML>
<html>
<head>
<style>
html, body {height:100%;margin:0;padding:0;}
table {border-collapse:collapse;}
</style>
</head>
<body>
<table width='100%' height='100%'>
<tr>
<td>
header
</td>
</tr>
<tr>
<td valign='top' height='100%'>
<table width='100%' height='100%' bgcolor='red'>
<tr>
<td>test</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Page that I'm currently building has a header and a table below it, table must take all the vertical space available but must not exceed the screen height. Code above works fine in FF/Chrome/Safari but in IE nested table does exceeds the screen height exactly by the height of header above thus causing vertical scrollbar which is an undesired behavior.
How can this be fixed?
IE is not good about calculating heights in tables. In this case, it's setting the cell height to 100% of the body and html rather than its parent container.
Easiest thing to do, but also an ugly hack, is to put
<!–- For Internet Explorer -–> on a line above <!DOCTYPE HTML>
This will force IE into quirksmode and should render properly for your case. You may have to restart IE rather than simply refresh the page after adding the comment.
Change
html, body {height:100%;margin:0;padding:0;}
to
html, body {height:100%;margin:0;padding:0; overflow-y: hidden;}
It will remove the vertical scroll-bar from the IE (or any web browser)
I have a table with dynamic data.
Depending on data, it expands or collapses.
I don't want it. I want a fixed width that never expand or collapse.
How can I do that?
I've already tried <table width="300px"></table>,
but it doesn't work.
The following should work:
<table style="width:300px;table-layout:fixed"></table>
You'd set the width of each column explicitly like so:
td.a {
width:100px;
}
td.b {
width:200px;
}
...
<table>
<tr><td class='a'>A</td><td class='b'>B</td></tr>
<tr><td class='a'>A</td><td class='b'>B</td></tr>
<tr><td class='a'>A</td><td class='b'>B</td></tr>
<tr><td class='a'>A</td><td class='b'>B</td></tr>
</table>
Either old ugly way
<table width="300"></table>
or the CSS way
<table style="width:300px"></table>
Of course, the best way is to use a separate stylesheet file, call it for example style.css:
table {
width: 300px;
}
and your html document:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<table>
...
</table>
</body>
</html>
Consider a table with three rows with heights 10, *, 10. I'd like the middle cell to be high enough to fit to the page vertically. Unfortunately "height:100%" doesn't work at table, tr, or td level, possibly due to standards. Even if it happens to work, I don't want 100%, I want 100% of clientHeight-20px :) I can always write script to calculate remaining clientHeight but I wonder if it can be achieved in HTML/CSS standards.
NOTE: I'm using table just for layout, if there are other ways to lay them down in a better way I'm ok with those approaches too.
Try to leave table and use CSS.
This is the first link on google (searching: css page layout)
http://www.maxdesign.com.au/presentation/page_layouts/
You will spend more time at beginning, but then you will love CSS.
Regards,
Lorenzo.
I've tested the following in Firefox and Safari and it works although it's perhaps not the nicest solution! What you'll see is the 20 height on row1 and row3 is still applied and the 100% makes up the rest. If you leave off the padding and margin from the body you'll get scrolling.
<html>
<head>
<style>
html,body { height:100%; padding:0; margin:0; }
</style>
</head>
<body>
<table cellpadding=0 cellspacing=0 style="height:100%;">
<tr height="20" style="background-color:grey;">
<td>row 1</td>
</tr>
<tr>
<td>row 2</td>
</tr>
<tr height="20" style="background-color:grey;">
<td>row 3</td>
</tr>
</table>
</body>
</html>
Does this not work?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<!-- Date: 2009-07-13 -->
<style type="text/css" media="screen">
table {height: 100%; width: 100%;}
td {border: 1px solid #000;}
</style>
</head>
<body>
<table>
<tr height="10"><td>Data</td></tr>
<tr height="100%"><td>Data</td></tr>
<tr height="10"><td>Data</td></tr>
</table>
</body>
</html>
It does for me.
The "height: 100%" style will only work on elements that are inside an element that has the height property explicitly set. In your case, the table is likely to be inside the body tag and the body tag doesn't have a height set.
Have the same here - the simple examples above work, while my own page does not "stretch" the needed <tr> element.
What I found so far is that excluding the DOCTYPE (thus putting the browser into quirks rendering mode - even for FireFox!) makes my page behave like the simple examples, yet adding a DOCTYPE to these examples stops them from working.
I guess this is not really an answer yet, but it shows the direction in which to look further for the proper solution. Hopefully there is a way to achieve this "stretching" behaviour without the quirks mode.
EDIT: This answer worked for me. The table is wrapped into an absolutely positioned full-screen div. I guess what it does is the browser first calculates the div's dimensions, and then it knows how the table (and the tr inside it) should be sized. Works with DOCTYPE included, relieving, since I don't want to use the quirks rendering mode.