How to make width of a dynamic table not increase? - css

Question

I have a table which is created dynamically. Sometimes it can have two columns and sometimes 20.
My problem is if it has loads the width increases of the table.
How to I make it fixed?
<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;
}
The table populated:
<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 & Brumfield</td>
</tr>
</table>

Answer 1

First of all, maybe you should overthink how you generate your table, since you put everything in one row, and then split the single "rows" with <br />... but that's up to you.
To specify the width in css you can, as the other posters said, use:
.rightXMLSubCategory table {
width: 200px;
table-layout:fixed;
word-wrap:break-word;
overflow:hiden; /* Fallback for IE/Mac */
}
Clearly you have to insert the right width for this to work.
Here you have a small working example:
http://jsfiddle.net/ramsesoriginal/Guj5y/2/
You could also work with min-widthand max-width, but sadly Internet Explorer doesn't support them well..
EDIT:
I edited the above example and the jsfiddle as I saw what you ment. If there are so many columns that the table won't fit inside the given width, it will expand, ignoring the width and even ignoring eventual overlow:hidden;.
The solution lies in the table-layout:fixed; property, which defines that the table should be exactly as wide as you have defined it. since doing so would mess up your text (It would overlap all the way), you can add a word-wrap:break-word; to make it break the words to multiple lines.
table-layout:fixed; is pretty well supported, except for IE/Mac (http://caniuse.com/#search=table-layout), word-wrap:break-word; is less supported (even though http://caniuse.com/#search=word-wrap shows otherwise, the break-word is a bit tricky..), but you can leave it there since it won't hurt you and makes your site future-proof.

Answer 2

To your #XMLTable settings in CSS, add:
width: 100%;
EDIT:
If that doesn't work, then probably the minimum width of the content of your table is wider than you want it to be. You can solve this by breaking up the longest-width items somehow -- for instance, you may replace non-breaking spaces by regular spaces so that the HTML engine can wrap the text in that column.

Answer 3

How about setting the CSS width-attribute for the table, or am I missing something in your question?
#XMLtable
{
border-radius:4px;
border: 1px solid #004389;
width: 400px;
}