CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Flame_Phoenix
Flame_Phoenix

Reputation: 17574

Set column width of table in bootstrap 2.3.2

I have a c# project using Razor and bootstrap in which there is a table in a page, with several columns.

Now, Bootstrap automatically sets the width of each column to occupy an equal amount of space inside the table, however this is not ideal.

In my table, some columns have more information and need to be wider than others.

This does not happen, and as a result, I end up with a table that has 2 images, one on top of the other (when they should be in the same line), looking horrible.

My approach to fix this problem was the following:

   <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Item Name</th>
                <th>Item Status</th>
            </tr>
        </thead>
        <tbody>
            @foreach(Item anItemin Model.ItemsList){
            <tr>
                <td>
                    @anItem.Name
                </td>
                <td>
                    <div class="row-fluid">
                        <div class="span12">
                            <img class="span6" src="single_chevron/green.png" />
                            <img class="span6" src="single_chevron/white.png" />
                        </div>
                    </div>
                </td>
            </tr>
            }
        </tbody>
    </table>

Now, clearly this fix is not working. I have also tried the classes inline, form-inline, container, and input-append to force the images to stay on the same line (and not one on top of the other) but nothing works.

So basically, I am searching for one of two ways to attack the problem:

Is there a clean way to achieve any of these objectives?

Upvotes: 2

Views: 987

Answers (1)

Armfoot
Armfoot

Reputation: 4921

Bootstrap classes in the old version needed some considerations:

  • a row should have span as children;
  • a span may have row as children but should not have other span as direct children to preserve the grid;
  • img tags are not very friendly with span classes, therefore try avoiding them.

These are possible solutions:

A

<div class="row-fluid">
    <div class="span6">
        <img src="single_chevron/green.png" />
    </div>
    <div class="span6">
        <img src="single_chevron/white.png" />
    </div>
</div>

B

<div class="row-fluid">
    <div class="span12">
        <div class="row-fluid">
            <div class="span6">
                <img src="single_chevron/green.png" />
            </div>
            <div class="span6">
                <img src="single_chevron/white.png" />
            </div>
        </div>
    </div>
</div>

C

<style>
.common-chevron {height: 100px}
#single-chevron-green {background-image: url(single_chevron/green.png)}
#single-chevron-white {background-image: url(single_chevron/white.png)}
</style>
<div class="row-fluid">
    <div id="single-chevron-green" class="span6 common-chevron">
    </div>
    <div id="single-chevron-white" class="span6 common-chevron">
    </div>
</div>

For this one, you may need more CSS rules like background-position to get them right.

Upvotes: 1

Related Questions