-1

每次我运行程序时，表格中的单元格的大小都会根据其中的字母而有所不同。我一直在摆弄 CSS，但没有运气，有人可以帮忙吗？ 

 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);
4

2 回答 2

1

您是否弄乱了最小宽度、最大宽度和字母间距设置？在这里，我将其设置为 42px（只是任意的），并将所有列设置为相同。我相信你也许可以结合使用它来实现你想要的。（我不确定宽度是否也应该是动态的）所以这是你可以玩的。这里只是修改后的演示。

演示

于 2012-07-13T15:33:36.643 回答
0

我已经摆弄了CSS，但没有运气......

这正是 CSS 的用途。这是一个示例：Live copy | 来源

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-13T14:38:57.647 回答