Geek Answers Handbook

Formatting a <form> with nested <table> CSS (jsfiddle example)

In this script, I have a problem with the table. I gave a .classname for the first of each td, but when I tried to format it using CSS to adjust the width, it doesn’t matter if I set the width: 10 pixels or 10,000 pixels wide; for class. What can I do?

http://jsfiddle.net/zRpgB/

CSS

       .dayform        { margin-left:20px;}
        .tableform      { width:200px;}
        .tableformleft  { width:10px; }
        .dayform input  { width:200px;}
        .txtarea        { width:200px;}
        .submit {}

HTML

    <form action="tage.php?<?php echo('d=' . $d . '&amp;m=' . $m . '&amp;y=' . $y); ?>" method="post" class="dayform">
        <!--  accept-charset="UTF-8" -->
        <fieldset>
            <legend>Termin hinzufügen</legend>
            <table class="tableform">

                <tr>
                    <td class="tableformleft">Datum: </td>
                    <td><input name="date" type="text" size="30" maxlength="30" value="<?php echo $date; ?>"></td>
                </tr>
                <tr>
                    <td class="tableformleft">Uhrzeit: </td>
                    <td>
                        <select name="hours" size="1">

                            <?php
                            for ($hr = 0; $hr <= 23; $hr++) {
                                echo ('<option value="' . $hr . '"');
                                if ($hr === $h) {
                                    echo(" selected");
                                }
                                echo ('>' . $hr . '</option>' . "\n");
                            }
                            ?>

                        </select>
                        :
                        <select name="min" size="1">
                            <option value="00">00</option>
                            <option value="10">10</option>
                            <option value="15">15</option>
                            <option value="20">20</option>
                            <option value="30">30</option>
                            <option value="40">40</option>
                            <option value="45">45</option>
                            <option value="50">50</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td class="tableformleft">
                        Titel
                    </td>
                    <td>
                        <input name="titlefield" type="text" size="30" maxlength="30" value="">
                    </td>
                </tr>
                <tr>
                    <td class="tableformleft">
                        Kurze Beschreibung
                    </td>
                    <td class="tableformleft">
                        <input name="short" type="text" size="30" maxlength="30" value="">
                    </td>
                </tr>
                <tr>
                    <td class="tableformleft">
                        Ort
                    </td>
                    <td>
                        <input name="location" type="text" size="30" maxlength="30" value="">
                    </td>
                </tr>

                <tr>
                    <td class="tableformleft">Lange Beschreibung</td>
                    <td><textarea name="description" cols="50" rows="10" class="txtarea"></textarea></td>
                </tr>

                <tr>
                    <td class="tableformleft"><input type="submit" value=" Absenden " class="submit"></td>
                    <td><input type="reset" value=" Abbrechen" class="reset"></td>
                </tr>

            </table>

        </fieldset>
    </form>
+4
source share
2 answers

You have to set the table-layout table, therefore:

table {table-layout: fixed}

OR using your class:

.tableform {table-layout: fixed}

Tip: note that you do not need to install classfor every first td, you can use :first-child:

.tableform td:first-child {width: 10px;}
+1
source

try the following:

CSS

.tableform      { width:100%;table-layout:fixed;}
.tableformleft  { width:100px; }

jsfiddle

+2
source

More articles:


All Articles