Setting the width according to maxlength attribute

HTML & CSS
1

hey folks,
i have a form and i have set wid maxlength of input type to different size like 20 or 30. but now i wanna set the width of that td with css. according to maxlength 20. so it doesn’t wrap. how can i manage that?

2

it’s probably straight forward, but what td are you referring to ??

post some code.

3

image this field


<table>
	<tr>
    	<td><input type="text" maxlength="20" /></td>
   </tr>
</table>

now this is front end. now from database imagine the length is set to 20 too meaning it won’t insert any word more than 20 characters long. now i wanna pull that in that td. so i want to set the td width that can only show 20 characters long sentence and no wrap

4 
 
<input type="text" name="myInp" size="20" maxlength="20" />

sets the size and maxlength to 20 in the <input> which I think is what you are after.

5

You’d probably put a fixed width on the TD than would accommodate at least 20 em albeit since you’ve set a maximum of 20 on the input anyway. You already know you’ll get a maximum output of 20 so the TD must be equal or greater to 20 characters taking one character at approximately 1 em.

Assuming you didn’t mean the INPUT box itself like Kalon mentioned, which ‘size’ sets the suggested number of characters for text - which is a ‘good bet’ on what you were actually after.

6

so i want to set the td width that can only show 20 characters long sentence and no wrap

Sounds like you need to set the width of the td to match the width of the input. Set the input width in pixels (or ems) rather than the size attribute so you know exactly how wide it will be. Then set the td to be the same size as that width but that means the table will need to be in table-layout:fixed mode to apply widths consistently.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
table {
    table-layout:fixed;
}
td {
    width:146px;
    border:1px solid #000;
}
</style>
</head>
<body>
<table>
    <tr>
        <td><input type="text"  /></td>
    </tr>
    <tr>
        <td><p>text that will wrap at the same width as the input length</p></td>
    </tr>
</table>
</body>
</html>

Or perhaps you mean something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
td {
    width:1px;
    border:1px solid #000;
}
</style>
</head>
<body>
<table>
    <tr>
        <td><div>
                <input type="text" size="20"  />
            </div>
            <p>text that will wrap at the same width as the input length</p></td>
    </tr>
</table>
</body>
</html>