Stała kolumna kolumny wymuszenie ekspansji na pojemniku

Wygląda na to, że jest to klasyczny problem, ale "rozwiązania", które znalazłem, nie zadziałały, w tym różne inne pytania dotyczące SO.Stała kolumna kolumny wymuszenie ekspansji na pojemniku

Jeśli mój stół jest szerszy niż jego pojemnik, chcę, aby szerokość komórki tabeli pozostała stała i nie była zmieniana w celu dopasowania do pojemnika.

Powtarzalne HTML (<td> s generowane z 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>

Co próbowałem:

table-layout:fixed
span pojemnik z display:inline-block ustawić
div pojemnik z blokiem inline

Wygląda na to, że powinien istnieć łatwy sposób, aby poprzedni kod wygenerował tabelę, która przepełnia ciało.

Czy ktoś może pomóc?

Edit

To może nie być jasne, z moim poprzednim brzmieniu, ale chcę, aby określić szerokość kolumny siebie.

Próbuję zrobić to bez określenia jawnej szerokości tabeli. Tylko niszczyciele wymuszą poszerzenie tabeli, co (powinno?) Zmusić do poszerzenia kontenera.

Również wbudowany styl CSS służy tylko do celów.

Źródło

2011-09-14 Ben

układ tabeli: poprawiony rozwiąże problem. Usuń wbudowaną stylizację dla td. Podajesz szerokość. Jeśli nie określisz szerokości td, tds zostaną przeskalowane zgodnie z zawartością, a ustalony layout tabeli nie zmieni rozmiaru, aby pasował do zawartości – Bala

@Bala - patrz edycja. Chcę '' s ustawić szerokość. Jeśli nie ustawię szerokości na '' s, problem zostanie anulowany. – Ben

Możesz udostępnić wygenerowany kod HTML lub leming, jeśli jest dostępny online do sprawdzenia. – Bala

<!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>

Źródło

2011-09-14 02:02:07 Bala

BAM tam było dzięki. Wiedziałem, że istnieje proste rozwiązanie: brakowało mi "width: 100%". Twoje zdrowie! Mój odtwarzalny kod znajduje się poniżej, z poprawnym CSS. – Ben

Używanie mojego HTML w moim pytaniu, oto poprawny znacznik, komplementy @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>

Źródło

2011-09-14 03:23:21 Ben

Stała kolumna kolumny wymuszenie ekspansji na pojemniku

Odpowiedz

Powiązane problemy