Diskuze: Stylování tabulek v kontaktním formuláři vol.2

HTML a CSS HTML a CSS Stylování tabulek v kontaktním formuláři vol.2 American English version English version

Avatar
tbartolen
Člen
Avatar
tbartolen:

Tak jsem narazil hned na další problém....=) pořád jsem u stylování toho formuláře...Dal jsem pod sebe dvě tabulky, protože pokud bych to nechal v jedné, tak se mi v zavislosti na manualním zvětšování textarea bude rozjíždět celá tabulka. Problém ted je, že element <td> samozřejmě není stejný jako u tabulky nad tím...Dá se nějak nastavit závislost, aby ta druhá tabulka dědila velikosti té první? Inherit? jak s tím pracovat? Když napíšu pouze podruhé

td {width: inherit }

tak to nepujde, to je podle mě blbost. A další věc, pokud bych nastavil velikost napevno, jako to mám u input a textarea, tak by to mělo být v pořádku, ale co potom s media queries?

<form method="POST">
            <table>
                <tr>
                    <td>Vaše jméno</td>
                    <td><input name="jmeno" type="text" value="<?= htmlspecialchars($jmeno) ?>"/></td>
                </tr>
                <tr>
                    <td>Váš email</td>
                    <td><input name="email" type="email" value="<?= htmlspecialchars($email) ?>"/></td>
                </tr>
                <tr>
                    <td>Aktuální rok</td>
                    <td><input name="rok" type="number" /></td>
                </tr>
                <tr>
                    <td>Telefonní číslo</td>
                    <td><input name="cislo" type="number" /></td>
                </tr>

            </table>
            <!--<div class="zprava">-->
            <table>
                <tr>
                    <td>Vaše Zpráva</td>
                    <td><textarea name="zprava"><?= htmlspecialchars($zprava) ?></textarea></td>
                </tr>
            </table>

            <br />

            <input type="submit" value="Odeslat" />
             </div>
        </form>

CSS

/*stylování tabullky v emailu*/
form {
    width: 100%;
    }
    form p {
        text-align: center;
    }
table {
   /* float: left;´*/
    padding-left: 50px;
}
table, td  {
    border: 1px solid #000000;
    width: auto;
}
table td   {
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 10px;
    width: auto;

}
table input {
    width: 400px;
    height: 50px;
    border-radius: 2px;
    font-size: 25px;
}
Odpovědět 31.7.2015 16:53
Navštiv www.fb.com/skkelticz
Avatar
Fredep
Redaktor
Avatar
Odpovídá na tbartolen
Fredep:

Ahoj, vyzkoušej dát vše do jedné tabulky (ne do dvou) a textareře nastavit tuto vlastnost. Způsobí to, že bude roztažená naplno stejně jako ostatní inputy a budeš jí moct roztahovat jen vertikálně.

textarea {
    width: 100%;
    resize: vertical; /* Pouze vertikální změna rozměrů */
    /* Šířka elementu se bude brát podle celého elementu, ne podle obsahu. Jinak by to mírně vyčnívalo.  */
    webkit-box-sizing: border-box;
    moz-box-sizing: border-box;
    box-sizing: border-box;
}
Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
Nahoru Odpovědět 31.7.2015 19:44
Týmová práce je důležitá proto, aby bylo možno obvinit z neúspěchu někoho jiného.
Avatar
tbartolen
Člen
Avatar
Odpovídá na Fredep
tbartolen:

Paráda, děkuji moc, responzivitu jsem vyřešil pomocí posuvníku

.posuvniktabulky {
    max-width: 100%;
    overflow: auto;
}
Nahoru Odpovědět 31.7.2015 22:36
Navštiv www.fb.com/skkelticz
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.