How can I css for List/grid in div with border?
Posted
by Saidul Haque Nayan
on Stack Overflow
See other posts from Stack Overflow
or by Saidul Haque Nayan
Published on 2010-05-20T08:49:07Z
Indexed on
2010/05/20
8:50 UTC
Read the original article
Hit count: 271
I want to create a list table in DIV with border. When more content of width of a column then line break and border increase but other column border not increase. see the example:
Untitled Document /list/
.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;"> [email protected]</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;"> [email protected]</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;"> [email protected]</div>
</div>
</div>
</body>
Any body solve this problem?
© Stack Overflow or respective owner
