如何使th的宽度等于每个对应于另一个bootstrap-table中的th

时间：2017-06-17 12:23:50

标签： javascript jquery html5 css3 bootstrap-table

我在bootstrap模型中有两个表..！我想让第一个表中所有TH s的宽度等于第二个表中的所有对应TH s。 我正在使用jQuery width()方法实现这一目标，但我没有成功。

我的代码在这里..

＆＃13;
＆＃13; 
$(document).ready(function(){
var countForThWidth = 1;
while (countForThWidth <= 11) {
var newWidth = $('.table-with-fixed-header > thead > tr > th:nth-child(' + countForThWidth + ')').width();
$('.fixed-thead-holder > table > thead > tr > th:nth-child(' + countForThWidth + ')').width(newWidth);
countForThWidth++;
}
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-responsive">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

      	<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg">

    <!-- Modal content-->
    <div class="modal-content row">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
      <div class="table-responsive">

      	<div class="fixed-thead-holder">
            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>Image</th>
                        <th>Order Number</th>
                        <th>Item Code</th>
                        <th>Item Name</th>
                        <th>Unit</th>
                        <th>Ordered</th>
                        <th>Received</th>
                        <th>Backordered</th>
                        <th>Unit Cost</th>
                        <th>Brand</th>
                        <th>Amount</th>
                    </tr>
                </thead>
            </table>
        </div>

      	<table class="table table-striped table-bordered table-with-fixed-header">
            <thead>
                <tr>
                    <th>Image</th>
                    <th>Order Number</th>
                    <th>Item Code</th>
                    <th>Item Name</th>
                    <th>Unit</th>
                    <th>Ordered</th>
                    <th>Received</th>
                    <th>Backordered</th>
                    <th>Unit Cost</th>
                    <th>Brand</th>
                    <th>Amount</th>
                </tr>
            </thead>
            <tbody>
            	<tr>
            		<td>Image here</td>
            		<td>ICS-HS-16401810</td>
            		<td>4248</td>
            		<td>OVEN CLEANER, 4.1GAL, LIQUID</td>
            		<td>CS</td>
            		<td>4</td>
            		<td>5</td>
            		<td></td>
            		<td>$400.00</td>
            		<td></td>
            		<td>$2000.00</td>
            	</tr>
            </tbody>
        </table>
      </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

我想让所有th的宽度等于第二个表中的每个对应th ..！ 喜欢这张图片：

enter image description here

谢谢......！

2 个答案:

答案 0 :(得分：2)

试试这个，但它看起来很奇怪。你必须设置max-width不仅仅是为th，而是为td设置。并且必须隐藏额外的文本。是的，我忘了这是一个错误，因为模态没有被加载（比如@WizardCoder）

＆＃13;
＆＃13; 
$(document).ready(function(){
$('#myModal').on('shown.bs.modal', function (e) {
var countForThWidth = 1;
while (countForThWidth <= 11) {
var newWidth = $('#second thead tr th:nth-child(' + countForThWidth + ')').outerWidth();
$('#first thead tr th:nth-child(' + countForThWidth + ')').css("min-width", newWidth);
/*$('#second tbody tr td:nth-child(' + countForThWidth + ')').css("max-width", newWidth);*/
countForThWidth++;
}
})
});
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="table-responsive">
      	<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg">

    <!-- Modal content-->
    <div class="modal-content row">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
      <div class="table-responsive">

      	<div class="fixed-thead-holder">
            <table class="table table-striped table-bordered" id="first">
                <thead>
                    <tr>
                        <th>Image</th>
                        <th>Order Number</th>
                        <th>Item Code</th>
                        <th>Item Name</th>
                        <th>Unit</th>
                        <th>Ordered</th>
                        <th>Received</th>
                        <th>Backordered</th>
                        <th>Unit Cost</th>
                        <th>Brand</th>
                        <th>Amount</th>
                    </tr>
                </thead>
            </table>
        </div>

      	<table class="table table-striped table-bordered table-with-fixed-header" id="second">
            <thead>
                <tr>
                    <th>Image</th>
                    <th>Order Number</th>
                    <th>Item Code</th>
                    <th>Item Name</th>
                    <th>Unit</th>
                    <th>Ordered</th>
                    <th>Received</th>
                    <th>Backordered</th>
                    <th>Unit Cost</th>
                    <th>Brand</th>
                    <th>Amount</th>
                </tr>
            </thead>
            <tbody>
            	<tr>
            		<td>Image here</td>
            		<td>ICS-HS-16401810</td>
            		<td>4248</td>
            		<td>OVEN CLEANER, 4.1GAL, LIQUID</td>
            		<td>CS</td>
            		<td>4</td>
            		<td>5</td>
            		<td></td>
            		<td>$400.00</td>
            		<td></td>
            		<td>$2000.00</td>
            	</tr>
            </tbody>
        </table>
      </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

您的代码无法获得宽度，因为模态在加载时隐藏了。我已将您的代码放在on函数中，该函数检查触发模式显示事件的时间。我还将表格布局设置为固定，因为这是固定宽度表格单元格所必需的。

$(document).ready(function(){
  $('#myModal').on('shown.bs.modal', function(){
    var countForThWidth = 1;
      while (countForThWidth <= 11) {
      var newWidth = $('.table-with-fixed-header > thead > tr > th:nth-child(' + countForThWidth + ')').outerWidth();
      $('.fixed-thead-holder > table > thead > tr > th:nth-child(' + countForThWidth + ')').outerWidth(newWidth);
      countForThWidth++;
      }
  });
});
.fixed-thead-holder > table {
 table-layout:fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-responsive">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

      	<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg">

    <!-- Modal content-->
    <div class="modal-content row">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
      <div class="table-responsive">

      	<div class="fixed-thead-holder">
            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>Image</th>
                        <th>Order Number</th>
                        <th>Item Code</th>
                        <th>Item Name</th>
                        <th>Unit</th>
                        <th>Ordered</th>
                        <th>Received</th>
                        <th>Backordered</th>
                        <th>Unit Cost</th>
                        <th>Brand</th>
                        <th>Amount</th>
                    </tr>
                </thead>
            </table>
        </div>

      	<table class="table table-striped table-bordered table-with-fixed-header">
            <thead>
                <tr>
                    <th>Image</th>
                    <th>Order Number</th>
                    <th>Item Code</th>
                    <th>Item Name</th>
                    <th>Unit</th>
                    <th>Ordered</th>
                    <th>Received</th>
                    <th>Backordered</th>
                    <th>Unit Cost</th>
                    <th>Brand</th>
                    <th>Amount</th>
                </tr>
            </thead>
            <tbody>
            	<tr>
            		<td>Image here</td>
            		<td>ICS-HS-16401810</td>
            		<td>4248</td>
            		<td>OVEN CLEANER, 4.1GAL, LIQUID</td>
            		<td>CS</td>
            		<td>4</td>
            		<td>5</td>
            		<td></td>
            		<td>$400.00</td>
            		<td></td>
            		<td>$2000.00</td>
            	</tr>
            </tbody>
        </table>
      </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

相关问题
最新问题