부트 스트랩 테이블 워드 랩이 작동하지 않습니까?

-2

부트 스트랩 테이블에 문제가 있습니다. 이 스타일의 부트 스트랩 테이블은 와이드 스크린에서 잘 작동하지만이 태블릿 PC를 보려고하면 모든 열이 서로 겹치고 있습니다. 제발 도와주세요.부트 스트랩 테이블 워드 랩이 작동하지 않습니까?

.table{ 
 
    table-layout:fixed; 
 
    word-wrap:break-word; 
 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <div class="table-responsive"> 
 
     <table class="table"> 
 
      <thead> 
 
       <tr> 
 
\t \t \t   <th>Cbee ID</th> 
 
\t \t \t   <th>First Name</th> 
 
\t \t \t   <th>Last Name</th> 
 
\t \t   \t <th>Created On</th> 
 
\t \t   \t <th>Email</th> 
 
\t \t   \t <th>Facebook ID</th> 
 
\t \t   \t <th>LinkedIn ID</th> \t \t \t \t \t \t 
 
\t \t   \t <th>Owner Beevites</th> 
 
\t \t \t   <th>Attendee Beevites</th> 
 
\t \t \t   <th>Device ID</th> 
 
\t \t \t </tr> \t 
 
      </thead> 
 
      <tbody> 
 
       <tr> 
 
        <td>1</td> 
 
        <td>Table cell</td> 
 
        <td>Table cell</td> 
 
        <td>Table cell</td> 
 
        <td>Table cell</td> 
 
        <td>Table cell</td> 
 
        <td>Table cell</td> 
 
        <td>Table cell</td> 
 
        <td>Table cell</td> 
 
        <td>9818c9b8d07c1bb507a05c387d3b3d743725ad81cb93f1858d5143ccd1624bdf</td> 
 
       </tr>     
 
      </tbody> 
 
     </table> 
 
    </div>

출처

2014-12-02 Ganesh Putta

내가 전에 사용했던이

<div class="table-responsive"> 
    <table class="table"> 
     <thead> 
      <tr> 
       <th>#</th> 
       <th>Table heading</th> 
       <th>Table heading</th> 
       <th>Table heading</th> 
       <th>Table heading</th> 
       <th>Table heading</th> 
       <th>Table heading</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>1</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
      </tr> 
      <tr> 
       <td>2</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
      </tr> 
      <tr> 
       <td>3</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
      </tr> 
     </tbody> 
    </table> 
</div>

출처

2014-12-02 07:32:04

동일한 코드처럼 사용 ...하지만 여전히 내가 같은 확률값을 –

<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <h2>Basic Table</h2> 
 
    <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p> 
 
<div class="table-responsive">    
 
    <table class="table"> 
 
    <thead> 
 
     <tr> 
 
     <th>Firstname</th> 
 
     <th>Lastname</th> 
 
     <th>Email</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>John</td> 
 
     <td>Doe</td> 
 
     <td>[email protected]</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Mary</td> 
 
     <td>Moe</td> 
 
     <td>[email protected]</td> 
 
     </tr> 
 
     <tr> 
 
     <td>July</td> 
 
     <td>Dooley</td> 
 
     <td>[email protected]</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div> 
 
</div> 
 

 
</body> 
 
</html>

출처

2016-07-14 11:08:17

부트 스트랩 테이블 워드 랩이 작동하지 않습니까?

답변

관련 문제