将元素装入表格单元格答案

【问题标题】：Fitting element into table cell将元素装入表格单元格
【发布时间】：2013-05-13 20:52:06
【问题描述】：

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

另外，在 HTML 和 CSS 中定义画布宽度和高度有什么区别？一个会覆盖另一个吗？

下面是我的 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>

【问题讨论】：

一般情况下，width 和 height HTML 属性在 HTML5 中已被弃用，我认为甚至更早。简而言之，我认为这仅仅是因为样式是 CSS 的工作。但是，由于向后兼容性是 HTML5 的主要目标之一，您仍然可以使用它们……如果我没记错的话，它们将被 CSS 覆盖。
@Derija93：我试图删除 HTML 宽度/高度，但它停止工作。所以看起来他们是需要的。仍然不清楚 CSS 对画布做了什么。
一般来说。看看 w3 学校的web reference on the canvas element。显然，您的画布元素尤其需要这两个属性来了解其视口宽度和高度。我猜它需要在 HTML 中指定这些，因为否则它无法访问 CSS 中设置的尺寸。使用调试器，当这两个属性被删除时，HTML 元素本身仍然是 20x20，而绘制的黑色矩形被缩小到最小。

标签： javascript html css canvas css-tables

【解决方案1】：

尝试将以下内容添加到画布的样式中：

display : block;

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

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

【讨论】：

【解决方案2】：

尽管您的问题已经得到解答，但我想指出以下几点。

尽管看起来像block level elements，但画布元素的处理方式与内联元素非常相似，类似于an image element is treated。要解决您的问题，您必须将画布的样式规则 display 设置为 block。

出于好意，我想给你一些建议：

1 您省略了开头的正文标记。

2 建议将脚本标签放在底部。

4 尽可能使用 div 代替表格元素。

5 你并不总是使用 Jquery 选择器...

即

document.getElementById('my_canvas');

复制->

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
  .my_cell {width:100px; }
  .my_canvas {display: block;height:20px; width:20px; background-color: red}
</style>
</head>
<body>
  <table id="my_table" border="1" cellspacing="0" cellpinserting="0" cellpadding="0">
     <tbody>
        <tr>
           <td class="my_cell"></td>
        </tr>
     </tbody>
  </table>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
  <script>
     $(document).ready(function () {
        $(".my_cell").html('<canvas class="my_canvas" width="20" height="20"></canvas>');
            });

       var canvas = $('.my_canvas');
       var ctx = canvas.getContext('2d');    
       ctx.fillRect(0,0,0,20,20);
  </script>
</body>
</html>

【讨论】：