table宽度问题

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

<table  border="1"  height="100" width="500" bordercolor="#ccc" id="startId" >
       <thead>
               <tr>
                     <th>topicId</th>
                     <th>创建时间(北京)</th>
                     <th>测试类型</th>
                     <th>测试信息</th>
               </tr>
        </thead>
        <tbody id="tbMain"></tbody>
</table>

在请求数据的时候，在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数据
    }

<style>
  .mes_div{
        width: 100px;
    }
</style>

文章目录

原文链接: http://yoursite.com/2018/10/31/table宽度问题/

版权声明: 转载请注明出处.