如何讓動態表的寬度不增加？

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

首先，也許你應該overthink你如何生成你的表，因爲你把一切都放在一排，然後用<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; 
}