Question

在这个小提琴中，我遇到了一张桌子的问题。我给每个td的第一个提供了一个.classname但是当我尝试使用CSS格式化它以调整宽度时，如果我放宽度：10px或宽度10000px，它不会有任何区别;到.class。我该怎么办？

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

Answer 2

您必须设置为table table-layout，所以：

table {table-layout: fixed}

或者，使用你的clasess：

.tableform {table-layout: fixed}

建议：请注意，您不需要为每个第一个td设置class，您可以使用:first-child：

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

使用嵌套CSS格式化<form>（jsfiddle示例）<table> </table> </form>

2 个答案: