|
CSS - Table With Min And Max Width
Hi
Is it possible to give a table widths style the ability to have a minimum and maximum width? eg, it has to be 10px to 30px in width? so if content doesnt fill it enough, it will be 10px but if there is loads of content it will only goto 30px in width ? Similar TutorialsOk. Here's the problem: I have a asp.net 1.x datagrid inside a floated div and I want the datagrid to stretch the width of the div. This div is in the center of two other floated divs. Is there a way to make a table go 100% the width of its container div? Css code: Code:
/* left bar: */
#navBar{
width: 185px;
float: left;
}
/* right bar: */
#rightModulesContainer {
width: 130px;
margin: 0;
padding: 0px 0px 0px 10px;
float: right;
}
/* center content: */
#content{
padding: 0px 5px 0px 0px;
margin-top:0;
margin-bottom:0;
margin-left:4px;
margin-right:0px;
float: left;
text-align:left;
/*display: inline;*/
}
/* contained in #container: */
#dataGridContainer{
margin: 0;
padding-bottom: 10px;
min-width:360px;
}
.categoryGridStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
color: #000000;
width:100%;
}
and here is the layout of the divs: Code: <div id="navBar">left navigation bar here (tree view)</div> <div id="rightModulesContainer">right side bar here</div> <div id="content"><div id="dataGridContainer">datagrid here</div></div> Thanks for your help in advance. I've been messing with this for a while - trying to get it to work cross browser is driving me nuts. I've tried placing the divs in containers and floating the containers, I've tried everything I can think of... Hello, (please also see attached/uploaded style sheet) I'm puzzled why (in the following code) the TEST #2 table renders as required (i.e. 2 rows in 1 column, all with the same cell WIDTH) but the table in TEST #1 seems to render the table cells (i.e. 2 columns in 1 row) without a common cell WIDTH. How can I get all the cells (there are plenty more!) in table TEST #1 to all be exactly the same width (preferably 85px)? Code: <link rel="stylesheet" type="text/css" href="http://thinet/cgi-bin/thinetStyleSheet.css"> TEST #1 <table class="menu" border=1 CELLPADDING=2> <tr> <td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td> <td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td> </tr> </table> <P> TEST #2 <table class="menu" border=1 CELLPADDING=2> <tr><td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td></tr> <tr><td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td></tr> </table> I don't think I've quite grasped the idea of CSS yet?!?! Any help/pointers would be appreciated. Thanks, Andy I have a textarea in a <td>which asks for users for some description. If users enter text and don't use any space or enter, the width of the table gets bigger and bigger and damages the pages design. What can I add (to td.fixed_width css for example )to make the line break after the width of the table is reached??? There is a solution that I put a div in td and then Code: #desc {
width:"100%";
width::fixed;
overflow:scroll;}
but it is not exactly what I want im trying to make a table have a max width (so it can shrink of the browser window shrinks or the user has a smaller screen resolution) Code:
<STYLE type="text/css">
#max800 { max-width: 800px; text-align: left;}
#max750 { max-width: 750px; text-align: left;}
</STYLE>
thats the css in the header section of my document (which is a .php document but this part is not in <?php ?> tags on a table if i put <table id="max800"> it does not fallow the max width propety i am trying ot give it (or the text align for that matter) instead it shrinks to the smallest possible width like it would nomrally do what am i doing wrong? Code: table.community {
background-color:#FFFFFF;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
color:#414141;
table-layout: fixed;
width: 548px;
margin: 1px;
}
<table class='community_field'> The table is ignoring the width..doesn't stretch the width designated. Percentage doesn't work either.. This code results in a DIV box with 1 pixle borders, with tabs at the top. Code: <html>
<head>
<title>Untitled</title>
<style type="text/css" media="screen">
/* Top Tab Menu */
#navlist
{
border-bottom: 1px solid #ccc;
margin: 0;
padding-bottom: 19px;
padding-left: 10px;
}
#navlist ul, #navlist li
{
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
}
#navlist a:link, #navlist a:visited
{
background: #E8EBF0;
border: 1px solid #ccc;
color: #666;
float: left;
font-weight: normal;
line-height: 14px;
margin-right: 8px;
padding: 2px 10px 2px 10px;
text-decoration: none;
}
#navlist a:link#current, #navlist a:visited#current
{
background: #fff;
border-bottom: 1px solid #fff;
color: #000;
}
#navlist a:hover
{
color: #666;
background: #fff;
}
/* Big Box Below Tabs */
#content_box {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
body {
margin: 10px;
}
</style>
<title>Test</title>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Test One</a></li>
<li><a href="#">Test two</a></li>
<li><a href="#">Test three</a></li>
<li><a href="#">Test four</a></li>
<li><a href="#">Test five</a></li>
</ul>
</div>
<div id="content_box">
<table width="100%" border="0" cellpadding="5">
<tr>
<td>
Test<br />Test<br />Test
</td>
</tr>
</table>
</div>
</body>
</html>
In it, is a table with 100% width which will hold row data from a database. It works very well if Firefox. But in IE, the right edge of the DIV box is pushed to the right by two pixles. I believe it is the table doing this. I'm not understading how to have the non fixed width DIV contain a non fixed width table. See the real thing at Siliconsatan.com/example.php See a close up image below. Hello, I have not used CSS very much, so this may be a fairly simple problem. I want a table to be 800px wide, and 'centered' in the screen (like msn page appears when you open it at any resolution greater than 800x600). Then I have a TD whom I want to be 150px wide, how can I achieve this affect just by typing: Code: <table class="masterTable"> and Code: <td class="masterCell"> http://tonglebeak.ath.cx/boards/ In firefox, it renders as I expect it to: the caption is half the width of the table, and the caption is centered. In IE, however, it doesn't want to become half the width of the table. Hell, setting a px amount doesn't even affect it. What can be done to fix this in IE? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "(URL address blocked: See forum rules)">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Styling HTML select elements</title>
<style type="text/css">
select {
width: 100%;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>Test</td>
</tr>
<tr>
<td>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
This code does exactly what I want it to in Mozilla. The widest select determines the width of the column, and then every other select takes the same width. In IE, however, the width is determined by the plain text cells, and the text of the options get cut off. Without making the width fixed, which is a problem as I have a very large table with dropdowns in each cell where I don't really know what the values are or whether the user modifies the text size, is there any workaround in IE to acheive the same effect using CSS? I'm pretty new to CSS but I'm slowly working through problems on a site I am making for some friends (more accurately a template for their content publisher) and I came across a problem. I have a table that contains all of the pictures spaced properly, but I can't get it to resize down to something that makes sense. I tried adding style="... directly to it as well as width="... but none seem to resize it. (I tried both fixed and percentages) Link: http://www.coreconsciousness.com/orangenew.html Heres the code, the external CSS doesn't contain anything important at the moment: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" /><!--Don't add anything above this line, you may change the DTD to match your page-->
<title>Test Page</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="main.css" type="text/css" />
<style type="text/css">
td.c1
{
background-image:
url('images/textboxorange.gif');
background-repeat: repeat-y;
width:100%;
}
</style>
</head>
<body>
<table id="Table_01" border="0" cellpadding="0" cellspacing="0" width="900px">
<tr>
<td colspan="8"><img src="images/Orangenew_02.png" alt="" /></td>
</tr>
<tr>
<td colspan="8"><img src="images/Orangenew_04.png" alt="" /></td>
</tr>
<tr>
<td rowspan="2"><img src="images/Orangenew_05.png" alt="" /></td>
<td rowspan="2"><img src="images/Orangenew_06.png" alt="" /></td>
<td rowspan="2"><img src="images/Orangenew_07.png" alt="" /></td>
<td rowspan="2"><img src="images/Orangenew_08.png" alt="" /></td>
<td rowspan="2"><img src="images/Orangenew_09.png" alt="" /></td>
</tr>
<tr>
<td><img src="images/Orangenew_11.png" alt="" /></td>
<td><img src="images/Orangenew_12.png" alt="" /></td>
<td rowspan="3"><img src="images/Orangenew_13.png" alt="" /></td>
</tr>
<tr>
<td colspan="7"><img src="images/Orangenew_14.png" alt="" /></td>
</tr>
<tr>
<td colspan="8" class="c1">
<h1>#CONTENT#</h1>
<img src="images/Orangenew_15.png" alt="" />
</td>
</tr>
</table>
</body>
</html>
I have set my table cell #3 to 246px and have placed an image (called keyboard.jpg) with a width of 246px in it as a background image (the only cell in the table with an image), yet the table cell has expanded beyond that 246px width. I need to set the cellpadding to 5px because for legibility for all the other cells (with just text) in the table. Can I turn off the cellpadding for just this one cell #3 that has an image in it? Why does a background image in a table cell react to the table's cellpadding? Should I remove the keyboard.jpg as a background image and make it an in-table image? <em>Whatever the case, how can I make the image fit nicely without any extra space in the cell?</em> Here's my code and my stylesheet: <div id="table"> <table width="725" border="0" cellpadding="5" cellspacing="0" class="table"> <tr> <td width="1"> </td> <td class="cell1" width="130"><p><strong>Yada</strong></p> <p>Bla bla bla</p> <p>Bla bla bla</p></td> <td class="cell2" width="124"><p><strong>Yada</strong></p> <p>Bla bla bla</p> </td> <td class="cell3" width="246"></td> <td class="cell4" width="174"><p><strong>Yada</strong></p> <p>Bla bla bla<br /> <br /> Bla bla bla</p></td> </tr> <tr> <td class="tdblue"> </td> <td class="cell5"><p><strong>Yada</strong></p> <p>Bla bla bla</p></td> <td class="cell6"><p><strong>Yada</strong></p> <p>Bla bla bla</p></td> <td class="cell7"><p><strong>Yada</strong></p> <p>Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla</p></td> <td class="cell8"><p><strong>Yada</strong></p> <p>Bla bla bla</p></td> </tr> <tr> <td> </td> <td class="cell9"><p><strong>Yada</strong></p> <p>Bla bla bla Bla bla bla Bla bla bla</p></td> <td class="cell10"><p><strong>Yada</strong></p> <p>Bla bla bla Bla bla bla.</p></td> <td class="cell11"><p><strong>Yada</strong></p> <p>Bla bla bla Bla bla bla Bla bla bla Bla bla bla </p></td> <td class="cell12" width="174"><p><strong>Yada</strong></p> <p>Bla bla bla Bla bla bla Bla bla bla </p></td> </tr> </table> Here's my stylesheet: table { width: 760px; margin: auto; font-family: verdana, arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 150%; text-align: left; text-decoration: none; letter-spacing: .5px; } table td { vertical-align: top; } td.cell1 { background: white; padding: 5; width: 130px; } td.cell2 { background: #F7F4EE; padding: 5; width: 124px; } td.cell3 { background: #ffffff; background-image: url(../images/keyboard.jpg); background-repeat: no-repeat; spacing: 0; padding: 0; width: 246px; } td.cell4 { background: #F7F4EE; padding: 5; width: 174px; } td.cell5 { background: #DFE5F0; padding: 5; width: 130px; } td.cell6 { background: white; padding: 5; width: 124px; } td.cell7 { background: #DFE5F0; padding: 5; width: 246px; } td.cell8 { background: white; padding: 5; width: 174px; } td.cell9 { background: white; padding: 5; width: 130px; } td.cell10 { background: #F7F4EE; padding: 5; width: 124px; } td.cell11 { background: white; padding: 5; width: 246px; } td.cell12 { background: #F7F4EE; padding: 5; width: 174px; } .tdblue { background: #DFE5F0; } .tdtan { background: #F7F4EE; } I have a table with two rows. It has some very basic CSS - borders, padding, etc. In FF and Chrome it works exactly like I expect, but, big surprise, IE7 is causing me some problems. I haven't tested with any other IE versions. The first table row is a header with a CSS background image and some text. The second row is a basic content row. If I put just one text character in the cell everything is fine. If I put enough text in the cell that it wraps to the second line that makes the second row display about 4-6 pixels WIDER than the top row. Any ideas? I can send the source if you like, but it's a lot to take in. Thanks! Here is the relevant HTML code: <table> <tr> <td> <div style="float:left;"> <div class="middle"><div class="r"><div class="l"> <a id="gridtitle" href="javascript:void(0)" onclick="reload()"></a> </div></div></div> <div style="width: 200px;"> <a href="#" onclick="addheader()"><img border="0" src="tab_new_header.png" alt="Delete this grid"/></a> <a href="#" onclick="addfooter()"><img border="0" srctab_new_footer.png" alt="Delete this grid"/></a> </div> </div> <div style="float:right;"> <a href="#" onclick="javascript:toggleLayer('newgrid');"><img border="0" src="button_add.png" alt="Add a grid"/></a> <a href="#" onclick="deleteGrid()"><img border="0" src="button_delete.png" alt="Delete this grid"/></a> </div> </td> </tr> <tr> <td> <div id="gridbox3" class="gridbox" width="870px" height="600px" style="background-color:white;"></div> </td> </tr> </table> And the relevant CSS code [which just sets the background of the tab]: .l {background: url(../../datadir/client/images/billinggrid/name_sidebg1.png) 0 0 no-repeat; height: 43px;} .r {background: url(../../datadir/client/images/billinggrid/name_sidebg2.png) 100% 0 no-repeat; height: 43px;} .middle {background: url(../../datadir/client/images/billinggrid/name_sidebg.png); height: 43px;} This is the output (i can't post images?) http://i34 [.] tinypic [.] com/4hpqag [.] png The first problem I am having is that the div my gridtitle (CIBC) is in does not set its width automatically to the text width. Instaed, it spans the whole table ... Position-wise, I would like the tab with "CIBC" to be to the far left, the header and footer tabs to be right of "CIBC" but still floating left, and the + and x signs to be floating right, all on the same line. Help? Thanks in advance. Hi, My client very much likes a website that belongs to their competition. The thing she likes the most is the fact that the content is centered horizontally and vertically in the browser window. The way they (her competition) have constructed the site is to to place all the content inside a table 100% wide and 100% high with the content centered horizontally and vertically using the table's valign and align attributes. However, this isn't very "standards", is it . . . so, does anyone know of a way this same effect (content centered horizontally and vertically in browser window) can be acheived using CSS? Thanks! Hey guys, I'm having trouble with the cellpadding on a "tab" on my page. I've got a div that has a table with a single cell inside it. The table is left justified in the div and has a black background. I can't give the table cell a fixed width because a word of variable length will appear inside it. The text in the cell appears aligned center and valigned middle, with 10 pixels of padding on the left and right sides. This appears exactly right in every browser but IE 6 on Windows, where the left and right padding is lost, and the word is bumped right up to the edge of the black table cell. How can I fix this? Thanks a lot. Here's the page: http://aoi2.keysandwings.com/about.php Here's the HTML: Code: <div class="relativetitle"">
<table class="titletable">
<tr>
<td align="center" valign="middle">About</td>
</tr>
</table>
</div>
And here's the CSS: Code: .relativetitle {
position: relative;
margin-left: auto;
margin-right: auto;
z-index: 1;
width: 682px;
height: 30px;
color: white;
background: transparent;
font-size: larger;
text-align: left
}
.titletable {
height: 100%;
padding-left: 10px;
padding-right: 10px;
background: black
}
In PHP I limit the heading to 35 characters. This works great and fits within the allocated width unless the heading is in all caps or mostly caps. I want to allow caps, but depending on how many are used will determine the over all width of the heading. I want to maintain constant width with Capital Letters in a table. I also don't want text used in a heading <p> to wrap, but by not wrapping it will continue beyond the borders of the cell and table. What I really need to do is cut off characters from the end if it goes beyond the border. How can I cut off the end of a sentence (heading) to kept the heading within assigned borders without it wrapping? This is the code I am experimenting with: Code: <html>
<head>
<title>Fixed widths</title>
<style type="text/css">
table {
table-layout:fixed;
width:613px;
}
td {
table-layout:fixed;
width:260px;
vertical-align:top;
text-align:center;
}
p {
white-space:nowrap;
}
</style>
</head>
<body>
<table border="1" cellpadding='0' cellspacing='10'>
<tr>
<td><p><strong>This heading can only have 35 chars</strong></p></td>
<td><p><strong>THIS HEADING CAN ONLY HAVE 35 CHARS</strong></p></td>
</tr>
</table>
</body>
</html>
Hi, Here is my problem: I have a horizontal css menu using a list. It is embedded within a table <td> element. The menu is floating to the left as I suppose is inteneded by the css code, but I want the whole list to be centered with respect to the <td> element. I put <td align=center> but that does not center the whole list. It is still flushed against the left side of the <td> element. Also, I want the entire list to cover the entire width of the <table>. How do I accomplish these tasks? I have searched on google without any success. thank you for your help in advance. Here is the CSS code and Html code for your reference: CSS: Code:
<style type="text/css">
.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 80px; /*Width of top level menu link items*/
#width: 95px;
_width: 95px;
padding: 2px 8px;
border: 0px solid #202020;
border-left-width: 0;
border-right-width: 0;
text-decoration: none;
/*background: url(http://asc2009.dreamhosters.com/menubg.gif) center center repeat-x;*/
color: white;
font: bold 13px Tahoma;
}
.horizontalcssmenu ul li a:visited{
color:white;
#color:white;
/*background: url(menubgover.gif) center center repeat-x;*/
}
.horizontalcssmenu ul li a:hover{
background: yellow;
color: blue;
#color: blue;
/*background: url(menubgover.gif) center center repeat-x;*/
}
HTML Code: Code: <table width="900" height="20" border="0" cellpadding="0" cellspacing="0" style="border-bottom:1px solid black;"> <tr> <td background="menubg.jpg" align="center"> <div class="horizontalcssmenu" align="center"> <ul> <li><a href="default.htm">Home</a></li> <li style="border-left:1px solid black"><a href="default.htm">About Us</a></li> <li style="border-left:1px solid black"><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Products</a></li> <li style="border-left:1px solid black"><a href="default.htm">Downloads</a></li> <li style="border-left:1px solid black"><a href="default.htm">Service</a></li> <li style="border-left:1px solid black"><a href="default.htm">Requests</a></li> <li style="border-left:1px solid black"><a href="default.htm">References</a></li> <li style="border-left:1px solid black"><a href="default.htm">What's New</a></li> <li style="border-left:1px solid black"><a href="default.htm">Contact Us</a></li> </ul> </div> </td> </tr> </table> Please visit my site where the menu is currently hosted. the url is http://asc2009.dreamhosters.com You will see my problem. You will notice when you hover your mouse over the last item in the menu, you will notice that the hover color does not go the whole way to the end of the td element. the list is flush to the left of the td element I need it to cover the whole width of the table. any help would be very much appreciated. please see following code. (i want myHeight becomes dynamis, that mean when user resize the browser, it will be changed automatic w/o refresh the page). thank you. waitting online for the answer. <html> <head> </head> <body > <table> <tr><td>tasd</td></tr> <tr><td> <script type="text/javascript"> var myWidth = 0, myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { //Non-IE myWidth = window.innerWidth; myHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode' myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { //IE 4 compatible myWidth = document.body.clientWidth; myHeight = document.body.clientHeight; } //var height = myHeight *.8; document.writeln("<div style='HEIGHT:" + myHeight *.8 + "; WIDTH:100%; OVERFLOW:auto'>"); //return height; </script> <table> <tr><td> msg </td></tr> </table> </div> <td> msg </td> </table> </body> </html> Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help. My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... |
|||||||