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版面配置有沒有恢復正常，如果是在一段段註解程式碼來精準定位是那段程式碼影響的。）