how to add table on the svg without using foreignObject by d3?

Question

I am using the following a table

var table = svg.append("foreignObject")
.attr("y",0)
.attr("width", "100%")
.attr("height", "50%")
.append("xhtml:body")

table.append("table")

table.append('thead').append('tr')
  .selectAll('th')

  .data(scope.columns).enter()
  .append('th')
  .attr('class', function(d) {
    return d.cl;
  })
  .text(function(d) {
    return d.head;
  });

// append body rows
table.append('tbody')
  .selectAll('tr')
  .data(scope.movies).enter()
  .append('tr')
  .selectAll('td')
  .data(function(row, i) {
    // evaluate column objects against the current row
    return scope.columns.map(function(c) {
      var cell = {};
      d3.keys(c).forEach(function(k) {
        cell[k] = typeof c[k] == 'function' ? c[k](row, i) : c[k];
      });
      return cell;
    });
  }).enter()
  .append('td')
  .html(function(d) {
    return d.html;
  })
  .attr('class', function(d) {
    return d.cl;
  });  

This works perfectly in Chrome and firefox. In IE11 cannot display the table

As I see,foreignObject doesn't work on IE. How to do without using foreignObject ?

Any help is appreciated. (ps:I hope you don't mind my English,it's so bad.)