Removing space between table doesn't seem to be working

Question

I've got a grid that I want to be as absolute as possible; preferably with 1px between each td. My issue though is that seemingly nothing I do reduces the space between the td or evens the larger space between tr.

When you click Update Preview in my code the desired result should be even spacing between the td; I want the td to have the same size as the canvases. Here's a JSFiddle中设置会话onClick，以及我的代码：

修正了片段：

＆＃13;

＆＃13;

var canvas = [];
canvas.push(new fabric.Canvas('c0'));
for (i = 1; i <= 7; i++) {
  canvas.push(new fabric.StaticCanvas('sc' + i));
}

var rect = new fabric.Rect({
  fill: '#F5F5F5',
  width: 187.5,
  height: 318.75
});

canvas[0].add(rect);

$('#update').click(function() {
  var json = JSON.stringify(canvas[0]);
  for (i = 1; i <= 7; i++) {
    canvas[i].loadFromJSON(json);
  }
});

$('#save').click(function() {
  html2canvas($('#imagesave'), {
    onrendered: function(canvas) {
      var a = document.createElement('a');
      // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
      a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
      a.download = 'myfile.jpg';
      a.click();
    }
  });
});

＆＃13;

body {
  margin: 0px;
  padding: 0px;
}

canvas {
  border: 0px solid #f00;
  margin: 0px;
  display: block;

}

td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
}

#imagesave {
  background-color: white;
  height: 637.5px;
  width: 825px;
  padding-left: 75px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<button id="update">Update Preview</button>
<button id="save">Save</button>


<div id="imagesave">

  <table>
    <tr>
      <td>
        <canvas id="c0" width="187.5" height="318.75"></canvas>
      </td>
      <td>
        <canvas id="sc1" width="187.5" height="318.75"></canvas>
      </td>
      <td>
        <canvas id="sc2" width="187.5" height="318.75"></canvas>
      </td>
      <td>
        <canvas id="sc3" width="187.5" height="318.75"></canvas>
      </td>
    </tr>
    <tr>
      <td>
        <canvas id="sc4" width="187.5" height="318.75"></canvas>
      </td>
      <td>
        <canvas id="sc5" width="187.5" height="318.75"></canvas>
      </td>
      <td>
        <canvas id="sc6" width="187.5" height="318.75"></canvas>
      </td>
      <td>
        <canvas id="sc7" width="187.5" height="318.75"></canvas>
      </td>
    </tr>
  </table>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试添加：

canvas {
  display: block;
}