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

    How to force a div to scale at 100% width of the current windows Browser

    How does the CSS position on a div affects position of sibling division?

    How Do I Make My CSS Slider Auto Play? [closed]

    How to center element in css?

    How to remove CSS underline?

    How to create automatic image gallery slideshow by using HTML,CSS and JavaScript

    How do I make a left-aligned unordered list to the right of a left-aligned picture?

    How can I apply percentage-based positioning to background-image sprites with pure CSS?

    How to get the CSS-Code and save in a String?

    How to run a Javascript function on an iframe before the source (src) is loaded?

    how to select a sibling element when hovering in CSS?

    How can I get two form fields side-by-side, with each field’s label above the field, in CSS?

    How to create grid position elements like in this image css

    How can I convert to a CSS Drop down menu

    How to debug web page rendering compatibility issues across browsers?

    How to target and style specific elements using CSS

    How can you implement a grabbing cursor icon in Chrome?

    How to make a grid of interactive elements?

    how to align in centre using html css

    How can I conditionally change css styles with js?

    How to downsize a larger image while showing only one portion of it in CSS (or adding JS to the mix if necessary)?

    How to apply nested css using jQuery?

    How to develop a solid CSS strategy?

    How to stop this parent element from being affected on hover?

    How to apply CSS string using Javascript/jQuery without parsing/tokenizing to retrieve property-value pairs?

    How overlay two pictures to another using HTML-CSS?

    How to dynamically change the color of the selected menu item of a web page?

    How do you make a sticky nav bar change colour when you scroll to a desired div?

    How do I align my label to the left of my text input box with CSS?

    How to make the CSS width property go from bottom to top