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 add a 3rd level to my CSS drop down menu?

    How should you comment css? [closed]

    how to route to css/js files in mvc.net

    How to remove and override CSS attribute from parent class?

    How to remove
      unordered list's last
    • list item's border using css without changing anything in HTML code?

    How to get multiple rotating background cover with css / Full screen slideshow

    How to fix this css float problem?

    How do horizontally align text next to an image with CSS

    How to concatenate XHTML files in Java resolving any possible CSS conflicts?

    How to convert shorthand CSS to longhand?

    CSS - How to make the A Link work inside a DIV with background image

    How do I confer CSS properties upon elements retrieved from $.ajax()?

    How to select first a element of li with CSS?

    How to add a “new line” after a ZF2 form element?

    How are CSS frameworks used?

    How to shorten blockquote to wrap around floated div?

    how to make tab bar in jquery mobile?

    How to Make Glossy Colors in CSS. [closed]

    HTML - How to put text over a white background over a background image

    How to link a HTML page to a CSS file when the CSS file is in an upper directory?

    How to create CSS internal style sheet in CakePHP

    How do I avoid a fullscreen background image to scale with appearing scroll bars?

    How to make a div scroll able when window height is reached

    How to redefine a CSS class for the whole document?

    ValidationSummary and ValidationMessageFor with custom CSS shown when no errors present

    In SASS, how to avoid space before interpolation when creating a selector?

    How to design multiple time clock wise rotation of a image in css

    How can i make my paragraph go to the next line after a certain width

    How do I create page transitions for my website

    CSS/HTML : how to make something become absolute positioned once you scroll by it