2017-08-14 3 views
1

Je veux conserver la table à l'intérieur de l'étiquette div mais la moitié de la dernière section est manquante. Ceci est ma structure html que je l'ai utilisé,La table à l'intérieur de l'étiquette div déborde à l'extérieur du 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>

question ce que j'ai fait face à enter image description here

Quelqu'un peut-il me aider à slove ce problème?

+0

essayez de supprimer 'overflow: hidden;' –

+0

essayez de supprimer overflow: hidden; pensé qu'il va ajouter une barre de défilement en bas, si vous ne le voulez pas, puis réduire la largeur de l'une des colonnes – imBlue

+0

Essayez de fournir le lien jsfiddle pour cela. – kmg

Répondre

0

Essayez ceci:

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

Hope this vous aide ...