Even by placing the <table> inside a <div> I cannot define margin

Asked

Viewed 194 times

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 the StyleMain.css i put

#tableDiv {
    margin-bottom: 10px;
}

And when I call .html 

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

It does not create the space between divs

Imagem do resultado

javascript html

  • Why are you making append of multiple html? including <!doctype>, Stylemain.css, and several tables (you’ll get repeated id’s, #tableDiv) on the same page, that’s not supposed to happen. just try to append the lines you need

  • @Miguel I need all, actually I wanted to call this div by a PHP function, but as it is not possible I just played in one . html and called for JS.

  • Yes, but the file you should call is supposed to contain elements to add to your page (e.g., rows/tables) not an entire document, you should never get repeated ids too, start there

  • @And how would I call just the tableDiv ??

  • I suppose the file where you keep yours #basetorrent is already an html document, so you don’t have to charm everything again... Take everything out of the file you call the table and leave it alone, <div class="tableDiv">...&#xA; </div> ... And I didn’t notice it before, but that table wasn’t even inside the tag <body>

  • It would be easier if there was some code running to test and help you. jsFiddle, Codepen or snippet ?

  • @Miguel I removed everything from inside the . html, I left only the <div>, but still without the margins.

  • @fernandosavio I call the files by name, however I did not find how to do it by the sites that passed me.

  • @fernandosavio The only problem I’m facing is the fact that CSS does not put the margins on tableDiv.

  • Then do what @Miguel said, just leave the HTML you want to add and not an entire document. I’ll create an answer with an example.

Show 5 more comments

1 answer

1


I created a Codepen to demonstrate that only the block of code is needed to be inserted on the page, without adding numerous <html> tags.

http://codepen.io/fernandosavio/pen/EZNEdX

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>
<div id="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>

That means your file linha.html 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 the JS runs.

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

  • Try a padding-top in the tableDiv class

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.