How to Responsive Div Table Struggle Multiple Rows

Total Post:128

Points:898

C#  HTML 
 1987  View(s)
Ratings:
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>

 

  1. Re: How to Responsive Div Table Struggle Multiple Rows

    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>

     

      Modified On Apr-07-2018 06:25:40 AM

Answer

Please check, If you want to make this post sponsored

You are not a Sponsored Member. Click Here to Subscribe the Membership.