如何使动态表的宽度不增加？

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 设置中，添加：

width: 100%;

编辑：

如果这不起作用，那么表格内容的最小宽度可能比您想要的宽。您可以通过以某种方式拆分最长宽度的项目来解决此问题 - 例如，您可以用常规空格替换不间断空格，以便 HTML 引擎可以将文本换行在该列中。

Answer 3

如何设置表格的 CSS 宽度属性，或者我在您的问题中遗漏了什么？

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