Question

我想在弹出全长的MODAL中显示表格。但它只是固定长度来到中心。我使用了css但不知道有什么问题。我需要显示表格MODAl内的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]

Answer 1

试试这个

<style type="text/css">
    .table {
    border-radius: 5px;
    width: 100%;
    margin: 0px auto;
    float: none;
}
</style>

并在css中使用inline-table代替block

<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();
    });

在POPUP WINDOW的MODAL中没有显示完整的sizae表

1 个答案: