Doc Hoss Doc Hoss -4 years ago 120
ASP.NET (C#) Question

ASP.Net table width not being displayed correctly

EDIT: If anyone else is looking for this solution, check the comments under the answer marked as correct. Using div tags and inline-block got everything displaying correctly.

I'm trying to get a table to take up 60% of the available space. Nothing seems to change what is being displayed...the table row is taking up 100% (or more) of the available space and not wrapping the elements to the next row. All the data is correct, the formatting just won't take.

Anyone able to help me figure out why the width isn't being respected?

CSS:

/*#region project-data */

.project-data {
width: 60%;
}

.project-alert {
padding: 3px;
text-align: center;
width: 200px;
border: 2px solid #999;
}

.project-alert th {
text-align: center;
}

.al-text {
}

.info-bar {
height: 8px;
}

.last-reported {
font-style: italic;
font-size: small;
}

.al-time {
font-size: small;
}

/*#endregion */


Partial View:

<table class="project-data">
<tr>
@foreach (var item in Model)
{
<td>
<table class="project-alert">
<thead>
<tr>
<th>
@item.TypeText
</th>
</tr>
</thead>
<tbody>
<tr><td class="al-text">@item.AlertText</td></tr>
<tr><td class="info-bar" style="background-color:@item.InfoBar"></td></tr>
<tr><td class="last-reported">Last Reported</td></tr>
<tr><td class="al-time">@item.AlertTime</td></tr>
</tbody>
</table>
</td>
}
</tr>
</table>

Answer Source

The reason why the width is not being respected in your case is that you have nested tables. Just change your html to something simple like:

 <table class="project-data">
    <tbody>
    @foreach (var item in Model)
    {
                <tr>                       
                    <td> @item.TypeText <td>                           
                </tr>                   

                    <tr><td class="al-text">@item.AlertText</td></tr>
                    <tr><td class="info-bar" style="background-color:@item.InfoBar"></td></tr>
                    <tr><td class="last-reported">Last Reported</td></tr>
                    <tr><td class="al-time">@item.AlertTime</td></tr>


    }
  </tbody>
</table>

You can refer to this JSFiddle to see how a simple structure table will respond to the width you are trying to give.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download