---
title: "How to Responsive Div Table Struggle Multiple Rows"  
description: "How to Responsive Div Table Struggle Multiple Rows"  
author: "Anonymous User"  
published: 2015-01-06  
updated: 2015-01-06  
canonical: https://www.mindstick.com/forum/12845/how-to-responsive-div-table-struggle-multiple-rows  
category: "asp.net"  
tags: ["c#", "html"]  
reading_time: 2 minutes  

---

# How to Responsive Div Table Struggle Multiple Rows

I'm looking for a solution to my [responsive](https://www.mindstick.com/blog/11940/tips-for-fast-responsive-web-design-in-2018) [table](https://www.mindstick.com/articles/43918/how-to-design-table-using-bootstrap) struggles.

I have a table with rows of different [column](https://www.mindstick.com/forum/33860/how-to-calculate-column-summary-in-sql-server) lengths within a [content](https://www.mindstick.com/articles/13019/get-the-best-content-marketing-pricing-packages-for-your-brand) 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](https://www.mindstick.com/articles/43833/google-lighthouse-and-how-is-it-changing-the-way-we-development-and-design-websites)'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](https://www.mindstick.com/forum/157370/how-to-swap-neighbor-characters-in-string-e-g-string-demo-would-be-edom) [code](https://yourviews.mindstick.com/view/85458/alan-turing-the-mastermind-behind-cracking-the-enigma-code-during-world-war-ii)**

```
<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>
```

## Replies

### Reply by Manoj Bhatt

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>
```


---

Original Source: https://www.mindstick.com/forum/12845/how-to-responsive-div-table-struggle-multiple-rows

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.