0

3つの固定列テーブルを作成しようとしています。左右の列の幅は47ピクセルで、中央の列は残りのスペースを使用する必要があります。これが私がしたことです：

HTML：

<table class='table poem'>
<tr>
    <td colspan="3">
        <span id="title">
            <h3 class='hide center'>Beautiful Poem</h3>
        </span>
    </td>
</tr>
<tr class="verse">
    <td style='vertical-align: middle; text-align: right;'>
        <img src="{{ asset('bundles/yopyourownpoet/images/showPoem/Transparent.png') }}" alt="" height="33" width="47" />
    </td>
    <td>
        <div class='verse'>
            <div class='hide intro'>Here's the special poem for them.</div>
            <div class='hide intro'>Give to them just like a gem.</div>
            <div class='hide intro'>But if you like, I'll change verse.</div>
            <div class='hide intro'>Click an arrow, need not rehearse.</div>
            <div class='hide intro'>When it's ready, click the star. </div>
        </div>
    </td>
    <td style='vertical-align: middle;'>
        <a href= {{ links.changeIntro }}>
            <img src="{{ asset('bundles/yopyourownpoet/images/showPoem/NextVerse.png') }}" alt="Next Intro" height="33" width="47" />
        </a>
    </td>
</tr>

CSS：

table.poem { table-layout: fixed; }
tr.verse { width: 100%; }
tr.verse > td:nth-child(1) { width: 47px; }
/*tr.verse > td:nth-child(2) { width: 70%; }*/
tr.verse > td:nth-child(3) { width: 47px; }
#title, #closing, #ps { min-height: 50px; width: 100%; }
div.verse
{
    text-align: center;
    min-height: 180px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

これがjsFiddleです。

ただし、テーブルは同じ幅の3列に分割されています。何が問題なのですか。

4

3 に答える 3

0

あなたはこれを使うことができます

    <div style="width=100%; margin-left:auto; margin-right:auto;"> 
        <div  style="width=40%; margin-left:auto; margin-right:auto;float:left;">
        </div>
        <div  style="width=40%; margin-left:auto; margin-right:auto; float:right;">
        </div>
    </div>
于 2012-11-24T05:50:06.140 に答える
0

非常に大きなテーブルを作成する場合はtable-layout: fixed;、ブラウザがテーブル全体を計算してレンダリングするために最初の行を読み取るだけでよいため、読み込みが速くなるため、これは良い考えです。

ただし、そうでない場合は、table-layoutデフォルト値を使用width:100%;して、テーブルまたは必要な固定幅に設定できます。

table.poem { 
   border-collapse: collapse;
   width: 100%; 
}
td{
   border: 1px solid #000;
}
tr.verse { width: 100%; }
tr.verse > td:nth-child(1) { width: 47px; }
tr.verse > td:nth-child(3) { width: 47px; }
#title, #closing, #ps { 
   min-height: 50px; 
   width: 100%; 
}
div.verse
{
    text-align: center;
    min-height: 180px;
    white-space: nowrap;
    overflow: hidden;
}

これがフィドルです

アドバイス：

  • テーブルを使用せずにこれを行うことができます。これは単純な3列のレイアウトです。
  • セレクターの使用nth-childは避けてください。優れていますが、古いブラウザー（IE8など）とは互換性がありません。
  • <div class='hide intro'>改行用の束を置き換えるか、代わりにスパンを使用できます
于 2012-11-24T06:49:03.657 に答える
0

<colgroup>私はついに、テーブルに<col>タグを追加することで、目的の効果（ページの読み込み時に正しい固定ディメンションを持つテーブルと列を持つ）を得ることができました。

<table class='table poem'>
    <colgroup>
        <col width=47px>
        <col width=100%>
        <col width=47px>
    </colgroup>
    <tr>
        <td colspan="3">
            <div id="title">
                <h3 class='hide center'>{{ poem.poemTitle }}</h3>
            </div>
        </td>
    </tr>
    <tr class="verse">
        <td>
            <img src="{{ asset('bundles/yopyourownpoet/images/showPoem/Transparent.png') }}" alt="" height="33" width="47" />                
        </td>
        <td>
            <div class='verse'>
                <div class='hide intro'>{{ poem.introLine1 }}</div>
                <div class='hide intro'>{{ poem.introLine2 }}</div>
                <div class='hide intro'>{{ poem.introLine3 }}</div>
                <div class='hide intro'>{{ poem.introLine4 }}</div>
                <div class='hide intro'>{{ poem.introLine5 }}</div>
            </div>
        </td>

    </tr>
    <tr>
       <td>
           <a href= {{ links.changeIntro }}>
           <img src="{{ asset('bundles/yopyourownpoet/images/showPoem/NextVerse.png') }}" alt="Next Intro" height="33" width="47" />
           </a>
       </td>
    </tr>
</table>

CSS：

table.poem { table-layout: fixed; width: 100%; }
tr.verse { width: 100%; }
tr.verse > td { vertical-align: middle; }
#title, #closing, #ps { min-height: 50px; width: 100%; }
#closing { padding-top: 25px; font-size: 120%; }
#ps { font-style: italic; font-size: 120%; }
div.verse
{
    text-align: center;
    min-height: 180px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}
于 2012-11-25T02:44:15.270 に答える