gpt4 book ai didi

javascript - 将元素装入表格单元格

转载 作者:太空宇宙 更新时间:2023-11-03 20:18:07 25 4
gpt4 key购买 nike

我正在尝试将 Canvas 元素放入一个完全没有填充的表格单元格中,即我不希望我的 Canvas 和单元格的顶部/底部之间没有边距。因此,我定义行高为 20px, Canvas 高度为 20px。我还使用 padding:0px 样式。但是,我只从顶部和左侧没有填充,我仍然在底部得到填充。事实上,表格单元格看起来会变高以适应不需要的边距。我该如何解决?

另外,在 HTML 和 CSS 中定义 Canvas 宽度和高度有什么区别?一个会覆盖另一个吗?

下面是我的 HTML 代码。谢谢。

<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<title>experiment</title>
<body>

<script>
$(function() {
var canvas = document.getElementById('my_canvas');
var ctx = canvas.getContext('2d');
ctx.fillRect(0,0,20,20);
$("#my_table > tbody > tr:eq(0) > td:eq(0)").append($("#my_canvas"));
})

</script>
</head>

<style media="screen" type="text/css">

.my_cell {height:20px; width:100px; padding:0}
.my_canvas {height:20px; width:20px}
</style>

<table id="my_table" border="1" cellspacing="0" cellpinserting="0">
<tbody>
<tr><td class="my_cell"></td></tr>
</tbody>
</table>

<canvas id="my_canvas" class="my_canvas" width="20" height="20"></canvas>

</body>
</html>

最佳答案

尝试将以下内容添加到 Canvas 的样式中:

display : block;

演示:http://jsfiddle.net/S7YJu/

如果你看一下这个你就会明白为什么:http://jsfiddle.net/S7YJu/1/ - 默认情况下, Canvas 显示 inline 这意味着它以一种方式排列,为字母底部留出空间,如“y”或“p”卡在下面......

关于javascript - 将元素装入表格单元格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16630180/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com