Question

我试图在我的表格中设置一些轻量级填充左侧和填充右侧，但它似乎只在我在编辑器中弄乱它时才会响应。当我第一次加载页面时，Chrome控制台区域中的Computed标签似乎会确认我的td周围有填充但不显示它，并将数据直接对准其边框，甚至允许最后一个数据字符出现在＆＃34;下面＆＃34;如果列标题不比单元格内容宽（在下面的＃1中显示），则为其自己的边框。

但是当我取消选中样式css元素以禁用它时，然后重新检查它，填充样式将按预期显示。知道发生了什么吗？

1。初始加载

2。取消选中任何填充样式框

第3。重新检查框后，根据需要显示表格单元格

我注意到在Chrome控制台显示的CSS样式选项卡中，我正在与其中一个Bootstrap CSS样式规则（图示为td, th）竞争。但是这两个规则都存在并且在表的初始加载中完全（不是灰色）。

如何让它看起来像最终载荷上的第3张图片？

下面的表HTML示例：

<table class="appDataTable projDataTable">
            <tbody>
  <tr class="appTableHeaderRow">
                <th>latitude</th>
                <th>longitude</th>
                <th>date</th>
                <th>animalid</th>
                <th>deleted</th>
                <th>uploaded_by</th>
                <th>date_added</th>
            </tr>
                <tr class="appTableContentRow">
                        <td>-12.293057</td>
                        <td>141.959796</td>
                        <td>2012-09-08 22:01:05</td>
                        <td>662572</td>
                        <td>FALSE</td>
                        <td>Mary</td>
                        <td>2017-08-10 17:18:40</td>
                </tr>
                <tr class="appTableContentRow">
                        <td>-12.29293</td>
                        <td>141.959675</td>
                        <td>2012-09-09 22:00:56</td>
                        <td>662572</td>
                        <td>FALSE</td>
                        <td>Tim</td>
                        <td>2017-08-10 17:18:40</td>
                </tr>
                <tr class="appTableContentRow">
                        <td>-12.292628</td>
                        <td>141.962028</td>
                        <td>2012-09-10 22:09:10</td>
                        <td>662572</td>
                        <td>FALSE</td>
                        <td>nhanak</td>
                        <td>2017-08-10 17:18:40</td>
                </tr>
                <tr class="appTableContentRow">
                        <td>-12.303615</td>
                        <td>141.96486</td>
                        <td>2012-09-11 22:00:35</td>
                        <td>662572</td>
                        <td>FALSE</td>
                        <td>Mike</td>
                        <td>2017-08-10 17:18:40</td>
                </tr>
        </tbody></table>

我写的表格的所有相关CSS：

.tableRawData {
    overflow-x: auto;
    white-space: nowrap;
    table-layout: fixed;
}

.tableBoxProjDataWS {
    max-height: 900px;
    overflow-y: scroll;
}

.projDataTable td {
    padding-left: 1%;
    padding-right: 1%;
}



.appDataTable {
    text-align: center;
    width: 95%;
    border-radius: 7px;
}

.appTableHeaderRow th {
    background-color: rgba(6, 47, 55, .9);
    text-transform: uppercase;
    text-align: center;
    font-size: 1.1em;
    border: 3px solid white;
    border-radius: 7px;
    height: 20px;
}

.appDataTable tr td {
    border: 3px solid white;
}

当我取消选中时，填充样式会响应，然后在控制台中重新检查样式框

0 个答案: