0

次の画像のようなテーブルを作成しようとしています。

サンプルテーブル

上記のスタイルを除いて、上記のようなテーブルも作成しました。私のテーブル。

マイテーブル

これは私のCSSです：

.table thead th {
    vertical-align: middle;
    background-color: #FFFFFF;
    border-bottom: thin;
    border-top: thick;
    border-bottom-width: 4px;
    width:300px;
    height:30px;
    background-color:white;
    box-shadow: 2px 2px 5px grey;
    border-bottom : thin;
    border-top:thick;
}
.table th {
    font-weight: bold;
    cursor: pointer
    width:100%;
    height:40px;
    background-color:#FFFFFF;
    box-shadow: 0 0 5px grey;
    border-bottom: thin; 
    border-top:thick;
    vertical-align: middle;
    border: 1px solid #DDD

}
.table th,.table td {
    height: 20px;
    max-width: 250px;
    padding: 1px 5px 2px 10px;
    overflow: hidden;
    line-height: 20px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid #DDD
}

結果は私が探しているものではありません。バックボーン.marionette.jsでbackgrid.jsを使用して実行時に生成されるため、HTMLテーブルコードを提供することはできません

アップデート ：

this is the CSS



box-shadow: 
        inset 0px 11px 8px -10px #CCC,
        inset 0px -11px 8px -10px #CCC;

それでもtdの間に線が表示されます。垂直線ではなく水平線のみを表示したいです。

どうやってするか？

これを成し遂げるのを手伝ってください。

4

1 に答える 1