3

I have two gridviews in a aspx page, each bounded with similar data. Here is the screen shot. Sample Picture

The width of each column in the grid is defined in % and are the same for both the grids. Even then the output is not as expected, but slight variations in the column width. I need to make sure both the grids columns should appear same. Does any one know how to fix this (.net/javascript). Thanks for the help in advance.

Murty
  • 79
  • 2
  • 9
  • +1, for the screenshot. And because you have very low rep. – ApprenticeHacker Jan 11 '12 at 13:04
  • 1
    Assuming that the only style you are caring about is the width the problem is that even if you explicitly set widths the browser may still expand columns to fit content. And because they are different tables it will do so completely indepedantly. The only thing I can think of would be to use javascript to measure both your tables and then use some metric to work out a suitable set of widths that suit both tables. This could be tricky though and I'm not sure what a good metric would be. :( – Chris Jan 11 '12 at 13:08
  • please consider choosing an answer.. – techBeginner Feb 27 '12 at 07:25

3 Answers3

1

while building the table set the class for each column individually, and then set the width in CSS

<table style="width: 100%;">
    <tr>
        <td class='firstCol'></td>
        <td class='secCol'></td>
        <td class='thrdCol'></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

and style

<style type="text/css">
    .firstCol
    {
        width: 10%;
        }

   .secCol
    {
        width: 20%;
        }

   .thrdCol
    {
        width: 30%;
        }

</style>
techBeginner
  • 3,792
  • 11
  • 43
  • 59
0

You could use CSS and classes. For example on table rows you would like to keep the same you can write

<tr class="specialrow">

or for certain cells

<td class="specialcell">

You would write the css like this

.specialcell
  {
    width:100px;
  }

Perhaps a jsfiddle would help further?

Undefined
  • 11,234
  • 5
  • 37
  • 62
  • 3
    I hate downvoters... Surely the best way to get the answer is to expand upon an answer. Perhaps by leaving a comment on my answer with what is wrong, or even editing my answer! Rant over. – Undefined Jan 11 '12 at 13:10
  • downvote may be because you didn't go through the question properly..question asked was regarding column width, and you have answered for color.. – techBeginner Jan 11 '12 at 13:30
  • Thanks for the heads-up, at least i know what i can change to improve the answer :) – Undefined Jan 11 '12 at 13:32
0

A way to ensure both tables are equals is to use just one table. It's not the best solution, but it will get the job done. In order to put the separation between them, you will need to put a <tr colspan="14"><td>&nbsp;</td></tr> between them.

Again, it's not the best solution. If from your business perspective it makes sense to have it this way (the tables shows information about the same thing and makes sense to think of it as a whole), then you can use it without guilt.

Anyway... looking for some information about having several s and s in the same table lead me to this answer that has a lot of useful information about how to do it: Multiple thead/tbody design

you may try using the css table-layout:fixed in both tables and then specify the widths for each column in the css.

Community
  • 1
  • 1
Ivo
  • 8,172
  • 5
  • 27
  • 42
  • I may not able to do this because the summary table should be independent, because when the user scroll down the page the summary table will stick on the top of the browser. For this reason I suppose its better to be a table rather than combining to one table. – Murty Jan 11 '12 at 14:21
  • Ok. Try the table-layout:fixed with fixed column sizes. It should work. – Ivo Jan 11 '12 at 14:36