Fatal编程技术网
  • html/
  • Html 在弹出窗口的模式中未显示完整尺寸的表格

Html 在弹出窗口的模式中未显示完整尺寸的表格

html css twitter-bootstrap-3

Html 在弹出窗口的模式中未显示完整尺寸的表格,html,css,twitter-bootstrap-3,Html,Css,Twitter Bootstrap 3,我想在全长弹出窗口的模式中显示表格。但它只是以固定长度出现在中间。我使用了css，但不知道是什么错误。我需要在模式中显示100%长度的表格。请有人帮助我构造表格。我使用了引导表，并得到了这样的错误 [![<!DOCTYPE html> <html> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery

我想在全长弹出窗口的模式中显示表格。但它只是以固定长度出现在中间。我使用了css，但不知道是什么错误。我需要在模式中显示100%长度的表格。请有人帮助我构造表格。我使用了引导表，并得到了这样的错误

[![<!DOCTYPE html>
<html>
<head>
    <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<style type="text/css">
    .table {
    border-radius: 5px;
    width: 50%;
    margin: 0px auto;
    float: none;
}
</style>
</head>
<body>
<div class="container" style="margin-top: 25px; margin-bottom: 30px; text-transform: none;">    
<form class="form-inline" action="">    
<div class="form-group">
  <label for="test" class="col-sm-3 control-label">ClientId</label>

    <input type="text" class="form-control" id="test" placeholder="Enter A Value">

</div>
<div class="form-group">

    <button type="button" id="go"  class="btn btn-primary"> <span class="glyphicon glyphicon-search"></span></button>

</div>
</form>
<!--Modal if input is empty-->
<div class="modal fade" id="#myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>

        </button>
        <h4 class="modal-title">Modal title</h4>

      </div>
      <div class="modal-body" >
        <!--div class="container"-->
  <h2>Basic Table</h2>

  <div class="table-responsive" id="holder-table">       
  <!--TAble COntent-->
</div>

<!--/div-->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>

<!--modal if there is some text-->
<!--Modal-->

<div class="modal fade" id="#myModal1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>

        </button>
        <h3 class="modal-title modal-title-or">
            Edit
            Relative
            </h3>

      </div>
      <form id="relativeFormEdit" class="form-horizontal">
      <div class="modal-body">
        <!--form body-->
        <div class="form-group ">
      <div class="row">
                        <label class="control-label col-md-4">Name:</label>
                        <div class="col-md-6">
                            <input name="name" title="Name" class="form-control">
                        </div>
                    </div>
       <div class="row">
                        <label class="control-label col-md-4">Age:</label>
                        <div class="col-md-6">
                            <input name="age" title="age" class="form-control">
                        </div>
                    </div>

      <div class="row">
                        <label class="control-label col-md-4">Cid:</label>
                        <div class="col-md-6">
                            <input name="cid" title="cid" class="form-control">
                        </div>
                    </div>
             <div class="col-md-10">    
                 <button type="button" class="btn btn-info btn pull-right" id="search" >
      <span class="glyphicon glyphicon-search"></span>Search
    </button>
                    </div>

<div id="holder-table1">
    <!--table content-->
    </div>
</div>
</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
</form>
<div class="table-responsive">
<table id="tableModel" style="display:none" class="table table-hover table-striped table-condensed" >
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Cid</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>10</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>11</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>12</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>
</div>
<script>

$(document).ready(function(){
$('#go').click(function() {

    var test1 = $('#test').val();
  if (test1 === "") {
    $("#tableModel").css({display: "block"});
     $('#holder-table1').append($("#tableModel"));
    $('#\\#myModal1').modal('show');
    $('#holder-table1').hide();
  }
  else{
     $("#tableModel").css({display: "block"});
     $('#holder-table').append($("#tableModel"));
    $('#\\#myModal').modal('show');
  }
$('#search').click(function() {
   $("#tableModel").css({display: "block"});
        $("#holder-table1").show();
    });
});
});
</script>
<!-- /.modal -->
<!--End Modal-->
</body>
</html>][1]][1]

[[
.桌子{
边界半径：5px；
宽度：50%；
保证金：0px自动；
浮动：无；
}
客户
&时代；
情态标题
基本表
关
&时代；
编辑
相对的
姓名：
年龄：
Cid:
搜索
关
名称
年龄
Cid
约翰
10
john@example.com
玛丽
11
mary@example.com
七月
12
july@example.com
$（文档）.ready（函数（）{
$（'#go'）。单击（函数（）{
var test1=$（'#test'）.val（）；
如果（test1==“”）{
$（“#tableModel”）.css（{display:“block”}）；
$（“#holder-table1”）。追加（$（“#tableModel”）；
$（'myModal1'）.modal（'show'）；
$（'#holder-table1'）.hide（）；
}
否则{
$（“#tableModel”）.css（{display:“block”}）；
$（“#holder table”）.append（$（“#tableModel”）；
$（'myModal'）.modal（'show'）；
}
$（“#搜索”）。单击（函数（）{
$（“#tableModel”）.css（{display:“block”}）；
$（“#holder-table 1”）.show（）；
});
});
});
][1]][1]
试试这个

<style type="text/css">
    .table {
    border-radius: 5px;
    width: 100%;
    margin: 0px auto;
    float: none;
}
</style>
您使用
宽度：50%
在
表类中
使用
100%
它仍然不工作。您可以将代码发布到JSFIDLE中，以便我们测试它吗？如果你对我的答案感到满意，那就接受答案吧。。！谢谢。我有一张机票 
<table id="tableModel" style="display:inline-table"  class="table table-hover table-striped table-condensed" > 

if (test1 === "") {
    $("#tableModel").css({display: "inline-table"});
     $('#holder-table1').append($("#tableModel"));
    $('#\\#myModal1').modal('show');
    $('#holder-table1').hide();
  }
  else{
     $("#tableModel").css({display: "inline-table"});
     $('#holder-table').append($("#tableModel"));
    $('#\\#myModal').modal('show');
  }
$('#search').click(function() {
   $("#tableModel").css({display: "inline-table"});
        $("#holder-table1").show();
    });