Как сделать так, чтобы ширина динамической таблицы не увеличивалась?

Question

У меня есть таблица, которая создается динамически.Иногда в нем может быть два столбца, а иногда 20.

Моя проблема в том, что при загрузке таблицы увеличивается ширина таблицы.

Как исправить это?

 <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;
}

Таблица заполнена:

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

Answer 1

Прежде всего, может быть, вам следует задуматься над тем, как вы генерируете свою таблицу, поскольку вы помещаете все в одну строку, а затем разделяете отдельные «строки» с помощью <br /> ... но это ваше дело.

Чтобы указать ширину в css, вы можете, как говорили другие авторы, использовать:

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

Очевидно, что для этого вам нужно ввести правильную ширину.Здесь у вас есть небольшой рабочий пример: http://jsfiddle.net/ramsesoriginal/Guj5y/2/

Вы также можете работать с min-width и max-width, но, к сожалению, Internet Explorer не очень хорошо их поддерживает.

РЕДАКТИРОВАТЬ: Я отредактировал приведенный выше пример и jsfiddle, когда увидел, что вы делаете.Если столбцов так много, что таблица не уместится внутри заданной ширины, она будет расширяться, игнорируя ширину и даже игнорируя возможные overlow:hidden;.

Решение заключается в свойстве table-layout:fixed;, котороеопределяет, что таблица должна быть в точности такой же ширины, как вы ее определили.так как это может испортить ваш текст (он может полностью перекрывать друг друга), вы можете добавить word-wrap:break-word;, чтобы разбить слова на несколько строк.

table-layout:fixed; довольно хорошо поддерживается, за исключениемIE / Mac (http://caniuse.com/#search=table-layout), word-wrap:break-word; менее поддерживается (хотя http://caniuse.com/#search=word-wrap показывает иное, break-word немного сложно ...), но вы можете оставить его там, так как он выиграл 'Это делает вас больно и делает ваш сайт перспективным.

Answer 2

Как насчет установки атрибута ширины CSS для таблицы, или я что-то упустил в вашем вопросе?

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

Answer 3

К вашим настройкам #XMLTable в CSS добавьте:

width: 100%;

РЕДАКТИРОВАТЬ:

Если это не сработает, то, вероятно, минимальная ширина содержимого вашей таблицы ширечем вы хотите, чтобы это было.Вы можете решить эту проблему, разбив элементы самой длинной ширины, например, вы можете заменить неразрывные пробелы обычными пробелами, чтобы механизм HTML мог переносить текст в этом столбце.