简单HTML/JavaScript项目中的Twitching表

我正在学习一个简单的JavaScript拼图，你必须在棋盘上放置八个皇后，这样就不会有两个皇后互相攻击。下面是一个快照

问题：每当皇后被放置在一个未被占用的列中时，该列会抖动一两个像素。如何通过固定列宽来解决此问题？皇后图形的SVG图像明显小于60像素。我的CSS在下面

我应该也显示我的JavaScript和HTML文件吗？是我的谷歌硬盘17 KB上的文件

请注意，我可以将完整的项目上传到哪里并从那里运行/链接它吗

table {
    width: 480px;
    border-collapse: collapse;
}

tr {
    height: 60px;
}

td {
    width: 60px;
    border: 1px solid black;
    text-align: center;
    vertical-align: middle;
}

---

board和queen布局只能用jQuery和SVG编写。下面是一个没有皇后逻辑的简单示例，因此您可以在每个单元格上放置皇后

更新：2014年10月在IE9、Firefox和Chrome上测试

jQuery'svg'。单击'click'，函数e{ console.logx，y:，e.pageX'，，e.pageY； //确定最近正方形的位置，48px正方形的左上单元从坐标9,9开始， var cols=parseInte.pageX-9/48； var rows=parseInte.pageY-9/48； var单元id=cols+“”+行； 如果cols<8&&rows<8&&jQuery+cell\u id.length==0{ jQuery'cell_location'.text+cols+'，'+rows+； //在该单元格中插入图像 var queen=document.createElementshttp://www.w3.org/2000/svg使用 queen.setAttributesNull，id，cell_id； 刚毛皇后http://www.w3.org/1999/xlink，xlink:href，皇后； queen.setAttributesNull，x，cols*48+1； queen.setAttributesNull，y，行数*48+1； jQuery'svg'； } } 你好

---

添加HTML、CSS和JavaScript来单击Save和share链接看起来像是一个表CSS问题，通常我会在表中画一个图标，然后在单击时取消隐藏div queen。发布SVG解决方案后，有人想发布画布解决方案吗？