引导表 - 如何从表的第2列设置左边距？

Question

我是前端开发的新手，如果你能帮助我，我会很高兴。

我有一个自举表，我需要第二列在第一列的左边有80px的边距。

我尝试过以下方式实现这一点，但没有任何帮助：

HTML：

                  <table class="table table-hover modules-table" id="module-list-table">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Name</th>
                                        <th>Modified</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th scope="row">1</th>
                                        <td>Mark</td>
                                        <td>Otto</td>
                                        <td>@mdo</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">2</th>
                                        <td>Jacob</td>
                                        <td>Thornton</td>
                                        <td>@fat</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">3</th>
                                        <td colspan="2">Larry the Bird</td>
                                        <td>@twitter</td>
                                    </tr>
                                </tbody>
                            </table>

CSS：

#table-underline {
    border: 1px solid #2baab1;
    margin-top:12px;
}

.modules-table > tbody > tr > th ,.modules-table > tbody > tr > td {
    border-color:#ececef;
}

.modules-table  > tbody > tr > td:nth-child(2) {
    width:336px;
    margin-left:80px !important;
}

JSFiddle Link：https://jsfiddle.net/3hamc4b0/

我已经尝试过找到有关此问题的任何信息，但没有运气。

你能帮帮我吗？

Answer 1

正如Vincent G所提到的，你应该使用padding而不是margin。 但是，您可能应该将它应用于标题和正文：

.modules-table tr > *:nth-child(2) {
    padding-left: 80px;
}

现在，如果您没有“特定80px”条件，我建议您使用网格代替。为了以后的参考，我已经把它添加到了小提琴中。

更新了小提琴：https://jsfiddle.net/virginieLGB/3hamc4b0/3/

Answer 2

要使其有效，您可以使用padding-left代替margin-left，并调整td的宽度

See it here

.modules-table  > tbody > tr > td:nth-child(2) {
    width:256px;
    padding-left:80px;
}