CSS 表格样式 - 尝试提供更多空间答案

【问题标题】：CSS Table Styles - Trying to give more spaceCSS 表格样式 - 尝试提供更多空间
【发布时间】：2015-02-07 12:05:59
【问题描述】：

大家好，

我正在用 CSS、jQuery 和 PHP 编写一个 Wordpress 插件。

我有下表，我正在尝试修改 CSS，但它似乎无法正确应用。我的桌子基本上是这样的：

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

这真的很浓缩，我试图给它更多的空间，比如：

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

当我执行以下 CSS 时：

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

它改变了“内部”另一个表的表，但它不会改变主表任何人都可以在我错的地方帮助我，因为我需要比这更好的样式......

<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，这会导致 padding-bottom 不起作用。

我不得不检查我的脚本和所有的 html，才意识到错误的复制/粘贴让我在没有复制一些信息的情况下复制了一些信息

【问题讨论】：

标签： html css coding-style

【解决方案1】：

您的表单上没有课程注册，但有一个 id 注册。

给表单添加一个类或者修改css到

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

【讨论】：

我会尽快调查这个布雷特。很快就会回复您
我会把你的答案标记为正确 Brett 因为你在我的例子中是对的我在调用类而不是 ID 方面犯了一个错误......但我也发现在我的脚本中我是到处都找不到我的正确标记...不过您的回答是正确的 - 谢谢

【解决方案2】：

对于垂直中心使用这个：

vertical-align: middle; Or bottom Or Top

对于水平中心使用这条线：

text-align: center; Or left Or right

对于身高问题使用：

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

【讨论】：

我不知道你在说什么......如果可以的话，我会否决你的答案。