CSS表格样式 - 试图提供更多空间

时间:2015-02-07 12:06:00

标签: html css coding-style

每个人的好日子,

我正在编写一个带有CSS和jQuery和PHP的Wordpress插件。

我有下表,我正在尝试修改CSS,但它似乎没有正确应用。我的表基本上看起来像:

|--------------------------------------------|
| Username:                                  |
|--------------------------------------------|
|                                            |
|--------------------------------------------|
|Email                                       |
|--------------------------------------------|
||------------------------------------------||
||Year  |   Month    |     Day              ||
||      |            |                      ||
||------------------------------------------||
|--------------------------------------------|

它真的都是浓缩的,我试图给它更多的空间,比如:

|--------------------------------------------|
|                                            |
| Username:                                  |
|                                            |
|--------------------------------------------|
|                                            |
|                                            |
|                                            |
|--------------------------------------------|
|                                            |
|Email                                       |
|                                            |
|--------------------------------------------|
||------------------------------------------||
||Year  |   Month    |     Day              ||
||      |            |                      ||
||------------------------------------------||
|--------------------------------------------|

当我执行以下CSS时:

.registration table td {
    border: 0;
    padding-bottom: 100px;
}

它改变了另一张桌子的“INSIDE”,但它并没有改变主表,任何人都可以帮助我,因为我需要造型比那更好......

<form id="registration" action="" method="POST">
    <table class="registration_table">
        <tbody>
            <tr id="reg_tablerow_1">
                <div class="regpage_text required" id="order_1">
                    <label for="username">Username: *</label>
                    <br>
                    <input id="username" name="username" value="" placeholder="Username" type="text">
                </div>
            </tr>
            <tr>
                <td>

                    <table>
                        <tbody>
                            <tr>
                                <td>Year</td>
                                <td>Month</td>
                                <td>Day</td>
                            </tr>
                            <tr>
                                <td>
                                    <select name="year" id="year">
                                        <option value="2015" selected="selected">2015</option>
                                        <option value="2014">2014</option>
                                    </select>
                                </td>
                                <td>
                                    <select name="month" id="month">
                                        <option value="1" selected="selected">January</option>
                                        <option value="2">February</option>
                                    </select>
                                </td>
                                <td>
                                    <select name="day" id="day">
                                        <option value="1" selected="selected">1</option>
                                        <option value="2">2</option>
                                    </select>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</form>

编辑更新

Brett回答是最接近正确的答案,但是如果仔细观察我的HTML,就会丢失一些TD,导致填充底部无效。

我必须检查我的脚本和我的所有HTML,才能意识到糟糕的复制/粘贴让我复制了一些信息而没有

2 个答案:

答案 0 :(得分:0)

您没有课程注册,但在表单上注册了身份证。

在表单中添加一个类或将css修改为

#registration table td {
border: 0;
padding-bottom: 100px;
}

答案 1 :(得分:0)

对于垂直中心使用此:

vertical-align: middle; Or bottom Or Top

对于水平中心,请使用此行:

text-align: center; Or left Or right 

高度问题使用:

height: 00px; & line-height: 00px;