Question

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>
  
  <div class="col-sm-3">
                        <div class="panel panel-default">
                            <div class="panel-body" style="height:350px; background-color:#fff; border-color:#66cfff; border-style:solid; border-width:1px;padding:0px; overflow:auto;">
                                <div style="background-color: #0096db!important; padding: 10px 10px 30px 10px; align-items:stretch;">
                                    <div style="float:left; vertical-align:middle">
                                        <h2 style="color: #ffffff !important; text-align: left; font-size: 16px;font-family:Helvetica; font-weight: bold;">Last Payment</h2>
                                    </div>
                                    <div style="float:right ; vertical-align:middle">
                                        <h5>
                                            <a style="cursor:pointer; font-size:13px; color:#ffffff !important; font-weight:bold;" [routerLink]="['/historicPayments']">
                                                View All
                                            </a>
                                        </h5>
                                    </div>
                                </div>

                                <table class='table' style="margin-top:10px;">
                                    <thead class="box-heading">                                            
                                        <tr class="row-style">
                                            <th width="16%" style="vertical-align:top">Property/ Agreement ID</th>
                                            <th width="20%" style="vertical-align:top">Property/ Agreement Name</th>
                                            <th width="12%" style="vertical-align:top">Project ID</th>
                                            <th width="20%" style="vertical-align:top">Project Name</th>
                                            <th width="12%" style="vertical-align:top">Check Date</th>
                                            <th width="12%" style="vertical-align:top">Check Amount</th>
                                            <th width="8%" style="vertical-align:top">Invoice</th>
                                        </tr>
                                    </thead>

                                </table>
                            </div>
                        </div>
                    </div>


</body>
</html>

enter image description here

如何将div标签拉伸为等于表格的宽度。请看截图。目前最后有空白区域

请检查更新的代码。当我们移动水平条时，我看到它显示标题标题末尾的空白区域。请在w3c学校网站上测试此代码。

Answer 1

尝试使用width:100%; display:block;

这将帮助您使您的div 100％

Answer 2

为width属性提供百分比值。

.example { width:50%; background:green;}<div class="example">HAVE FUN!</div>

Answer 3

将您的div与display:table; css一起使用。

例如你的div类是.box1然后css将是：

div.box1 {width:100%; display:table;}

我假设桌子宽度也是100％。

要拉伸的Div内容等于表格宽度

3 个答案: