css - HTML elements to fill the widths of their table cells, but with a small & consistent bit of padding around -
answered own question. here answer:
table, th, td { border:1px solid black; padding-left:4px; padding-right:4px; } input[type="text"], button, select { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } in webpage (source code below), several elements not fill widths of table cells: input text fields, grade selects, , insert button. desired result i each fill width of table cell, small bit of padding around it, delete button has around it.
i have tried various combinations of css styles, including 'width:100%', 'padding:2px', plus others. however, have have not been able obtain combination yield desired result. might know how can achieve desired result?
i using chrome version 33.0.1750.154 m, , html source code is:
<!doctype html> <html> <head> <meta charset='utf-8'> <title>presidential grade</title> <style> table, th, td { border:1px solid black; } fieldset { border-style:solid; border-color:red; display:inline-block; } legend { font-style:italic; text-align:center; font-weight:bold; } select { font-family:"lucida console", monaco, monospace; } </style> </head> <body> <form> <div> <fieldset> <legend> presidential grade </legend> <table> <tr> <th>action</th> <th> last name<span style='color:green;'> ▴ </span> </th> <th> first name </th> <th> grade<span style='color:green;'> ▴ </span> </th> </tr> <tr> <td><button>delete</button></td> <td> <input type='text' maxlength='20' size='7' value='adams'> </td> <td> <input type='text' maxlength='20' size='7' value='john'> </td> <td> <select> <option value='a'>a</option> <option value='b'>b</option> <option value='c'>c</option> <option value='d'>d</option> </select> </td> </tr> <tr style='background-color:#d0ffd0;'> <td><button>insert</button></td> <td style='display:none;'></td> <td> <input type='text' style='color:darkblue;' maxlength='20' size='7'> </td> <td> <input type='text' style='color:darkblue;' maxlength='20' size='7'> </td> <td> <select> <option value='a'>a</option> <option value='b'>b</option> <option value='c'>c</option> <option value='d'>d</option> </select> </td> </tr> </table> </fieldset> </div> </form> </body> </html>
any element direct child of td, make 100 percent wide:
td > * {width: 100%;} and add padding:
td {padding: 8px;}
Comments
Post a Comment