divタグ内のテーブルがdivの外側にオーバーフローしています

divタグ内のテーブルを保持したいのですが、最後のセクションの半分が欠落しています。これは私が使用している私のHTML構造、私が直面しているものdivタグ内のテーブルがdivの外側にオーバーフローしています

.dataTable{ 
 
    \t table-layout: fixed;  \t  \t 
 
    } 
 
    .dataTable td{  \t 
 
    \t white-space: nowrap; 
 
    \t overflow: hidden; 
 
    \t text-overflow: ellipsis; 
 
    }

<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
<div class="row"> 
 
    <div class="col-md-12"> 
 
     <table class="dataTable"> 
 
     <tr> 
 
      <th>Company</th> 
 
      <th>Contact</th> 
 
      <th>Country</th> 
 
     </tr> 
 
     <tr> 
 
      <td>Alfreds Futterkiste</td> 
 
      <td>Maria Anders</td> 
 
      <td>Germany</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Centro comercial Moctezuma</td> 
 
      <td>Francisco Chang</td> 
 
      <td>Mexico</td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
    </div> 
 
    
 
</body> 
 
</html>

問題がある

誰もがこの問題をsloveする私を助けることができますか？

出典

2017-08-14 Udara

は 'オーバーフロー削除してみてください：隠された;' –

がオーバーフロー削除してみてください：隠されたが、列の幅を小さくしたい場合は、スクロールバーを下に追加することを考えてください。 – imBlue

このためにjsfiddleリンクを提供してください。 – kmg

これを試してみてください。これはあなたを助け

.dataTable{ 
    table-layout: fixed; 
    width: 100%;    
}

希望...

出典

2017-08-14 11:41:56 PraveenKumar

divタグ内のテーブルがdivの外側にオーバーフローしています

答えて

関連する問題