2

最初の行に 3 つのセルがあるこのテーブルがあります。スペースがないと最後のセルを倒すようなデザインを作ろうとしています。つまり、上に 2、下に 1 のようなものです。そして、ウィンドウが各行でさらに小さくなります。このようなものが見つからなくて困っています。

サイズに応じてすべてのセルを互いに積み重ねる応答性の高いデザインを得ることができましたが、より良い解決策を見つけることができれば、より良いものになります。

HTML:

<table id="dashboard" cellpadding="0" cellspacing="0">
    <tr>
        <td id="TopLeft"><div class='chartLoadingOverlay'>Loading chart please be patient...</div></td>
        <td id="TopRight"><div class='chartLoadingOverlay'>Loading chart please be patient...</div></td>
        <td id="BottomLeft"><div class='chartLoadingOverlay'>Loading chart please be patient...</div></td>
    </tr>
</table>

CSS:

#dashboard{
    border-collapse: separate;
    border-spacing: 5px 5px;
    border: 5px solid red;
    background-color: blue;  
}

div.chartLoadingOverlay{
    font-style:italic;
    color:gray;
    border:1px silver solid;
    background-color:#F5F5F5;
    line-height:250px;
    height:250px;
    width:500px;    
    text-align:center;  
    margin:2px;
}

@media only screen and (max-width: 1000px){
    /* Force table to not be like tables anymore */
    #dashboard table{ 
         width: 100%; 
         border-collapse: collapse; 
         border-spacing: 0;
         display: block; 
         position: relative; 
         width: 100%;
    }

    #dashboard tbody { 
        /*display: block;*/
        width: auto; position: relative; 
        overflow-x: auto; 
        white-space: nowrap; 
    }

    #dashboard tbody tr { 
        display: inline-block; 
        vertical-align: top; 
    }   

    #dashboard td { 
        display: block; 
    }
}
4

4 に答える 4

1

それは可能ではありません。しかし、それが実行可能であったとしても、より洗練された解決策は、3 つの div を並べてスタックし、応答性よくそれらを上下に配置することです。このBootstrap の例を確認して、必要なものと非常によく似たものを見つけてください。

于 2013-09-12T19:55:46.250 に答える
0

申し訳ありませんが、これが可能だとは思いません..実際には不可能です...表形式のデザインを壊すことはできません...

行とはどういう意味ですか???セルのコレクションです...したがって、1つの行には常に特定の数のセルが含まれます...画面の幅に応じて行のセルの数を変更することはできません..その固定...

たとえば、このテーブルを画像で考えてみましょう

ここに画像の説明を入力

画面の幅が小さすぎて全幅に対応できない場合、水平方向にオーバーフローし、水平スクロールバーが導入されます...そして、1 つのセルが高すぎると、行サイズは最も高いセルと残りのセルの高さになりますデフォルトでは垂直方向の中央に配置されます...画面サイズに応じてこのプロパティを動的に変更することはできません

あなたができることは..を使用して幅を%定義することです..画面の幅に応じて拡大または縮小します...

これは、表形式のデザインを避けるべき理由の 1 つです (実際にはたくさんあります)。container( <div>) を使用して Web サイトをデザインします。

于 2013-09-12T19:49:31.917 に答える