Unable to exceed a width of 100% in Asp.net Tables

I searched for similar inquiries without success. Here is a snippet from my aspx file:

<div align="center" style="height: 350px; overflow-y: scroll; overflow-x: scroll; width: 100%;">
    <asp:Table ID="tblReport" Font-Size="11px" runat="server" ViewStateMode="Enabled">
        <asp:TableHeaderRow Height="30px" ForeColor="#FFFFFF" BackColor="#3b3b3b" Style="font-weight: bold; text-align: left !important; padding-left: 3px; color: #FFF; border-right: 1px solid #ddeaf7;" HorizontalAlign="Center">
        </asp:TableHeaderRow>
    </asp:Table>
</div>

Despite not setting a max-width property, too many columns cause the width to fix at 100%, resulting in text wrapping within cells. I aim for horizontal overflow outside the div instead.

Edit: Adding this line resolved the issue:

td {
    white-space: nowrap;
}
c#cssasp.netwebforms

Answer №1

Below is a simple HTML code snippet example:

div {
  width: 10%;
  overflow: auto;
}
<div>
  <table>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
      <th>E</th>
      <th>F</th>
      <th>G</th>
      <th>H</th>
      <th>I</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </table>
</div>

EDIT -

This is the updated version of your code:

<div align="center" style="height: 350px; overflow: auto; width: 100%;">
    <asp:Table ID="tblReport" Font-Size="11px" runat="server" ViewStateMode="Enabled">
        <asp:TableHeaderRow Height="30px" ForeColor="#FFFFFF" BackColor="#3b3b3b" Style="font-weight: bold; text-align: left !important; padding-left: 3px; color: #FFF; border-right: 1px solid #ddeaf7;" HorizontalAlign="Center">
        </asp:TableHeaderRow>
    </asp:Table>
</div>

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

Excessive whitespace appearing on the right and bottom edges of the Angular application

I'm fairly new to web development, so this may be a silly question, but I really could use some help. I've created my first Angular app and noticed that there is a lot of white space on the right side of the landing page, as well as at the bottom ...

htmlcssangularsass

Clicking 'Back to Top' within an accordion

On my webpage, I have two scrolls present. One is clearly visible on the page (not loaded with ajax), while the other one is located inside an accordion. Both of them share the same class names. I want these scrolls to always be positioned at the top. I&a ...

javascriptjqueryhtmlcsstwitter-bootstrap-4

Conceal Choices During Search using jQuery Select2

I'm having trouble figuring out how to make the Select2 plugin work for my specific color selection feature. My goal is to allow users to choose 5 colors from a list, including an "Other" option. When the user selects "Other", they should be able to ...

jquerycssjquery-select2

Keep scrolling! There's no need to worry about reaching the end of the page and having to start over

I'm experiencing an issue where scrolling only works once when the page is initially loaded. I need it to be able to repeat from the beginning each time. <div class="content"> <div class="next-section blue">First Section</div> & ...

jquerycss

Issue with jquery_ujs: Font Awesome spinning icon animation functions properly in Chrome but not in Safari

I've integrated font-awesome-rails into my Rails project. When a user clicks the submit button on a form: The submit button should display an animated font-awesome spinner and change text to "Submitting...". The button must be disabled to prevent m ...

jquerycssruby-on-railsrubyfont-awesome

Unveiling the secrets to isolating elements from a list based on distinct characteristics

