table寬度一樣寬 table 寬度問題

2021-10-17 05:24:05 字數 1338 閱讀 8778

最近在做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資料

function getresultrow(h) {

console.log(h);

var row = document.createelement('tr'); //建立行

var idcell = document.createelement('td'); //建立第一列id

idcell.innerhtml = h.debug_info.topic_id; //填充資料

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;

jobcell = document.createelement('td');//建立第三列

jobcell.innerhtml = h.debug_info.type;

jobcell = document.createelement('td');//建立第四列

var mesdiv = document.createelement('div');

mesdiv.classname = 'mes_div'; #這裡新增div,並且設定div的class

mesdiv.innerhtml = h.debug_info.message;

jobcell = document.createelement('td');//建立第五列

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

div.innerhtml = h.debug_info.result;

return row; //返回tr資料

.mes_div{

width: 100px;

table寬度一樣寬 table自適應寬度

web應用的頁面,的表現形式是常常遇到的,在列數有限的前提下,如何將各列中的內容自適應到不同解析度的螢幕,這應該是乙個比較容易遇到的問題,下面就來談一談我對這類問題的解決與看法。將所有列設定為固定寬度,顯然是不能滿足此類要求的,但是若把全部的列都設定為百分比,恐怕在某些尺寸,或解析度下,會變得很難看...

CSS技巧!像table一樣布局div

下面是我翻譯的內容,是根據我對文章的理解意譯的,你就別挑 翻譯的不對了,我的目的只是傳達這個css技巧 先看看xhtml的結構 很簡單不用解釋就能看懂,但是這裡給出乙個table的結構,是不是很相似 下來是css equal row row div row one row two row three...

table設定列寬度

首先貼資料,相信大家看了基本就了解了 tablelayout 屬性用來顯示 單元格 行 列的演算法規則。固定 布局 固定 布局與自動 布局相比,允許瀏覽器更快地對 進行布局。在固定 布局中,水平布局僅取決於 寬度 列寬度 邊框寬度 單元格間距,而與單元格的內容無關。通過使用固定 布局,使用者 在接收...