Bảng HTML phù hợp bên trong hộp thoại Bootstrap

Question

Tôi đang tạo hộp thoại BootStrap cho trang web của mình thông qua đó người dùng có thể nhập danh bạ Google của mình. Hộp thoại có một bảng với 4 cột bên trong nó. Chỉ các tiêu đề bảng là tĩnh, các hàng đang được điền động bằng mã JavaScript. 4 cột là ..

Email | Name| Mobile | Import 

Khi độ dài của email nhỏ thì bảng phù hợp hoàn hảo trong hộp thoại nhưng nếu có id email dài trong danh sách 2 cột cuối cùng (Di động, Nhập) không phù hợp trong hộp thoại

các HTML code ..

 <div class="modal fade" id="myModalTable"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
       <h3 class="modal-title">Import Google Contacts</h3> 
       </div> 
       <div class="modal-body"> 
       <h5 class="text-center">Please Select the Google Contacts you want to Import</h5> 
       <table id="friendsoptionstable" class="table table-striped"> 
        <thead> 
         <tr> 
          <th class="tablecell" width:" auto !important">Email</th> 
          <th class="tablecell">Name</th> 
          <th class="tablecell">Mobile</th> 
          <th class="tablecell">Import</th> 
         </tr> 
        </thead> 
        <tbody> 

        </tbody> 
       </table> 
       <!--<div class="form-group"> 
        <input type="button" class="btn btn-warning btn-sm pull-right" value="Reset"> 
        <div class="clearfix"></div> 
       </div>--> 
       </div> 
       <div class="modal-footer"> 
       <button type="button" class="btn btn-default " data-dismiss="modal" onclick="redirectToPrevPage()">Cancel</button> 
       <button class="btn btn-primary" id="addcheckedfriends1" onclick="add_checked_friends()">Save Selected Friends</button> 
       <!--<button type="button" class="btn btn-success" onclick="add_checked_friends() >Import Contacts</button>--> 
       </div> 

      </div><!-- /.modal-content --> 
      </div><!-- /.modal-dialog --> 
     </div> 

Như bạn có thể nhìn thấy trong ảnh chụp màn hình, vì id email 3rd quá dài 2 cột cuối cùng là bên ngoài hộp thoại . Tôi muốn các email dài được gói vào một dòng thứ 2 để toàn bộ bảng phù hợp với bên trong hộp thoại. Tôi đã thử thiết lập chiều rộng của tiêu đề bảng cụ thể để đạt được điều này nhưng vẫn còn vấn đề vẫn tồn tại. Không thể hiểu tôi đang đi sai đâu. Xin giúp đỡ ..

Answer 1

Nếu bạn sử dụng kết hợp table-layout: fixed và word-wrap: break-word trên bàn của mình thì bạn sẽ có thể làm cho nó hoạt động.

#friendsoptionstable { 
    table-layout: fixed; 
    word-wrap: break-word; 
} 

JSFiddle Here

Thêm vào đó - nếu bạn muốn cột email để được rộng hơn, bạn có thể thiết lập chiều rộng trên mỗi 4 cột. Chẳng hạn như, email 50%, tên 20% và cả điện thoại di động và nhập khẩu ở mức 15%. Chỉ cần đảm bảo họ thêm tối đa 100%.

Example Here

Answer 2

Nếu các cột sẽ có giá trị văn bản dài không có dấu cách, như địa chỉ email, có thể giúp thêm word-wrap: break-word vào ô bảng để cho phép trình duyệt ngắt các từ rất dài.

Một lựa chọn khác sẽ tiếp tục tăng nhẹ chiều rộng của hộp thoại, vì nó loks địa chỉ e-mail là cột chỉ có khả năng dài:

<div class="modal-dialog" style="width: 800px;"> 

Answer 3

Bạn có thể thêm text-overflow: ellipses; overflow-x: hidden; đến cột trong câu hỏi. Tôi muốn thêm thuộc tính title để người dùng cuối vẫn có thể di chuột qua nó để có được chú giải công cụ của tên đầy đủ.

Một tùy chọn khác có thể là thêm modal-lg vào lớp modal-dialog.

Chỉnh sửa Chỉ cần lưu ý trong nhận xét rằng các yêu cầu đã được đưa vào dòng thứ 2. Câu trả lời này không thực hiện được điều đó, nhưng nó có thể hữu ích cho những người khác trong tương lai.

Answer 4

Bạn nên kiểm tra xem nó:

$("#friendsoptionstable tbody td").css('width',"30%"); 
$("#friendsoptionstable tbody td").css('overflow',"auto"); 

Bằng cách này, nó sẽ sử dụng automaticall cuộn ngang.