Form input text boxes don't fill table cells 2

Glasgow · Apr 12, 2005

The code below is driving me mad. I've tried so many iterations & combinations without success. What I want to achieve is a table that occupies the full width of the blue background then columns that are sized as a percentage of the table width (I've tried CSS and in-line). Within each column I want the input boxes to fill the full width of the column. I am unable to either:
a) Get the table columns the preferred width
b) Make input boxes full width of the column.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<style>
html                { margin:0; padding:0; border:none; }
body                { margin:0; padding:0; border:none;
                      font-family:Verdana, Arial, Helvetica, sans-serif; font-size:8.5pt;}
div.PnlQuote        { background-color:rgb(199,220,239); margin-left:130px; }


input.RowCol2       { font-family: verdana; font-size: 8.5pt; width=100%; }
input.RowCol3       { font-family: verdana; font-size: 8.5pt; width=100%; text-align:right; }
input.RowCol4       { font-family: verdana; font-size: 8.5pt; width=100%; }
input.RowCol5       { font-family: verdana; font-size: 8.5pt; width=100%; }
input.RowCol6       { font-family: verdana; font-size: 8.5pt; width=100%; }

</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test table</title>
</head>

<body>
<div class="PnlQuote">
  <table>
    <tr><td width="2%"></td>
       <td width="15%">Date</td>
       <td width="40%">Description</td>
       <td width="20%">Ref</td>
       <td width="15%">Amount</td>
       <td width="8%">Buy?</td>
    </tr>
    <tr>
    <td>1</td>
    <td><input type=text class="RowCol2" name="EqpDate"></td>
    <td><input type=text class="RowCol3" name="EqpDesc"></td>
    <td><input type=text class="RowCol4" name="EqpSerNo"></td>
    <td><input type=text class="RowCol5" name="EqpSiAmount"></td>
    <td><input type=checkbox class="RowCol6" name="Eqp2ndHand"</td>
    <tr>
    <td>2</td>
    <td><input type=text class="RowCol2" name="EqpDate"></td>
    <td><input type=text class="RowCol3" name="EqpDesc"></td>
    <td><input type=text class="RowCol4" name="EqpSerNo"></td>
    <td><input type=text class="RowCol5" name="EqpSiAmount"></td>
    <td><input type=checkbox class="RowCol6" name="Eqp2ndHand"</td>
    </tr>
  </table>
</form>
</div>


</body>
</html>

Any help would be appreciated. Thanks.

Vragabond · Apr 12, 2005

There's no such thing as width=100% in CSS. Try

Code:

width: 100%;

Glasgow · Apr 12, 2005

Oh my g*d! What a moron (me that is). That's been staring me in the face and I just couldn't see it. By making that change and setting the table's width to 100%, I have more or less got the required result.

That's what I get for using wordpad to edit. Might Visual Interdev or Frontpage (or Dreamweaver) picked up such a dumb typo?

Thank you so much. Star duly earned.

FesterSXS · Apr 12, 2005

also - your <style></style> tags should be within your <head></head> tags

Tony
[red]_________________________________________________________________[/red]
Webmaster -

http://www.SpiraxSarco.com/

Glasgow · Apr 12, 2005

Actually I'm doing most of the formatting within an external sheet. This example is just a compact version of the real problem and my intention was to sort it all out once I'd resolved the basic problem.

ChrisHunt · Apr 12, 2005

Might Visual Interdev or Frontpage (or Dreamweaver) picked up such a dumb typo?

Don't know, but the CSS Validator at

http://jigsaw.w3.org/css-validator/

would have.

Incidentally, you shouldn't need to declare a class for each of those [tt]<input>[/tt]s, just one for the one that needs to be right-aligned. Then you can just do this:

Code:

. PnlQuote input { font-family: verdana; font-size: 8.5pt; width: 100%; }
input.RowCol3 { text-align:right; }

Obviously you'd give the class a more meaningful name, like "numeric" or something.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Glasgow · Apr 12, 2005

Good link, thanks Chris.

I still have much to learn about CSS and appreciate that there are ways I could compact. I did have more meaningful names but simplified for the example.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Form input text boxes don't fill table cells 2

Glasgow

IS-IT--Management

Vragabond

Programmer

Glasgow

IS-IT--Management

FesterSXS

Programmer

Glasgow

IS-IT--Management

ChrisHunt

Programmer

Glasgow

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor