Home > DeveloperSection > Forums > How to Responsive Div Table Struggle Multiple Rows
Ashish Pandey

Total Post:128

Points:898
Posted on    January-06-2015 10:42 PM

 ASP.Net C#  HTML 
Ratings:


 1 Reply(s)
 998  View(s)
Rate this:

I'm looking for a solution to my responsive table struggles.

I have a table with rows of different column lengths within a content wrapper of 960px.

However the cols of two and three don't fit the same width when they're 50% or 49% and 33% of 33.3% respectively.

I've trawled through google's suggestion guides but nothing I've seen thus far offers up what I'm looking for.

Is it possible to make a truly responsive div table with different col lengths in the rows?

Demo code

<div class="masterTable">

        <div class="row" style="width: 100%;">

 

            <div class="col3" style="width: 33%">

                <asp:TextBox ID="TB1" runat="server"></asp:TextBox>

            </div>

            <div class="col3" style="width: 33%">

                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

            </div>

            <div class="col3" style="width: 33%">

                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

            </div>

        </div>

        <div class="row" style="width: 100%;">

 

            <div class="col2" style="width: 50%">

                <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>

            </div>

            <div class="col2" style="width: 50%">

                <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>

            </div>

        </div>

    </div>

</div>

 



Manoj Bhatt
Manoj Bhatt

Total Post:153

Points:1079
Posted on    January-06-2015 10:59 PM

I would like to refer to Bootstrap.

It's a framework used by many developers in order to gain beautifull responsive designs.

Intro to there Gridsystem ( see tab Css on the bootstrap website ):

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Take a look at this, it will you save a lot of time.

Code:

<div class="masterTable">

        <div class="row">

 

            <div class="col-sm-4">

                <input id="text1" class="form-control" />

            </div>

            <div class="col-sm-4">

                <input id="text2" class="form-control" />

            </div>

            <div class="col-sm-4">

                <input id="text3" class="form-control" />

            </div>

        </div>

        <div class="row">

 

            <div class="col-sm-6">

                <input id="text4" class="form-control" />

            </div>

            <div class="col-sm-6">

                <input id="text5" class="form-control" />

            </div>

        </div>

    </div>

</div>

 


Don't want to miss updates? Please click the below button!

Follow MindStick