0

DIVにボーダー付きのリストテーブルを作成したいです。列の幅のコンテンツが増えると、改行と境界が増加しますが、他の列の境界は増加しません。例を参照してください。

div ベースの CSS テーブル 

        .list_container{
            float:left;
            width: 550px;
            margin-bottom:10px;
            font-family: vardana;
        }

        .list_row{
            float:left;
            width: 548px;
            border-bottom:1px #9F9F9F solid;

        }
        .list_row:hover{
            background-color:#CCCCCC;
        }
        .list_rowHeader{
            float:left;
            width: 548px;
            border-bottom:1px #9F9F9F solid;
            border-top:1px #9F9F9F solid;
            font-weight: bold;
            background-color: #FF0000;
            color: #FFFFFF;
        }
        .list_column{
            float:left;
            padding: 3px;
            border-left: 1px #9F9F9F solid;
        }

        .list_columnLast{
            float:left;
            padding: 3px;
            border-left: 1px #9F9F9F solid;
            border-right: 1px #9F9F9F solid;
        } 

        .even{ background-color:#E0E0E0!important;}
        .odd{ background-color:#FFFFFF!important;}
    </style>
</head>

<body>      
    <div class="list_container"  >
        <div class="list_rowHeader" >
            <div class="list_column" style="width: 250px;">Name</div>
            <div class="list_column" style="width: 96px;"> Bid Amount</div>
            <div class="list_columnLast" style="width: 180px;"> Email </div>
        </div> 
        <div class="list_row even" >
            <div class="list_column" style="width: 250px;">Saidul Haque</div>
            <div class="list_column" style="width: 96px;"> 2131231</div>
            <div class="list_columnLast" style="width: 180px;"> saiduleye@gmail.com</div>
        </div> 
        <div class="list_row odd" >
            <div class="list_column" style="width: 250px;">Saidul Haque, Sonargaon, Bangladesh Dhaka, </div>
            <div class="list_column" style="width: 96px;"> 2131231</div>
            <div class="list_columnLast" style="width: 180px;"> saiduleye@gmail.com</div>
        </div>
        <div class="list_row even" >
            <div class="list_column" style="width: 250px;">Saidul Haque</div>
            <div class="list_column" style="width: 96px;"> 2131231</div>
            <div class="list_columnLast" style="width: 180px;"> saiduleye@gmail.com</div>
        </div>
    </div>
</body>

誰でもこの問題を解決できますか？

4

1 に答える 1

0

わかりましたので、動作させました - .list_column クラスに特定の高さを設定する必要があります: (DOCTYPE を追加したところ、CSS/INLINE スタイルの形式がわずかに改善されました)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.list_container{
    float:left;
    width: 548px;
    margin-bottom:10px;
    font-family: vardana;
    border: 1px #9F9F9F solid;
}

.list_row{
    float:left;
    width: 548px;
    border-bottom:1px #9F9F9F solid;
}
.list_row:hover{
    background-color:#CCCCCC;
}
.list_rowHeader{
    float:left;
    width: 548px;
    font-weight: bold;
    background-color: #FF0000;
    color: #FFFFFF;
}
.list_column{
    float:left;
    width: 250px;
    /* height: 50px; /* Need a height - UNCOMMENT */
    /* min-height: 50px; /* Need a height - UNCOMMENT  */
    padding-left: 3px;
    padding-right: 3px;
    border-right: 1px #9F9F9F solid;
}

.list_columnLast{
    float:left;
    padding: 3px;
    width: 180px;
} 

.even{ background-color:#E0E0E0!important;}
.odd{ background-color:#FFFFFF!important; }
</style>
</head>

<body>      
    <div class="list_container">
        <div class="list_rowHeader">
            <div class="list_column">Name</div>
            <div class="list_column" style="width: 96px;"> Bid Amount</div>
            <div class="list_columnLast"> Email </div>
        </div> 
        <div class="list_row even">
            <div class="list_column">Saidul Haque</div>
            <div class="list_column" style="width: 96px;"> 2131231</div>
            <div class="list_columnLast"> saiduleye@gmail.com</div>
        </div> 
        <div class="list_row odd">
            <div class="list_column">Saidul Haque, Sonargaon, Bangladesh Dhaka,</div>
            <div class="list_column" style="width: 96px;"> 2131231</div>
            <div class="list_columnLast"> saiduleye@gmail.com</div>
        </div>
        <div class="list_row even">
            <div class="list_column">Saidul Haque</div>
            <div class="list_column" style="width: 96px;"> 2131231</div>
            <div class="list_columnLast"> saiduleye@gmail.com</div>
        </div>
    </div>
</body>

それが役立つことを願っています！^_^ <(エンジョイ)

于 2010-05-20T09:03:50.073 に答える