Div不占据整个页面的宽度

Question

Div不占据整个页面的宽度

3

<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，请查看代码并显示错误。其次，输出结果末尾没有水平线。为什么最后一行没有水平线？

- Ohidul

你能分享一个 Fiddle 吗？这样更容易查看问题。 - Deepak Sharma

你为什么拒绝了这个编辑？ - ProgrammerPer

3个回答

0

将页面主体的边距和内边距设置为0像素。

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

- Raw Scripter

1

那应该有所帮助。您正在使用Bootstrap，它会自动添加填充。 - Domenik Reitzner

1

@DomenikReitzner 是对的，Bootstrap 也会自动获取一些宽度。所以如果你想让它全屏宽度，那么就把 body 的 margin 设为 0，并将该 div 放在 <div class="container-fluid"> 前面。这样它就会获得完整的宽度 :) - Raw Scripter

我已经尝试过了，但问题并没有解决。我能够确定问题所在，但无法在我的代码中解决它。问题是当我检查输出时，会显示一个空的td标签。如果我删除它，那么输出就完美了。但问题是在我的代码中没有空的td标签。因此，我无法解决这个问题。 - Ohidul

0

只需在演示ID td中加入 ，即可显示。

请查看https://jsfiddle.net/v6mwpz89/3/

祝福！

- Shiva

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- charan kumar · Accepted Answer

您没有关闭td标签，这就是为什么会出现空的td标签的原因。

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

像上面的代码一样关闭td标签

如果你想要完整宽度，就像其他帖子建议的一样去掉边距和填充。