html - div 获取不到页面的全宽

标签 html css

<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>

首先这里的紫色背景颜色没有得到全宽。如果我检查背景有一个空的 td 导致问题。如果我删除空的 td 然后我得到完美的结果。但是没有空的 td我的code.plz 查看代码并告诉我错误。 其次输出结果最后没有横线,为什么最后一行没有横线?

最佳答案

您没有关闭 td,这就是追加空 td 的原因。

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

像上面的代码一样关闭td

并按照其他帖子的建议删除边距和填充,以防万一你想要全宽直到结束。

关于html - div 获取不到页面的全宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51835108/

相关文章:

Jquery UI 可拖动元素从固定 div 隐藏由绝对元素

jquery - 将条件样式从 jQuery 迁移到 AngularJS

html - 标题 onHover 的 CSS 不起作用

jquery - overflow hidden 的水平网站滚动

javascript - 从 div 获取值到文本框

html - cfloop 标签内的 div 标签引入了不需要的换行符

javascript - 通过单击返回 div 的原始内容

html - 在一行中显示文本并删除覆盖文本的边框

html - 如何使用应用程序开发 API 将动态 html 或脚本添加到 Bigcommerce 商店中的任何页面

Html 打印页面分辨率(或以像素为单位的大小)