Bootstrap 表格 - 如何设置表格第二列的左边距？答案

【问题标题】：Bootstrap tables - How to set a left margin from the 2nd column of the table?Bootstrap 表格 - 如何设置表格第二列的左边距？
【发布时间】：2016-07-25 11:31:25
【问题描述】：

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

我有一个引导表，我需要第二列在第一列的左边距为 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 链接：https://jsfiddle.net/3hamc4b0/

我已尝试查找有关此问题的任何信息，但没有成功。

你能帮帮我吗？

【问题讨论】：

首先，第一个“tr”中有 5 列，其他有 4 列。您想将边距添加到哪一列？姓名？
我被要求从左边添加 80px 边距的列是名为“名称”的第二列
好的。为什么它必须正好是 80 像素？
因为这是我的 UX 设计师和老板的要求。

标签： html css twitter-bootstrap html-table

【解决方案1】：

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

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

现在，如果您没有“特别是 80 像素”的条件，我会建议您改用网格。以防万一，为了将来参考，我在小提琴中添加了它。

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

【讨论】：

【解决方案2】：

要使其正常工作，您可以使用 padding-left 代替 margin-left 并调整 td 的宽度

See it here

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

【讨论】：