CODEWITHSUNDEEP
htmlcsshtml-table
Legeo
Legeo

Reputation: 792

How to remove padding and border from table cells?

I tried a lot of solutions that I have found here and in Google, but no one of them works. The table is dynamically generated by jQuery and Javascript.

Question: How can I remove the padding, border between the cells in this html table ?

This is the HTML code:-

<div class="board">
     <table id="tableGame">

     </table>
</div>

This is the Css Code

.board{
    float:left;
    display: inline-block;
}

table{
    border-collapse: collapse;
}

table tr, td{
    border: 0px;
}

Javascript Code below

function mapGenerate(){
    var map=createMap(); // this function returns a 2d array filled of random 1 and 0 

/* example 
map = [[1,1,1,1,0],
       [1,0,0,0,0],
       [1,0,1,1,1],
       [1,0,0,0,1],
       [1,1,1,0,1]]
*/    

        //loop the 2d array map and change the number with the appropriate img    
        for(var i = 0; i < map.length; i++) {
            var innerArrayLength = map[i].length;
            for(var j = 0; j<innerArrayLength; j++){
                //loop the nested arrays so i can change the 1 and the 0 with the appropriate img
                if(map[i][j] === 0){
                    map[i][j]="<img class=\"walkble\" src=\"mapTiles/floorResized.png\">"; //you can walk this part of the map
                }else{
                    map[i][j]="<img class=\"nonWalkble\"// you cannot walk This part of the map src=\"mapTiles/volcanoresize.png\">";
                }    
                ;
            }
            $("#tableGame").append("<tr><td>"+ map[i] + "</td></tr>") // Here i print the elements of the array
        }  
    }


mapGenerate();

Link to jsfiddle under here.

The problem is not about the 3rd white line ( it only appears in js fiddle, if I open it in my browser they looking as a normal table).

The problem is only to delete that disturbing padding between the cells.

jsfiddle

In codepen you will see it better, without lines error.

codepen

Upvotes: 0

Views: 1274

Answers (3)

Maidiries
Maidiries

Reputation: 169

css:

table { border-collapse: collapse; }
table td { padding:0; }

Upvotes: 0

Charles Stover
Charles Stover

Reputation: 1148

In HTML, there are attributes border, cellpadding, and cellspacing on the <table> element. Set them to 0. <table border="0" cellpadding="0" cellspacing="0">.

Border is for the border width.

Cellpadding is for the padding in the table cells.

Cellspacing is for the space between the table cells.

Upvotes: 2

widyakumara
widyakumara

Reputation: 1234

looks like the problem is on line 80 of your javascript.

$("#tableGame").append("<tr><td>"+ map[i] + "<td></tr>")

you're concat-ing an array (map[i]) into a string. javascript by default "stringify" it by joining it with commas.

The code above is like:

$("#tableGame").append("<tr><td>"+ map[i].join() + "<td></tr>")

since the default joining string is comma, that's equivalent to

$("#tableGame").append("<tr><td>"+ map[i].join(',') + "<td></tr>")

To get rid of the commas you simply joining it with an empty string

$("#tableGame").append("<tr><td>"+ map[i].join('') + "<td></tr>")

Upvotes: 2

Related Questions