CODEWITHSUNDEEP
htmlcss
Ohidul
Ohidul

Reputation: 192

Div does not get the full width of the page

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Data Retrieve</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="bootstrap.css">
    <style>
        #demo{
          background-color:purple;
          color: white;
          width: 100%;
        }
        #home{
          width: 45px;
        }
        #back{
          width: 25px;
        }
        #header{
          width:100%;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 col-sm-12">
                <table id="info_table" class="table">
                    <tr>
                        <td id="header">
                            <p align="center"><span style="float: left"><a href="http://localhost/directory/BangladeshDirectory.html"><img src="back.png" id="back"></a></span><b>মন্ত্রণালয়</b><span style="float: right"><a href="http://localhost/directory/BangladeshDirectory.html"><img src="home.png" id="home"></a></span><span style="float: right"><a href="http://localhost/directory/montronaloy.html"><img src="refresh.png" id="refresh"></a></span></p>
                        </td>   
                   </tr>
                   <tr>  
                        <td id="demo" align="center"><td>
                   </tr>
                </table> 
            </div>
        </div>      
    </div>
</body>
</html>  
<script>
    var bn_num = new Array('০','১','২','৩','৪','৫','৬','৭','৮','৯');

    function bn_num_convert(num){
        //console.log(num.length);
        var bn_val = '';
        for(i=0;i<num.length;i++){
          //console.log(num[i] + '/' + bn_num[num[i]]);
          bn_val = bn_val + bn_num[num[i]];
        }
        //console.log(bn_val);
        return bn_val;
    }
    $.getJSON("http://localhost/directory/ministri.json",function(obj){
        var info ='';
        //alert(obj.data.length);
        var count = obj.data.length;
        document.getElementById("demo").innerHTML ='মোট মন্ত্রণালয় ('+bn_num_convert(count.toString())+')';
        var count = obj.data.length;
        $.each(obj.data,function(key,value){

            info += '<tr>';
            info +='<td><a href="http://localhost/directory/show.php?id='+value.id+'" style="text-decoration:none">'+value.sitename_bn+'<span style="float: right"> > </span>'+ '</a></td>';
            info += '</tr>';
[This is the corresponding output of the code.][1]
        });

           $('#info_table').append(info);
    });
</script>

Firstly here purple background color doesn't get the full wide.if i inspect the background there shows an empty td which cause the problem.if i delete the empty td then i get perfect result.but there is no empty td in my code.plz see the code and show me the error. Secondly there is no horizontal line at the end of the output result.why last line doesn't get horizontal line?

Upvotes: 3

Views: 1061

Answers (3)

Shiva
Shiva

Reputation: 302

Just put &nbsp; in demo id td, it will show.

See thishttps://jsfiddle.net/v6mwpz89/3/

Cheers!

Upvotes: 0

charan kumar
charan kumar

Reputation: 2157

You are not closing the td, thats why empty td is appending.

 <td id="demo" align="center"></td>

Close the td like in above code

and remove margin and padding as other posts suggested in case if you want full width till ends.

Upvotes: 3

Raw Scripter
Raw Scripter

Reputation: 113

Set body margin paddding to 0px 

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

Upvotes: 0

Related Questions