如何在Bootstrap中为Table标签填充？

Question

在我使用twitter bootstrap的项目中，我需要为Table标记提供填充或边距。 所以我编写了这样的代码：

＆＃13;

＆＃13;

#table-parent {
    padding-top: 50px;     /* <---- Padding that moved down the hole Table */
}


td {                                          /*****************************/
    padding: 10px;                            /*****************************/
    text-align: center;                       /**** JUST THE CSS STYLES ****/
    border-left: 1px #575757 solid;           /****    NOT IMPORTANT    ****/
    border-right: 1px #575757 solid;          /*****************************/
}                                             /*****************************/
                                              /****       OPTIONAL      ****/
                                              /*****************************/
tr:nth-child(1) {                             /*****************************/
    background: silver;                       /*****************************/
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="table-parent">
    <table class="table table-striped">
        <tr>
            <td>Title 1</td>
            <td>Title 2</td>
            <td>Title 3</td>
        </tr>

        <tr>
            <td>Value A</td>
            <td>Value B</td>
            <td>Value C</td>
        </tr>

        <tr>
            <td>Value AA</td>
            <td>Value BB</td>
            <td>Value CC</td>
        </tr>
    </table>
</div>

＆＃13;

＆＃13;

＆＃13;

您看到我填充div的父table。 但我不喜欢这个...... 我想直接填充table标签。像这样：

＆＃13;

＆＃13;

table {
  padding-top: 50px;
}



td {                                          /*****************************/
    padding: 10px;                            /*****************************/
    text-align: center;                       /**** JUST THE CSS STYLES ****/
    border-left: 1px #575757 solid;           /****    NOT IMPORTANT    ****/
    border-right: 1px #575757 solid;          /*****************************/
}                                             /*****************************/
                                              /****       OPTIONAL      ****/
                                              /*****************************/
tr:nth-child(1) {                             /*****************************/
    background: silver;                       /*****************************/
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped">
    <tr>
        <td>Title 1</td>
        <td>Title 2</td>
        <td>Title 3</td>
    </tr>

    <tr>
        <td>Value A</td>
        <td>Value B</td>
        <td>Value C</td>
    </tr>

    <tr>
        <td>Value AA</td>
        <td>Value BB</td>
        <td>Value CC</td>
    </tr>
</table>

＆＃13;

＆＃13;

＆＃13; 但这不起作用。你能帮忙吗？

Answer 1

如果您想对padding使用table，则应在其上设置border-collapse: separate;。

table {
  padding-top: 50px;
  border-collapse: separate!important;
}



td {                                          /*****************************/
    padding: 10px;                            /*****************************/
    text-align: center;                       /**** JUST THE CSS STYLES ****/
    border-left: 1px #575757 solid;           /****    NOT IMPORTANT    ****/
    border-right: 1px #575757 solid;          /*****************************/
}                                             /*****************************/
                                              /****       OPTIONAL      ****/
                                              /*****************************/
tr:nth-child(1) {                             /*****************************/
    background: silver;                       /*****************************/
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped">
    <tr>
        <td>Title 1</td>
        <td>Title 2</td>
        <td>Title 3</td>
    </tr>

    <tr>
        <td>Value A</td>
        <td>Value B</td>
        <td>Value C</td>
    </tr>

    <tr>
        <td>Value AA</td>
        <td>Value BB</td>
        <td>Value CC</td>
    </tr>
</table>

Answer 2

使用margin-top: 50px;代替padding-top: 50px;

＆＃13;

＆＃13;

table {
  margin-top: 50px;
}



td {                                          /*****************************/
    padding: 10px;                            /*****************************/
    text-align: center;                       /**** JUST THE CSS STYLES ****/
    border-left: 1px #575757 solid;           /****    NOT IMPORTANT    ****/
    border-right: 1px #575757 solid;          /*****************************/
}                                             /*****************************/
                                              /****       OPTIONAL      ****/
                                              /*****************************/
tr:nth-child(1) {                             /*****************************/
    background: silver;                       /*****************************/
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped">
    <tr>
        <td>Title 1</td>
        <td>Title 2</td>
        <td>Title 3</td>
    </tr>

    <tr>
        <td>Value A</td>
        <td>Value B</td>
        <td>Value C</td>
    </tr>

    <tr>
        <td>Value AA</td>
        <td>Value BB</td>
        <td>Value CC</td>
    </tr>
</table>

＆＃13;

＆＃13;

＆＃13;