How to style td with input button and text-size button?
Question
How to make <td> width exactly as input ok button and other input maximum width?And how to set text size of input's value="Ok" :
<div id="resourcelink">
<form method="POST" action="FeedController">
<table id="resource-link">
<tr>
<td><input type="text" id="resourcelink" name="sourceLink" /></td>
<td><input type="submit" name="linkSub" value="Ok" /></td>
</tr>
</table>
</form>
</div>
<body>
Css:
input#resourcelink {
width: 100%;
}
1 answers
solution1
0 ACCPTED 2015-06-24 23:02:04
Instead of <input type="submit"> , try using a <button> element. You'll find that it's easier to apply CSS styles to.
If you apply boz-sizing: border-box CSS rules to the form elements, then you can simply give them a width of 100% and they will fill the available space perfectly:
td.wide { width:300px; } td.narrow { width:100px; } input[type="text"] { font-size:1.5em; padding:0.25em; box-sizing: border-box; width:100%; } button[type="submit"] { font-size:1.5em; padding:0.25em; box-sizing: border-box; width:100%; }
<div> <form> <table id="resourcelink"> <tr> <td class="wide"><input type="text" /></td> <td class="narrow"><button type="submit">OK</button></td> </tr> <tr> <td style="background-color:#fa0; height:10px;"></td> <td style="background-color:#46f; height:10px;"></td> </tr> <tr> <td colspan="2">(The coloured bars are just here to illustrate the column sizes.)</td> </tr> </table> </form> </div> <body>
(Note: border-box rules are supported in all modern browsers , but if you want to support older browsers then you'll have to include workarounds.)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.