Creating a custom HTML table with dynamically generated content - tips on controlling the width restrictions

I'm currently working on a project in MVC3 where I need to create a dynamic table.

However, I've encountered an issue where the table extends beyond the page layout and doesn't stay contained within the shared div.

@{
    ViewBag.Title = "Users";
}

<h2>Users</h2>

<p>
    @Html.ActionLink("Create New User", "Create")
</p>


    <table>
        <tr>
            <th>
                UserID
            </th>
            <th>
                UserName
            </th>
            <th>
                UserForename
            </th>
            <th>
                PW
            </th>
            <th>
                UserTypeID
            </th>
            <th>
                PasswordMustBeChanged
            </th>
             <th></th>
        </tr>

    @foreach (var item in Model) {
        <tr>
            <td>
              @Html.DisplayFor(modelItem => item.U1_UserId)
            </td>
            <td>
                 @Html.DisplayFor(modelItem => item.U1_UserName)
            </td>
             <td>
               @Html.DisplayFor(modelItem => item.U1_UserForename)
            </td>
             <td>
               @Html.DisplayFor(modelItem => item.U1_PW)
            </td>
            <td>
                 @Html.DisplayFor(modelItem => item.U1_UserTypeID)
            </td>
             <td>
               @Html.DisplayFor(modelItem => item.U1_PasswordMustBeChanged)
            </td>
             <td>
                @Html.ActionLink("Edit", "Edit", new { id=item.U1_UserId }) |
                @Html.ActionLink("Delete", "Delete", new { id=item.U1_UserId })
            </td>       
        </tr>
    }

The table is supposed to render inside the shared layout using @renderbody. However, it seems to be going outside of the designated div container. Any suggestions on how to fix this?

Answer №1

It appears that there may be an additional <th></th> tag in your header section. Is this intentional or unintentional?

Answer №2

To ensure your table fits within the main section in _Layout, you can add the following style: overflow: scroll;

<section id="main" style="overflow:scroll;">
    @RenderBody()
</section>

If the width of your table exceeds the space available in the main section, scroll bars will automatically appear.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with Registration Form Redirection

This registration form has been created using a combination of HTML, PHP, and MYSQL. However, after filling out the form and submitting it, the page simply reloads. I'm unsure if there is an issue with my PHP or HTML code. I'm at a loss as to w ...

AngularJS - creating a dropdown style that will reset the route

I'm having trouble with my AngularJS spa page and the main navigation dropdown link. When I click on the dropdown, the content inside ng-view disappears. It seems like the angular route is getting confused by the '#' in the href. How can I s ...

Tips for Excluding Content Retrieved Through file_get_contents?

Currently, I am storing the source code of a webpage in a variable called $html using the following line: $html = file_get_contents('http://www.google.com'); When I use <textarea><?php echo htmlentities($html); ?></textarea> ...

Modifying the CSS style of an element on PageA by clicking a button on PageB

For my app, I am incorporating tabs. I want to implement a user button that, when clicked on tab-detail.html, will update the CSS of an element located on its parent tab page, tab.html. .controller('TabCtrl', function($scope,Tabs) { $scope.t ...

Vertically align the content within a div

Here is what I have been working on: http://jsfiddle.net/yisera/2aVpD/ I am trying to vertically center a div inside the .jumbotron-special container. I attempted using display: table; on the parent element and then implementing display:table-cell on th ...

Is the "sizeContent" function in jQuery associated with CSS media queries?

On my website, I have implemented jQuery code to ensure that the height is always full-screen: $(document).ready(function () { 'use strict'; sizeContent(); $(window).resize(sizeContent); }); function sizeContent() { 'use s ...

event handler in JavaScript that triggers upon a click

Encountering an issue with my code <tr> <td id="<?php echo; $id ?>" onclick="addrow(?php echo $id; ?>)">...</td> </tr> <tr id="<?php echo $id; ?>" class="ndisplay">...</tr> <tr id="<?php echo $i ...

The starting point of an html text is signified by < and it concludes with >, showcasing

My HTML <div> <Sample text> </div> <div> <SampleText> </div> In both examples above, blank content is appearing after the DOM is created. I anticipate displaying the text as it appears. Your assistance with this matt ...

Error: Unexpected Meteor Impact

Currently diving into the world of programming and could use some assistance in troubleshooting an issue with my app. Feel free to take a look at the Repo on Github. Error Description: W202306-18:14:53.145(-4)? (STDERR) /Users/Ed/appTest/.meteor/local/bu ...

What is the best way to conceal the li elements that exceed a single line?

I have a unordered list containing product information as list items. My goal is to hide the list items that do not fit on a single line based on the screen size. Therefore, the number of products displayed should adjust depending on how many can fit on a ...

Having trouble with aligning the Bootstrap grid in the center? Something seems to be off

I'm currently working on a project for Free Code Camp, but have encountered an issue. I am struggling to center the paragraph text below the image properly. The grid is set to 4 in this case. <div class="container"> <div class="row"> ...

Canvas: add a translucent layer covering the entire canvas, leaving one window untouched

I'm working on a project where I have a rectangular canvas with an image on it. I want to implement a cool effect where, as the user hovers over the canvas, the whole canvas becomes semitransparent - except for a small rectangle around the cursor whic ...

Alter the top property of CSS using JavaScript

Hey there! I'm currently working on a project where I want to gradually change the background when a button is clicked on my website. Below you'll find snippets of JavaScript and HTML code that I'm using for this purpose. Can you take a look ...

Rows with an ambiguous number of horizontal lines

I am looking to create multiple rows that are horizontally floated, as shown in the image. However, I am facing an issue with setting the width of the container because I do not know the exact number of rows that will be added. Currently, my code looks li ...

Develop a unique card design using HTML and CSS

I am attempting to recreate a card design similar to the one shown in the image, but I am struggling to identify the name on the right side. Even though it is supposed to be clear, I always rely on the image as a reference. https://i.sstatic.net/hDh22.png ...

Style the CSS elements for a specific item

I have a situation where I need to change the background image of a specific element within a CSS class without affecting others. For example, I have a class "a" with a background image that is used for multiple elements, but I only want to change the back ...

Issue with bouncing dropdown menu

I am in the process of enhancing a Wordpress website by implementing a jQuery menu with sub-menus. Below is the jQuery code snippet: $(document).ready(function(){ $('.menu > li').hover(function(){ var position = $(this).position(); ...

The functionality of the back button in jQuery Mobile allows users

I am experiencing an issue with my jQuery mobile website where the back button is not functioning as expected. Despite having a back button on every page except the first one, sometimes it takes me back to the very first page when I am several pages in, an ...

What methods exist to enable individuals to upload files independently through an online form?

I am in the process of creating a support contact form that includes file uploads. The file upload functionality is handled using AJAX, allowing users to upload files and then submit the form when they are ready. However, the current layout where the uploa ...

React application triggers `OnKeyDown` event just once

Hey there! I'm diving into the world of web development and could use some help. My current challenge involves manipulating input data based on key combinations like ctr + ArrowUp (increase) and ctr + ArrowDown (decrease). The dynamic part should be h ...