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>
Related
I have defined a table that uses the whole width of the page width="100%" and want to define images inside it that have as maximum the same width of the table max-width="100%".
But it does not work for IE and Firefox!
I have read that if I donot define a width for the table these navigators are not considered the max-width attribute, but, what can I do to get what I need?
OK, I am editing my original question to be more specific:
HTML code (i.e. "paco.html"):
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="myStyles.css"/>
</head>
<body>
<table>
<tr>
<td><img src="myImage.png"></td>
</tr>
</table>
</body>
</html>
Now the CSS code (myStyles.css):
table, td{
width: 100%;
}
table td img{
max-width: 100%;
height: auto;
}
...and this is all.
The max-width attribute is CSS not HTML you have to either put it in your CSS or say:
<img src="#" style="max-width: 666px;>
For more information on Max-width check: MDN
When a submit button is added inside the table, the cell padding gets larger throughout the entire table. The button is at the very top of the cell. I want it to be at the center with less cell padding. Nothing is really working for me...
<html>
<head>
<style type = "text/css">
td {border:1px solid black;}
</style>
</head>
<body>
<table>
<tr>
<td>Fish</td>
<td>Salmon</td>
<td>Trout</td>
<td>Steak</td>
<td><form><input type = "submit"></input></form></td>
</tr>
</table>
</body>
</html>
This is due to the form element having some default margins and padding. You can reset those back to zero by adding the following to your stylesheet:
form {margin: 0; padding:0;}
Then you can style the rest of the table normally. Consider using some sort of CSS reset script, like Eric Meyer's:
http://meyerweb.com/eric/tools/css/reset/
One solution can be :
<html>
<head>
<style type = "text/css">
td {
border:1px solid black;
}
td form {
display : table-cell;
vertical-align: middle;
margin : 0;
padding : 0;
}
</style>
</head>
<body>
<table>
<tr>
<td>Fish</td>
<td>Salmon</td>
<td>Trout</td>
<td>Steak</td>
<td><form><input type = "submit" /></form></td>
</tr>
</table>
</body>
</html>
try it :D
you can try this
<td><form><input type = "submit" style="margin:0;"></input></form></td>
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.
I've got some code that puts a line-through on a TR for deleted rows, but this means that my "Actions" column (that only has) buttons suffers. This is because there are individual spaces between the buttons, which wind up getting line-throughed as well.
After poking around on W3Schools, it boggles me why this example doesn't work:
<html>
<head>
<style type="text/css">
tr {text-decoration:line-through}
</style>
</head>
<body>
<table>
<tr>
<td>this needs to be line-throughed</td>
<td style="text-decoration: none !important;">This shouldn't be line-throughed.</td>
</tr>
</table>
</body>
</html>
How am I supposed to clear the line-through on child elements?
EDIT
I've updated my example - the problem is that I do not want to take the style off the parent element, just a single child element.
You shouldn't have to use important or inline styles for this. Try
h2 {text-decoration:line-through;}
h2 span {text-decoration: none; border: 1px solid black;}
EDIT
In that case with tr since yeah you applied text-decoration to it, you have to take text-decoration off the same element tr not td. Otherwise do:
tr td { text-decoration: whatever }
and then when needed
<td style="text-decoration: none;"></td>
There was a similar question a little while back and according to that answer you can't do what you're trying to accomplish.
EDIT: Given your example, why not just apply the line-through to TD elements individually
<html>
<head>
<style type="text/css">
td.deleted {text-decoration:line-through}
</style>
</head>
<body>
<table>
<tr>
<td class="deleted">this needs to be line-throughed</td>
<td>This shouldn't be line-throughed.</td>
</tr>
</table>
</body>
</html>
The line-through is applied to the H2, so you have to take it off of the H2.
<html>
<head>
<style type="text/css">
h2 {text-decoration:line-through}
h2.alt { text-decoration: none; }
h2.alt span { border: 1px solid black; }
</style>
</head>
<body>
<h2>Line-through</h2>
<h2 class="alt"><span>This is heading 2, and shouldn't be line-throughed.</span></h2>
</body>
</html>
(Viewable here: http://jsbin.com/anopa/)
The child (span) cannot affect the style of the parent (h2), which is where the style is applied. You have to alter where the style was originally applied.
Edit: updated example
One way to fix this would be to change
tr {text-decoration:line-through}
to
tr td {text-decoration:line-through}
As a result, the line-through is on the individual table cell and not the whole row. This allows you to specify a different style on a single cell.
BTW, the issue doesn't seem to exist with the example code you've given on IE5.5+. In FF3.5, however, the example behaves as you've explained. I'm not sure which is the actual correct behavior.
Try This
<html>
<head>
<style type="text/css">
tr td {text-decoration:line-through;}
tr td.noline { text-decoration:none;}
</style>
</head>
<body>
<table>
<tr>
<td>this needs to be line-throughed</td>
<td class="noline">This shouldn't be line-throughed.</td>
</tr>
</table>
</body>
</html>
Notice that the style is "tr td" for both.
<td style="text-decoration: none>
It works, unless what you're trying to uncross is a link to a URL.
Then this phrase also defeats the link.
I am trying to construct a simple, one-column layout. I want the top two rows to have smaller, fixed heights. The third row should expand to fill the rest of the page. Here is my current source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
html, body
{
height:100%;
width:100%;
border:0px;
margin:0px;
}
</style>
</head>
<body>
<table style="width:100%;height:100%;" cellpadding="0" cellspacing="0">
<tr>
<td style="height:50px;background:red;">Header 1</td>
</tr>
<tr>
<td style="height:10px;background:blue;">Header 2</td>
</tr>
<tr>
<td style="background:green;">Content</td>
</tr>
</table>
</body>
</html>
This works wonderfully in Safari, Firefox, and Opera. However, it fails miserable in both IE6 and IE7. In these two browsers, the first two rows are rendered much bigger than their specified heights. Not only that, but they actually dynamically resize with the height of the browser window. It's like IE is converting the constant pixel height to a percentage height.
It is important to me that the browser window not display scrollbars unless the content of the third row is big enough to require it. Setting the height of the 3rd <td> to 100% will cause these scrollbars to always appear since the height of that row will actually be set equal to the height of the entire table (it will be 100% of its containing element).
Removing the doctype declaration and reverting to quirks mode seems to make the issue go away in IE, but I need to use HTML 4.01 transitional as that is what all of the other existing pages in this application expect.
Here is an article for you that tells you how this can be done. I just tested the example that they provided in IE 6 and it works.
It appears that you must use the height property of the table, and NOT do it via a style attribute.
How about adding position:fixed to the table? I tested it in IE8 and seemed to work.
Set the height of your last td to 100%:
<tr>
<td style="background:green;height:100%;">Content</td>
</tr>
Does this work:?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
html, body
{
height:100%;
width:100%;
border:0px;
margin:0px;
}
</style>
</head>
<body>
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td height="50" style="background:red;">Header 1</td>
</tr>
<tr>
<td height="10" style="background:blue;">Header 2</td>
</tr>
<tr>
<td style="background:green;">Content</td>
</tr>
</table>
</body>
</html>
If you're using this to layout a page why not use div's instead?
This sort of works:
<style>
.outer {
position:relative;
height: 100%;
width: 500px;
background-color: blue;
}
.top {
height: 30px;
background-color: red;
width: 100%
}
.middle {
height:30px;
background-color: green;
width: 100%
}
</style>
<div class="outer">
<div class="top">
content1
</div>
<div class="middle">
content2
</div>
content3
</div>