<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Checkable items examples</title> <style> .fixed_header{ width: 400px; table-layout: fixed; border-collapse: collapse; } .fixed_header tbody{ display:block; width: 100%; overflow: auto; height: 100px; } .fixed_header thead tr { display: block; } .fixed_header thead { background: black; color:#fff; } .fixed_header th, .fixed_header td { padding: 5px; text-align: left; width: 200px; } </style> </head> <body> <form> <fieldset> <legend>Choose all the vegetables you like to eat</legend> <ul> <li> <label for="carrots">Carrots</label> <input type="checkbox" checked id="carrots" name="carrots" value="carrots"> </li> <li> <label for="peas">Peas</label> <input type="checkbox" id="peas" name="peas" value="peas"> </li> <li> <label for="cabbage">Cabbage</label> <input type="checkbox" id="cabbage" name="cabbage" value="cabbage"> </li> <li> <label for="cauli">Cauliflower</label> <input type="checkbox" id="cauli" name="cauli" value="cauli"> </li> <li> <label for="broc">Broccoli</label> <input type="checkbox" id="broc" name="broc" value="broc"> </li> </ul> </fieldset> <fieldset> <legend>What is your favorite meal?</legend> <ul> <li> <label for="soup">Soup</label> <input type="radio" checked id="soup" name="meal" value="soup"> </li> <li> <label for="curry">Curry</label> <input type="radio" id="curry" name="meal" value="curry"> </li> </ul> </fieldset> <fieldset> <legend>What is your favorite mealff?</legend> <ul> <li> <label for="pizza">Pizza</label> <input type="radio" id="pizza" name="meal1" value="pizza"> </li> <li> <label for="tacos">Tacos</label> <input type="radio" id="tacos" name="meal1" value="tacos" checked> </li> <li> <label for="bolognaise">Bolognaise</label> <input type="radio" id="bolognaise" name="meal1" value="bolognaise"> </li> </ul> </fieldset> </form> <table class="fixed_header"> <thead> <tr> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> <th>Col 4</th> <th>Col 5</th> </tr> </thead> <tbody> <tr> <td>row 1-0</td> <td>row 1-1</td> <td>row 1-2</td> <td>row 1-3</td> <td>row 1-4</td> </tr> <tr> <td>row 2-0</td> <td>row 2-1</td> <td>row 2-2</td> <td>row 2-3</td> <td>row 2-4</td> </tr> <tr> <td>row 3-0</td> <td>row 3-1</td> <td>row 3-2</td> <td>row 3-3</td> <td>row 3-4</td> </tr> <tr> <td>row 4-0</td> <td>row 4-1</td> <td>row 4-2</td> <td>row 4-3</td> <td>row 4-4</td> </tr> <tr> <td>row 5-0</td> <td>row 5-1</td> <td>row 5-2</td> <td>row 5-3</td> <td>row 5-4</td> </tr> <tr> <td>row 6-0</td> <td>row 6-1</td> <td>row 6-2</td> <td>row 6-3</td> <td>row 6-4</td> </tr> <tr> <td>row 7-0</td> <td>row 7-1</td> <td>row 7-2</td> <td>row 7-3</td> <td>row 7-4</td> </tr> </tbody> </table> </body> </html>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more
