1

列ごとに別のセルを追加する必要があるテーブルがあります。その列には多くの要素があるため、セルの内容は同じ行の他のセルの下に流れ、テーブルの使用可能な幅をすべて埋める必要があります. この方法では、列が引き伸ばされず、コンテンツを表示できなくなります。

視覚的な例が役立つかもしれません: http://www.asciiflow.com/#Draw9009157520507047228

編集

すべての返信を読んだ後、おそらく十分な情報を提供していないことに気づきました。謝罪いたします。

変更したいテーブルはhttp://staging.locamotion.org/projects/pootle/にあります。このテーブルは、テーブルの並べ替えにsorttable JavaScript ライブラリを使用していることに注意してください。

各エントリのタグ付け情報を表示するには、そのテーブルを変更する必要があります。すべてのエントリには、多くのスペースにまたがる可能性のある複数のタグを含めることができるため、新しい列 (並べ替えライブラリの作業を続けるために必要) は、幅のために 1 つ以上の行にまたがる可能性のあるタグ付けのものを表示できるように、他の列の下に配置する必要があります。制約 (このプログラムは、古い機器と低解像度の画面を持つ第三世界の国で使用されることに注意してください)。

誰かが私が試したことを尋ねました。各エントリごとに追加の行を追加しようとしましたが、colspan 属性を持つセルは 1 つだけですが、その方法では並べ替えライブラリが機能しません。

<table class="sortable">
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>  
            <th>Col 3</th>  
            <th>Col 4</th>                   
        </tr>
    </thead>
    <tbody>
        <tr class="even">
            <td>1</td>
            <td>2</td>  
            <td>3</td>  
            <td>4</td>                   
        </tr>
        <tr class="even">
            <td colspan="4">First entry tagging stuff</td>
        </tr>
        <tr class="odd">
            <td>5</td>
            <td>6</td>  
            <td>7</td>  
            <td>8</td>                   
        </tr>
        <tr class="odd">
            <td colspan="4">Second entry tagging stuff</td>
        </tr>
        <!-- More and more entries -->
    </tbody>
</table>

列の順序を維持しながらこの UI を実現する方法について他にアイデアがあれば、よろしくお願いします。

もう一度お詫び申し上げます。また、時間をかけて回答し、できる限りの支援をしてくださった方々にも感謝します。

4

4 に答える 4

0

rowspan を使用して 2 つの行のセルをマージし、colspan を使用して列についても同様にマージできます。rowspan と colspan の両方を組み合わせることもできます。あなたが得ようとしている効果を達成できるかどうかはわかりませんが、これが私が知っている唯一の方法です. これもあなたを助けるはずです。http://www.htmlcodetutorial.com/tables/index_famsupp_30.html

于 2013-07-24T20:15:27.963 に答える
0

HTMLではそれができないと思います。

2 つのセルを含む左フローティング テーブルを含む Div を作成し、3 番目のセルのコンテンツを div のコンテンツとして (テーブルの後に) 持つことができます。

<div>
  <table><tr><td>First</td><td>Second</td></tr></table>
  Third with a lot of content that might actually span under the table but it's not part of the table
</div>

そのように：http://jsfiddle.net/9QS44/

于 2013-07-24T20:11:50.263 に答える
0

HTML のテーブル セルが期待どおりに機能しないという以前のポスターに同意します。猫の皮を剥ぐ別の方法は次のとおりです。

<style type="text/css" media="screen">

table {
border-collapse:collapse;
border:1px solid #FF0000;
}

table td{
border:1px solid #FF0000;
}
    table#child {
        width:200px; float:left;
    }
    table#parent {
        width:300px;
        }

</style>
<table id="parent">
    <tr>
        <td>
            <table id="child">
                <tr>
                    <td>1</td>
                    <td>2</td>                   
                </tr>
            </table>Text that<br />wraps<br /> and wraps.
        </td>
    </tr>
</table>

子テーブルの下マージンの量も減らして、テキストが少し近くに折り返されるようにすることができます。

私だったら、この特定のニーズに div を使用することを検討し、テーブルを完全に忘れます。

于 2013-07-24T20:56:47.047 に答える