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

Tell me an idea

There are two table layout algorithms
One is adaptive algorithm (more influencing factors, difficult to control)
One is fixed layout (easy to control, cumbersome to use)

Answer 2

The above problem has been solved. My reason is that the pcss style before using the table element affects its layout.
Experience: When I encounter this kind of problem, I can’t find it online. You can first confirm whether the css style of p above causes problems with the table layout. (Comment out the previous code to confirm whether the table layout has returned to normal. If you comment out the code section by section, you can accurately locate the impact of that section of code.)