1

私はこれを達成する方法を探しています:

ボックスの影を表示するために、互いにスペースがある行を持つテーブルを設定します

display:block でなんとか設定できました。レスポンシブデザインを使用できるようにするために、含まれている td 要素をパーセンテージで展開する方法を見つけることができませんでした

ここに、私が何を意味するかを示すフィドルとコードがあります。 http://jsfiddle.net/dN5DM/247/

<table>
    <tr>
        <td>Item 1</td>
        <td>Item 2</td>
        <td>Item 3</td>
    </tr>
    <tr>
        <td>label A </td>
        <td>longLabel B</td>
        <td>short</td>
    </tr>
</table>


table{
    width : 100%;
    border: 0px;
    margin: 5px;  /* how? margin on both sides visible */
}
tr {
    display: block; 
    margin-bottom: 5px;
     -webkit-box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0 5px 5px rgba(0,0,0,0.75);
    box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.75);
}
td {
    height: 80px;
    border: 1px solid red;
    width: 33%;  /* how? expanding the tds to fill the whole row? */
}

</p>

アドバイスをありがとう！

4

1 に答える 1

0

さて、それは機能しましたが、あなたが望むほどではありません（たとえば95％.. :)）。これは私が得ることができる最も近いものです。

テーブル行でdisplay：blockを使用したため、テーブル行としてではなくブロック要素として動作するため、セルが33％を占めていないのはそのためです（理由、わかりません、おそらく誰か知っている）。ただし、行にstyle（shadow）を適用する必要がある場合は、これを行う必要があります。

テーブルのセルをdisplay：blockに変更しようとしました。テーブルセルはフルスペースを占めていましたが、テーブル行に影が表示されなくなりました（なぜ、テーブル行として動作しているためだと思います）。それで、最終的に何も考えずに、テーブルセルにシャドウを適用し、すべてのdisplay：blockを削除しました）。ユーレカ、影が表示されました。唯一のことは、影が行ではなくセルに表示され、視覚的には100％必要な結果ではない可能性があることです。とにかく、ここに作業フィドルがあります。

于 2012-06-25T11:06:22.117 に答える