La force de la table de colonnes à largeur fixe s'étend sur le conteneur

Apparemment d'un problème classique, mais les "solutions" que j'ai trouvé n'ai pas travaillé, y compris de diverses autres questions.

Si mon tableau est plus large que son conteneur, je veux que mon la table largeur de la cellule restent fixes et ne pas être redimensionnée pour s'adapter au conteneur.

Reproductible HTML (<td>s généré par PHP):

<html>
  <head></head>

  <body>
    <table>
      <tr>
        <?php for($i=0;$i<15;$i++) { 
           echo "<td style='width:150px;border-right:1px solid black;'>".($i+1)."</td>"; 
        } ?>
      </tr>
    </table>
    <div style='background:chartreuse;width:150px'>This is 150px wide.</div>
  </body>
</html>

Ce que j'ai essayé:

  • table-layout:fixed
  • span récipient avec display:inline-block ensemble
  • div conteneur avec inline block

Il semble qu'il devrait être un moyen facile de faire le code précédent génère une table qui déborde le corps.

Quelqu'un peut-il aider?

Modifier

Il peut ne pas être clair à partir de mon ancien texte, mais je tiens à spécifier la largeur de la colonne de moi-même.

Je suis en train de le faire sans spécification explicite de la largeur de la table. Seuls les TDs qui force le tableau plus large, qui (devrait?) la force du récipient plus large.

Aussi, le CSS est là qu'à titre d'exemple.

source d'informationauteur Ben

  1. 11
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div style="margin: 0pt auto; width: 980px;">
<div style="500px;overflow:scroll">
<table style="width: 100%; table-layout: fixed;">
<tbody>
<tr>
<td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
<td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
<td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
<td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
<td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
<td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
<td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
<td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
<td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
<td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
<td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
<td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
<td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
<td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
<td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
</tr>
</tbody>
</table>
<div style="background:chartreuse;width:150px">This is 150px wide.</div>
</div>
</div>
</body>
</html>
  2. 0

    À l'aide de mon code HTML dans ma question, voici le balisage correct, avec les compliments de @Bala.

    <html>
<head></head>
<body>
<table style='table-layout:fixed;width:100%'>
<tr>
<?php for($i=0;$i<15;$i++) { echo "<td style='width:150px;border-right:1px solid black;'>".($i+1)."</td>"; } ?>
</tr>
</table>
<div style='background:chartreuse;width:150px'>This is 150px wide.</div>
</body>
</html>