table宽度一样宽_table 宽度问题

最近在做table列表的时候，出现如果数据过多，导致列表的宽度越来越宽，后来在网上找了很多方法，通过在td里面添加div,通过设置div的宽度来解决。具体代码如下：

topicId创建时间(北京)测试类型测试信息

在请求数据的时候，在td里面添加div,设置div的宽度

function resultData1(data) {

var tbody = document.getElementById('resultMain');

for(var i = 0;i < data.length; i++){ //遍历一下json数据

var trow = getresultRow(data[i]); //定义一个方法,返回tr数据

tbody.appendChild(trow);

}

}

function getresultRow(h) {

console.log(h);

var row = document.createElement('tr'); //创建行

var idCell = document.createElement('td'); //创建第一列id

idCell.innerHTML = h.debug_info.topic_id; //填充数据

row.appendChild(idCell); //加入行 ，下面类似

var ddd = ""

if ("create_ts" in h.debug_info){

var ddd = formatTS2YYYYMMDDHHMMSS(h.create_ts.toString());

}

var nameCell = document.createElement('td');//创建第二列name

nameCell.innerHTML = ddd;

row.appendChild(nameCell);

jobCell = document.createElement('td');//创建第三列

jobCell.innerHTML = h.debug_info.type;

row.appendChild(jobCell);

jobCell = document.createElement('td');//创建第四列

var mesDiv = document.createElement('div');

mesDiv.className = 'mes_div'; #这里添加div，并且设置div的class

mesDiv.innerHTML = h.debug_info.message;

jobCell.appendChild(mesDiv);

row.appendChild(jobCell);

jobCell = document.createElement('td');//创建第五列

var div = document.createElement('div');

div.innerHTML = h.debug_info.result;

jobCell.appendChild(div);

row.appendChild(jobCell);

return row; //返回tr数据

}

.mes_div{

width: 100px;

}