How to make width of a dynamic table not increase?


Tags: css,table,razor

Problem :

I have a table which is created dynamically. Sometimes it can have two columns and sometimes 20.

My problem is if it has loads the width increases of the table.

How to I make it fixed?

 <div class="rightXMLSubCategory">
        <table id = "XMLtable">
            <tr>
                @foreach(var item in Model.Part.attributes){
                    foreach(var attr in item.attr_type){
                        <th>
                            @attr.name                 
                        </th>                 
                    } 
                }                
            </tr>    
            <tr>
                @foreach(var item in Model.Part.attributes){
                    foreach(var attr in item.attr_type){
                        <td>
                          @foreach(var attrs in attr.attr_value){
                             @attrs    
                              <br/>                           
                           }              
                        </td>                 
                    } 
                }                
            </tr>      
        </table>

CSS:

.rightXMLSubCategory    
{
    text-align:left;
    width: 710px;
    padding-left: 230px;
}

#XMLtable
{
    border-radius:4px;
    border: 1px solid #004389;   
}

#XMLtable th
{
    border-left: 1px solid #0066B3;   
    border-right: 1px solid #0066B3;
    border-bottom: 1px solid #0066B3;
    padding:3px 3px 3px 3px;
    color: white;
    background-color: #004389;
}

#XMLtable td
{
    border-left: 1px solid #0066B3;   
    border-right: 1px solid #0066B3;
    border-bottom: 1px solid #0066B3;
    padding:3px 3px 3px 3px;
    color: white;
    background-color: #0066B3;
}

The table populated:

          <table id = "XMLtable">

            <tr>

                            <th>

                                Product Type                 

                            </th>                 

                            <th>

                                Actuator Style                 

                            </th>                 

                            <th>

                                Button Color                 

                            </th>                 

                            <th>

                                Termination Type                 

                            </th>                 

                            <th>

                                Panel Thickness                 

                            </th>                 

                            <th>

                                Circuit Breaker Style                 

                            </th>                 

                            <th>

                                Current Rating                 

                            </th>                 

                            <th>

                                Operating Voltage, Max.                 

                            </th>                 

                            <th>

                                Series                 

                            </th>                 

                            <th>

                                Brand                 

                            </th>                 

            </tr>    

            <tr>

                        <td>Circuit Breaker</td>                 

                        <td>Push to Reset</td>                 

                        <td>Red</td>                 

                        <td>6.35 [.250] Straight Quick Connect Tab</td>                 

                        <td>0.81 - 1.57</td>                 

                        <td>Fuseholder Type</td>                 

                        <td>9</td>                 

                        <td>32 VDC250 VAC</td>                 

                        <td>W28</td>                 

                        <td>Potter &amp; Brumfield</td>                 

            </tr>      

        </table>


Solution :

First of all, maybe you should overthink how you generate your table, since you put everything in one row, and then split the single "rows" with <br />... but that's up to you.

To specify the width in css you can, as the other posters said, use:

.rightXMLSubCategory  table {
    width: 200px;
    table-layout:fixed;
    word-wrap:break-word;
    overflow:hiden; /* Fallback for IE/Mac */
}

Clearly you have to insert the right width for this to work. Here you have a small working example: http://jsfiddle.net/ramsesoriginal/Guj5y/2/

You could also work with min-widthand max-width, but sadly Internet Explorer doesn't support them well..

EDIT: I edited the above example and the jsfiddle as I saw what you ment. If there are so many columns that the table won't fit inside the given width, it will expand, ignoring the width and even ignoring eventual overlow:hidden;.

The solution lies in the table-layout:fixed; property, which defines that the table should be exactly as wide as you have defined it. since doing so would mess up your text (It would overlap all the way), you can add a word-wrap:break-word; to make it break the words to multiple lines.

table-layout:fixed; is pretty well supported, except for IE/Mac (http://caniuse.com/#search=table-layout), word-wrap:break-word; is less supported (even though http://caniuse.com/#search=word-wrap shows otherwise, the break-word is a bit tricky..), but you can leave it there since it won't hurt you and makes your site future-proof.


    CSS Howto..

    CSS - How to prevent the DIV without content from shrinking

    How do I stop animation in HTML and CSS

    How to Make a Pentagram with CSS Border Attributes

    How do I avoid multiple jquery dropdown boxes interfering with eachother

    CSS: How to make an image-border

    CSS Keyframes: How to move div to certain position

    CSS: how to add a down arrow for the active link

    How to create a dotted shadowy effect on an image with CSS?

    How to do a dynamic pulsating button in javascript?

    How to locate which css include is used for an element

    Best practice: how to name css default state? [closed]

    How to id dom table so I can position it on page?

    Is it possible to have a web browser scroll to show CSS fixed position items that are outside the viewport of the web browser?

    How to change from one stylesheet to another with jQuery?

    How can I get jQuery or Javascript to change css based on the current url?

    How to Add sub menu to dropdown menu in Blogger

    How to load different CSS based on the category of the post on WP

    How can I “cloak” my Javascript and CSS files using PHP?

    How to make a horizontal scroll when minifying window?

    How to eliminate an annoying blue line in a border area of a hyperlink / h2 class with CSS

    How to apply alternate background color for each column in CSS columns

    Chrome showing target link after event has been prevented

    how to make div with image like below in html and css

    how to currency convert in java script

    Color not showing up in Safari but everything is working in MSIE, FF and Chrome browsers

    How to create CSS dropdown

    How do I align an inner div with the bottom of an outer div?

    How to fix internet explorer 9 overflow with form elements displayed in a list and “display:table”-based layout

    How to retrieve sibling content in jquery?

    How to center two columns using CSS without using a fixed width container?