html - 使用嵌套的 <table> CSS 格式化 <form>(jsfiddle 示例)

Question

在这个 fiddle 中，我有一张 table 的问题。我给每个 td 的第一个.classname，但是当我尝试用 CSS 格式化它以调整宽度时，如果我输入 width:10px 或 width 10000px，它没有任何区别；上课。我能做什么？

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>

Answer 1

试试这个:

CSS:

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

jsfiddle