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 width-attribute，或者我在你的问题中遗漏了什么？

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

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

3 个答案: