固定幅カラムテーブルの力がコンテナ上に広がります

明らかに古典的な問題ですが、私が見つけた "解決策"はさまざまな問題を含んでいませんでした。固定幅カラムテーブルの力がコンテナ上に広がります

テーブルがコンテナより広い場合、テーブルセルの幅を固定したままにして、コンテナに合わせてサイズを変更しないようにします。

再現HTML（PHPで生成<td>秒）：私が試した何

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

：display:inline-blockはインラインブロックで

divコンテナを設定して

table-layout:fixed
spanコンテナ

前のコードでボディをオーバーフローさせるテーブルを生成する簡単な方法があるようです。

誰かが助けることができますか？

編集

それは私の前の文言から明らかではないかもしれないが、私は自分自身を幅列を指定します。

テーブルの明示的な幅を指定せずにこれを実行しようとしています。 TDだけがテーブルを広げ、コンテナの幅を広げる必要があります。

また、インラインCSSはあくまで例です。

出典

2011-09-14 Ben

table-layout：fixedは問題を解決します。 tdのインラインスタイルを削除します。幅を指定しています。 tdの幅を指定しないと、内容に応じてtdsがサイズ変更され、テーブルレイアウトを固定してもコンテンツに合わせてサイズが変更されません。 – Bala

@Bala - 編集を参照してください。私は '' sを設定幅にします。 ''の幅を設定しないと、問題は無効になります。 – Ben

生成するHTMLコードを共有することができます。 – 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>

出典

2011-09-14 02:02:07 Bala

BAMありがとうございました。私は簡単な解決策があることを知っていました：私は 'width：100％'がありませんでした。乾杯！私の再現可能なコードは、正しいCSSで、以下にあります。 – Ben

ここで私のHTMLを使用して、私の質問では、正しいマークアップ、@ 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>

出典

2011-09-14 03:23:21 Ben

固定幅カラムテーブルの力がコンテナ上に広がります

答えて

関連する問題