JQuery - 如何让我的表中的单元格的宽度和高度设置一个？

-1

每次运行程序时，表格中的单元格的大小都会根据字母的大小而有所不同。我已经摆弄CSS但没有运气，任何人都可以帮忙吗？JQuery - 如何让我的表中的单元格的宽度和高度设置一个？

var listOfWords = ["mat", "cat", "dog", "pit", "pot", "fog", "log", "pan", "can", "man", "pin", "gag", "sat", "pat", "tap", "sap", "tag", "gig", "gap", "nag", "sag", "gas", "pig", "dig", "got", "not", "top", "pop", "god", "mog", "cot", "cop", "cap", "cod", "kid", "kit", "get", "pet", "ten", "net", "pen", "peg", "met", "men", "mum", "run", "mug", "cup", "sun", "mud", "rim", "ram", "rat", "rip", "rag", "rug", "rot", "dad", "sad", "dim", "dip", "did", "mam", "map", "nip", "tin", "tan", "nap", "sit", "tip", "pip", "sip", "had", "him", "his", "hot", "hut", "hop", "hum", "hit", "hat", "has", "hug", "but", "big", "bet", "bad", "bad", "bed", "bud", "beg", "bug", "bun", "bus", "bat", "bit", "fit", "fin", "fun", "fig", "fan", "fat", "lap", "lot", "let", "leg", "lit"]; 

var shuffledWords = listOfWords.slice(0).sort(function() { 
    return 0.5 - Math.random(); 
    }).slice(0, 12); 

var tbl = document.createElement('table'); 
    tbl.className='tablestyle'; 
    var wordsPerRow = 2; 


for (var i = 0; i < shuffledWords.length; i += wordsPerRow) { 
    var row = document.createElement('tr'); 

for (var j=i; j < i + wordsPerRow; ++ j) { 
    var word = shuffledWords[j]; 

    for (var k = 0; k < word.length; k++){ 
     var cell = document.createElement('td'); 


     cell.textContent = word[k]; 
     // IF FIREFOX USE cell.textContent = word[j]; INSTEAD 
     row.appendChild(cell); 
     } 
    } 
    tbl.appendChild(row);  
} 

document.body.appendChild(tbl);

来源

2012-07-13 m0onio

所以，如果你设置的TD的为什么是行不通的宽度和高度？你希望完成什么？ – jeschafe 2012-07-13 14:38:28

如果我做的TD的宽度和高度，它确实工作，但某些字母如M伸展整个列。我尝试过字体大小，但是@jeschafe – m0onio 2012-07-13 14:49:38

你有与MIN-搞砸宽度，最大宽度和字母间距设置？在这里，我将它设置为42px（只是任意的），并将所有列设置为相同。我相信你可能会使用这个组合来达到你想要的效果。（我不确定宽度是否应该是动态的），所以这是你可以玩的东西。这里只是修改后的演示。

DEMO

来源

2012-07-13 15:33:36 jeschafe

我已经与CSS，但没有运气周围拨弄......

这正是CSS是。这里有一个例子：Live copy | source

CSS：

#target td { 
    width: 3em; 
}

HTML：

<table id="target"> 
    <tbody> 
    <tr> 
     <td>one</td> 
     <td>two</td> 
     <td>three</td> 
    </tr> 
    <tr> 
     <td>four</td> 
     <td>five</td> 
     <td>six</td> 
    </tr> 
    </tbody> 
</table>

（你是动态生成内容这一事实无关紧要。）

来源

2012-07-13 14:38:57

@ m0onio也没有区别：因为你已经告诉浏览器使每个单元的宽度为372px，而在可用区域它不能这样做，所以它忽略你尽最大努力使事情顺利进行。选择器'table，td'的意思是“将此样式应用于所有'table'元素，并应用于所有'td'元素。”与'table td'相反，意思是“将它应用于'table'元素内的所有'td'元素。 – 2012-07-13 15:06:54

你会建议我怎么做？ @ T.J。 Crowder – m0onio 2012-07-13 15:11:16

@ m0onio：使单元具有合理的大小，并且不要让浏览器使表格和单元格的宽度相同，因为这没有意义（除非表格每行只有一个单元格）。你有六个牢房。你已经告诉浏览器每个应该是372px宽。所以你已经告诉它在372像素宽的表格内放置2,232个像素（六个单元）。不要这样做。 :-)从样式中分离出适用于'table'的样式以应用到'td'元素。（提示：如果你有六个单元格，并且你想让它们填满表格，除非你有边框，否则每个单元格的宽度为16.7％。） – 2012-07-13 15:25:14

JQuery - 如何让我的表中的单元格的宽度和高度设置一个？

回答

相关问题