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

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 有点棘手..)，但您可以将其留在那里，因为它不会伤害您并使您的网站永不过时。