0

固定幅のインライン ブロックを使用してテーブル要素を再作成しようとしていますが、ブラウザー (Chrome および IE) の間隔要素で明らかに一貫性のない動作に苦しんでいます。

問題の画像は次のとおりです。

ここに画像の説明を入力

問題は、最初の 2 行 (ヘッダーとして機能し、ページの静的 HTML の一部である必要があります) のspan右側に奇妙なスペースができることです。CSS から以下を読むことができるように、以下のマージンがあります。 0 が宣言されました (これは明らかに WIP です。一部spanは s などに置き換える必要があるdivため、ご容赦ください。)

代わりに、Javascript を使用して実行時に行を動的に追加すると、下の 2 つの行が表示されます。これは予想される動作です。青でこれらの行のコンテナを見つけることができます - これらdivすべてを含む要素の 100%。通常のテーブルの代わりにこのアプローチを使用している理由は、動的データ行をスクロール可能にしたいからですtable。

HTMLは次のとおりです。

 <span class="cssTRC">
            <span>
                <span>Day</span>
                <span>Loc</span>
                <span>Nagare</span>
                <span>Pcs</span>
                <span>Packs</span>
            </span>
            <span>
                <span>Thu 30 Aug</span>
                <span>E5-1</span>
                <span>{only DI}</span>
                <span>480</span>
                <span>1</span>
            </span>
    </span>
   <span id="ctblrcOrdHist" class="cssTRC">
         <span>
              <span>Thu 30 Aug</span>
              <span>E5-1</span>
              <span>DI</span>
              <span>480</span>
              <span>1</span>
         </span> 
         <span>
            <span>Thu 30 Aug</span>
            <span>KE-1</span>
            <span>DI</span>
            <span>500</span> 
            <span>1</span>
         </span>
      </span>

および CSS は次のように定義されます。

.cssTH>span>span,.cssTRC>span>span
{
    display:inline-block;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
    font-size:1em;
    box-sizing:border-box;
    width:5em;
    padding:0.2em;
    margin:0;
    border:0 solid red/*#E8EEF4;*/;
    border-width:0 0 1px 1px;
}
.cssTH>span, .cssTRC>span
{
    display:block;
}
.cssTRC
{
    border:0 solid #E8EEF4;
    border-width:1px 1px 0 0 ;
    display:block;
    /*max-height:200px;
    overflow-y:auto;*/
    box-sizing:content-box;
}

問題は明らかに、実行時に疑似ヘッダーを追加せずに最初の 2 行で期待される動作を取得する方法です (これは恐ろしいことです)。

編集

誰かがそれを必要とする場合に備えて、これが基本的な CSS テーブルレイアウトの小さな例としても機能するように、より便利だと思うソリューションを書き留めます。

            <div>
                 <span>Day</span
                ><span>Loc</span
                ><span>Nagare</span
                ><span>Pcs</span
                ><span>Packs</span>
            </div>
4

2 に答える 2

2

</span>との間にスペースを入れないでください (2 つの要素の間にある可能性のあるあらゆる種類の空白は、それらを<span>使用してinline-blockいるときに重要ですdisplay: inline-block)。

このような：

<span>Day</span><span>Loc</span>

JavaScript で追加すると、終了タグと次の開始タグの間に空白が挿入されないため、問題なく表示されます。

于 2012-09-02T14:45:36.240 に答える
2

スパン間の空白による問題 -デモ

floatこの例では修正を使用しました。この問題を修正するその他の方法については、こちらをご覧ください。

于 2012-09-02T14:45:43.600 に答える