Even putting the table inside a div I can not set margin

Question

Even putting the table inside a div I can not set margin

Navigation

#1 by (1 votes)

1

I put a table inside a file .html

<!DOCTYPE html>
<html>
    <link href="StyleMain.css" rel="stylesheet" type="text/css"/>
    <div id="tableDiv">
        <table border="0" width="100%">
            <tbody>
                <tr>
                    <td width="40%" class="infoView" id="torrentNameInf">Filmão</td>
                    <td width="15%" align="center" class="infoView">Filme Bem loko</td>
                    <td width="10%" align="center" class="infoView">1059</td>
                    <td width="10%" align="center" class="infoView">2159</td>
                    <td width="5%" align="center" class="infoView"><img id="downButton" src="images/downButton.png"/></td>
                </tr>
            </tbody>
        </table>
    </div>
</html>

And within StyleMain.css I put

#tableDiv {
    margin-bottom: 10px;
}

And when I call the .html

$.post('linha.html', function (html) {
    for(var i=0; i<25; i++) {
        $('#baseTorrent').append(html);
    }
});

It does not create the space between divs

javascript html

asked by anonymous 17.01.2017 / 19:43

1 answer

How to make the chart start on the y-axis through ggplot? Using model annotations for C #

score 1 · Accepted Answer

I created a CodePen to demonstrate that it is only necessary to insert the code block into the page, without needing to add lots of <html> tags.

link

For better visualization I also added the snippet:

// apenas simulando o que deveria ser recebido por ajax
var template = [
  '<div class="table-container">',
    '<table border="0" width="100%">',
        '<tr>',
            '<td width="40%" class="infoView torrentNameInf">Filmão</td>',
            '<td width="15%" align="center" class="infoView">Filme Bem loko</td>',
            '<td width="10%" align="center" class="infoView">1059</td>',
            '<td width="10%" align="center" class="infoView">2159</td>',
            '<td width="5%" align="center" class="infoView">⬇️</td>',
        '</tr>',
    '</table>',
  '</div>'
].join('');

var container = $('#container');

$('#click-me').on('click', function(){
  container.append(template);
});

/* só para ficar mais fácil de ver */
#container { padding: 15px; }
#click-me { margin: 10px; }


.table-container {
  margin-bottom: 10px;
}

.table-container table {
  background: #CCC;
}

.table-container tr {
  height: 35px;
}

.table-container td {
  vertical-align: middle;
  padding: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="container">
  <button id="click-me">Click Me</button>
  <div class="table-container">
    <table>
      <table border="0" width="100%">
        <tr>
            <td width="40%" class="infoView torrentNameInf">Filmão</td>
            <td width="15%" align="center" class="infoView">Filme Bem loko</td>
            <td width="10%" align="center" class="infoView">1059</td>
            <td width="10%" align="center" class="infoView">2159</td>
            <td width="5%" align="center" class="infoView">⬇️</td>
      </tr>
    </table>
  </div>
</div>

This means that your linha.html file should only be

<div class="tableDiv">
    <table border="0" width="100%">
        <tbody>
            <tr>
                <td width="40%" class="infoView" id="torrentNameInf">Filmão</td>
                <td width="15%" align="center" class="infoView">Filme Bem loko</td>
                <td width="10%" align="center" class="infoView">1059</td>
                <td width="10%" align="center" class="infoView">2159</td>
                <td width="5%" align="center" class="infoView"><img id="downButton" src="images/downButton.png"/></td>
            </tr>
        </tbody>
    </table>
</div>

And your CSS should be on the page where JS runs.

I also advise you to use only <table> and import only the <tr>