CODEWITHSUNDEEP
htmlcssasp.net
TheDoc
TheDoc

Reputation: 718

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>

Upvotes: 0

Views: 204

Answers (1)

Himanshu Arora
Himanshu Arora

Reputation: 2568

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.

Upvotes: 1

Related Questions