css - 使用table表格无端的整体向右偏移一段距离

Question

google控制台下移动到元素下出现对的box的

html：

<p class="home-message" id="viewmes">
    <table class="ev-show-title">
            <tr>
            <td class="ev-task-title">事件标题</td>
            <td class ="ev-memo-title">备注</td>
               <td class="ev-eventime-title">事件时间</td>
               <td class="ev-clocktime-title">闹钟时间</td>
            <td class="ev-neartime-title">闹钟还剩</td>
            <td class="ev-status-title">状态</td>
            <td class="ev-openrate-title">操作</td>
        </tr>
    </table>
</p>

css：

.home-message{
    height:285px;
    width:100%;
    margin:0 auto;
    border-width:1px;
    border-style: solid;
    border-color:#dbdee1;
    font-size: 11px;
}
.ev-show-title{
    color:#62adf9;
    font-weight:bold;
    border-collapse:collapse;
}
.ev-task-title,.ev-eventime-title,.ev-clocktime-title,.ev-neartime-title,.ev-status-title,.ev-openrate-title,.ev-memo-title{
    height:30px;
    border-width: 0px 1px 0px 0px;
    border-color:#dbdee1;
    border-style: solid;
    text-align:center;
}
td.ev-task-title{width:120px; }    
td.ev-memo-title{width:80px;display:none;}
td.ev-eventime-title{width:150px;}
td.ev-clocktime-title{width:120px;}    
td.ev-neartime-title{width:90px;}    
td.ev-status-title{width:50px;}
td.ev-openrate-title{width:81px;}

Answer 1

说一个思路

表格的布局算法有两种
一种是自适应算法 （影响因素较多，难控制）
一种是固定布局 （易控制， 使用繁琐）

Answer 2

上面的问题已经解决。我是因为在使用table元素之前的pcss式样影响了其布局。
心得：遇见这种问题网上查不到的问题。可先确认一下是不是上面的p的css式样导致table布局出现问题。(通过注释掉前面的代码，来确认table布局布局有没有恢复正常，如果是在一段段注释代码来精准定位是那段代码影响的。）