I have scoured the web concerning CCS and table-less design. Right now I am basically trying out a basic linear grid such as
row1 - label | textbox
row2 - label | textbox
row3 - label | textbox
I have tried every example and I cannot get anything that looks quite right. I am getting various grid like formats but the label either doesn't line up with the textbox or gets kicked over to the next line. Any help on this is appreciated.
mrrogers
Member
202 Points
728 Posts
Table-less grid structures using CSS
Nov 15, 2012 02:57 AM|LINK
I have scoured the web concerning CCS and table-less design. Right now I am basically trying out a basic linear grid such as
row1 - label | textbox
row2 - label | textbox
row3 - label | textbox
I have tried every example and I cannot get anything that looks quite right. I am getting various grid like formats but the label either doesn't line up with the textbox or gets kicked over to the next line. Any help on this is appreciated.
Bimalvv
Contributor
2356 Points
478 Posts
Re: Table-less grid structures using CSS
Nov 15, 2012 04:19 AM|LINK
Hi,
Did you try CSS3grid layout?
http://www.w3.org/TR/2012/WD-css3-grid-layout-20121106/
Thanks,
Bimal
Bimal
mrrogers
Member
202 Points
728 Posts
Re: Table-less grid structures using CSS
Nov 15, 2012 11:51 AM|LINK
I'm sorry but http://www.w3.org is a horrible site. Their examples are not clear at all. Anyone else?
Dan Bracuk
Contributor
3970 Points
1096 Posts
Re: Table-less grid structures using CSS
Nov 15, 2012 12:14 PM|LINK
Example 1 of the site mentioned earlier seemed ok to me. What part of it gave you difficulty?
asteranup
All-Star
30184 Points
4906 Posts
Re: Table-less grid structures using CSS
Nov 16, 2012 04:04 AM|LINK
Hi,
You can check this-
http://forums.asp.net/p/1798757/4961066.aspx/1?Re+how+to+create+a+table+using+DIV+tag
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
ggaurav
Member
529 Points
218 Posts
Re: Table-less grid structures using CSS
Nov 16, 2012 06:01 AM|LINK
I want to create a table using DIV tag. My code is following:
<style type="text/css">
.divtable
{
display:table;
}
.divrow
{
display:table-row;
}
.divcol
{
display:table-column
Float:;
}
</style>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div class="divtable">
<div class="headrow">
<div class="divcol">Cust_no</div>
<div class="divcol">Name</div>
<div class="divcol">address</div>
</div>
<div class="divrow">
<div class="divcol">001</div>
<div class="divcol">poonam</div>
<div class="divcol">ashok vihar</div>
</div>
<div class="divrow">
<div class="divcol">002</div>
<div class="divcol">reena</div>
<div class="divcol">preet vihar</div>
</div>
</div>
</form>
</body>
</html>
output is coming like this
<form id="form1"><div class="divtable"> <div class="headrow"> <div class="divcol">Cust_no</div> <div class="divcol">Name</div> <div class="divcol">address</div> </div> <div class="divrow"> <div class="divcol">001</div> <div class="divcol">poonam</div> <div class="divcol">ashok vihar</div> </div> <div class="divrow"> <div class="divcol">002</div> <div class="divcol">reena</div> <div class="divcol">preet vihar</div> </div> <div class="divcol"></div> <div class="divcol">Every value is coming in only one column not in different column. Can somebody correct my code.</div> </div> <div class="divcol"></div> <div class="divcol">thanks.</div> </form></form><form>Hope it helps.
</form>-Gaurav Bhandari
=======================================
If this post is useful to you, please mark it as answer.
roopeshreddy
All-Star
20143 Points
3327 Posts
Re: Table-less grid structures using CSS
Nov 16, 2012 06:31 AM|LINK
Hi,
Did you tried this - http://nicholasbarger.com/2009/06/22/a-simple-tableless-form/
Hope it helps u...
Roopesh Reddy C
Roopesh's Space
mrrogers
Member
202 Points
728 Posts
Re: Table-less grid structures using CSS
Nov 16, 2012 11:32 AM|LINK
I found this example, it's great:
http://chrismaxwell.com/tableless/grid.html