Currently, I am attempting to scrape job skills from the Wuzzuf website using the following code snippet: result = requests.get("https://wuzzuf.net/search/jobs/?q=data+analysis&a=navbl") src = result.content soup = BeautifulSoup(src, "lx ...

htmlcsspython-3.xweb-scraping

Troubleshooting ASP.NET Content Page Error: jQuery Object Expected

Currently working on designing a personal ASP.NET Web page, I have encountered an issue with making a sticky div using jQuery. Despite all my other jQuery functions functioning properly, the sticky div seems to be causing trouble. stickydiv.js $(document ...

javascriptjqueryhtmlasp.netcss

What is the best way to align HTML inputs within a grid, whether it be done automatically or manually using JavaScript?

Arrange 20 HTML inputs with various data types into grid-columns as the user inputs data. Ensure that the grid container has div elements correctly positioned for output. ...

javascripthtmlcss

Create a layout that includes options with checkboxes and divs styled inline

I'm in the process of setting up a voting poll on a website. The poll needs to be presented as a radio button followed by a <div> that contains all relevant poll details. In this <div>, I want the option text to appear on the left and the ...

htmlcsslayout

Extracting and sorting JSON information from an API for integration into a C# program

As part of my IB personal project, I am working on retrieving JSON data from "The virus tracker" API and displaying it in a label using C#. Despite being new to the language, I found some code that worked with basic GET APIs but is giving me trouble with t ...

c#jsonrestsharp

Is there a way to dynamically update one input field while another input field is being modified? [HTML / JS]

I have a form with 3 input fields. One of the inputs is disabled, while the other two are enabled. The goal is to combine the values entered in the enabled fields to populate the disabled field. How can this be achieved? Is it possible for the value in th ...

javascripthtmljquerycss

Guide on customizing webpack to incorporate SCSS in a React application

After creating my React app using create-react-app (with React ver. 16.6.3), I decided to incorporate SCSS into my components. To begin, I ran the eject script and made necessary adjustments in webpack.config.dev.js: { test: cssRegex, exclude: cssMo ...

cssreactjswebpacksass

Tips for visually conveying the values of x and y using SVG symbols

I recently came across a blog post discussing the use of SVG symbols for icons, which inspired me to create representations of symbols using svg files. The original svgs I used had properties like x, y, height and width. However, when I tried adding these ...

htmlcsssvg

Wrapping is disabled for all elements within the container div that contains three additional div elements

I am trying to prevent one of the three divs inside a fixed top navbar container from sliding underneath another, causing the navbar to become taller. The code below is using Bootstrap and the issue is with the navbar-header div sliding underneath the he ...

csshtmltwitter-bootstrap

persistently drifting towards the right despite the absence of direction

Why is the adminbox floating when no command is present? The fixed div center is not functioning properly .adminbox { width: 200px; height: 17px; margin-top: 20px; padding: 20px; font-size: 12px; ...

jqueryhtmlcss

Adjusting the box sizing of a contentEditable DIV to conceal the first and last characters

I am having trouble with a ContentEditable div that requires the hiding of characters, specifically the first and last character. I need to overlay a layer on top of the "#" character to make it appear as if the character and the border line beneath it are ...

htmlcsscontenteditable

Retrieve JSON data from a web API and transmit it to a partial view using a controller

Currently, my code is set up like this: public ActionResult Search(SearchModel model) { string url = "http://10.0.2.31/testwebapi/api/data"; WebClient wc = new WebClient(); wc.QueryString.Add("forename", model.Forename); ...

c#jsonasp.net-mvc

Rotate labels on the X-axis on the toolkit chart

Hello and thank you for taking the time to read this. I have run into an issue that I could use some help with: I am trying to rotate the labels on my X-axis by 90 degrees, so that the text is displayed vertically instead of horizontally. The X-axis is ...

c#.netsilverlightchartssilverlight-toolkit

A specialized WordPress template that loads just the header and footer

I have encountered a strange issue while trying to create a custom template for WordPress. The index.php file is working perfectly fine - all elements load without any issues. Here is the code in index.php: <?php get_header(); ?> <?php if ( is_ ...

phpcsswordpressheaderfooter

Tips for ensuring that your website can recall which call-to-action (CTA) has been selected for redirection

I'm attempting to create a bilingual webpage in Spanish and English. My goal is to have a main page where the user selects the language, and once chosen, the page remembers the language preference for future visits instead of prompting the choice agai ...

javascripthtmlcssbutton