A HTML table featuring a horizontal scroll and cells with a fixed width for optimal visibility

Seeking assistance with creating an HTML table with a horizontal scroll and fixed cell width. I have managed to implement the horizontal scroll feature using the code below, but struggling to adjust the cell widths. Any tips or suggestions would be greatly appreciated. Thank you!

Just to add, I am working with Bootstrap 4, in case that information is helpful in finding a solution.

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th,
td {
  text-align: left;
  padding: 8px;
}
<div style="overflow-x:auto;">
  <table>
    <tr>
      <td>Test</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
    </tr>
  </table>
</div>

htmlcssbootstrap-4

Answer №1

Make sure to apply table-layout:fixed; to your table.

.MainDiv {
  overflow: auto;
  border: 1px solid red;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  table-layout: fixed;
}

.MainDiv table td {
  text-align: left;
  padding: 8px;
  width: 200px;
  border: 1px solid blue;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="MainDiv">
  <table>
    <tr>
      <td>Test</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
      <td>124567890</td>
    </tr>
  </table>
</div>

Answer №2

To modify the width property of a table to "max-content", you can use the following code snippet:

 <style>
        table {
          border-collapse: collapse;
          border-spacing: 0;
          width: max-content;
          border: 1px solid #ddd;
        }

        th, td {
          text-align: left;
          padding: 8px;
          width: 100px;
        }


    </style>

    <div style="overflow-x:auto;">
        <table>
          <tr>
            <td >Test</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
          </tr>
          <tr>
            <td>Test</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
          </tr>
        </table>
      </div>

The "max-content" value is not compatible with Internet Explorer: https://developer.mozilla.org/fr/docs/Web/CSS/width

Alternatively, for cross-browser compatibility, you can use the "table-layout: fixed" property in the table's style and specify the desired width for your cells. Here's an example:

 <style>
        table {
          border-collapse: collapse;
          border-spacing: 0;
          width: 100%;
          border: 1px solid #ddd;
          table-layout: fixed;
        }

        th, td {
          text-align: left;
          padding: 8px;
          width: 100px;
        }


    </style>

    <div style="overflow-x:auto;">
        <table>
          <tr>
            <td >Test</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
          </tr>
          <tr>
            <td>Test</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
            <td>124567890</td>
          </tr>
        </table>
      </div>

For more information on "table-layout" and browser support, check out: https://developer.mozilla.org/fr/docs/Web/CSS/table-layout

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

Sending an email using Angular is a straightforward process that involves utilizing the built

I need help figuring out how to code a function in Angular or TypeScript that will open Gmail when a specific email address is clicked. I've tried different methods but haven't been successful so far. ...

htmlangularemail

Bootstrap 3 offset doesn't respond to dimensions

Even though I have set an offset for a medium-sized screen, the offset still appears in large screens. Here is a snippet of my HTML code. How can I resolve this issue? <div class="col-lg-6 col-sm-12"> <div class="row"> <div class="co ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Is there a way to verify the phone number input field on my registration form along with the country code using geolocation

I'm currently working on a registration form that includes an input field for telephone number. I'd like to implement a feature where, upon filling out the form, the telephone input field automatically displays the country code by default. Would ...

javascriptphphtmljquery

What makes this CSS causing render blocking?

I've been meticulously following the Google PageSpeed guidelines in order to optimize the performance of my website. Upon running an analysis, Google provides me with a score based on their set guidelines. There's one particular guideline that ...

javascripthtmlcsspagespeedfront-end-optimization

Storing the selected values from multiple checkboxes into an SQLite database with PHP PDO

Hi, I have two checkboxes named "Male" and "Female". If a person selects "Male" and does not select "Female", I want it to input nothing or false in the database. However, if "Female" is not selected, an error is returned: Undefined index: Female in /stora ...

phphtmlsqlitecheckboxpdo

JavaScript opacity adjustments not achieving desired outcome

My attempt to make this sub menu fade in and out upon button press is not working as expected. It should fully fade in shortly after clicking 'help' and completely fade out when clicking 'back'. Is the problem with the method I'm u ...

javascripthtmlcss

Expanding the width of a bootstrap dropdown menu

Looking for advice on how to expand the dropdown width? I have a row with two columns and some JavaScript that handles the dropdown functionality. The issue I'm facing is that I can't figure out how to adjust the dropdown width when it's se ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

What is preventing the items inside the <ul> element from displaying?

Struggling to grasp pagination, I can't figure out why the contents of "li" under the "ul" disappear while the "ul" container continues to display despite specifying in the JavaScript that only 6 should be visible on the page. The "ul" and "li" elemen ...

javascriptphpjqueryhtmlcss

Internet Explorer 9 (IE9) causing CSS dropdown menu to be truncated due

My issue is very similar to the problem described in this post: CSS Flyout menu gets cut off by borders of its container in IE9 The difference in my case is that I need to set the z-index (and position) on the container. You can view my JSFiddle here: h ...

cssinternet-explorer-9positionz-indexdrop-down-menu

The placeholder attribute for input types does not display consistently across all browsers

I am experiencing an issue with the placeholder text in my input field. <input type="text" name='linkLabel{{index}}' autocomplete="off" class="input-large tight-form-url last remove-cross" required="required" placeholder="{{'linkLabel&ap ...

javascripthtmlcss

"Identifying elements in CSS that do not have any adjacent text elements

I need help identifying a CSS selector that can differentiate between the <var> tags in these two distinct situations: <p><var>Foo</var></p> And <p>Some text <var>Foo</var> and more text</p> Specifi ...

csscss-selectors

Assigning alphanumeric characters to the axis for identification purposes

review the code in index.html <!DOCTYPE html> <html> <head> <title>D3 test</title> <style> .grid .tick { stroke: lightgrey; opacity: 0.7; } .grid path { stroke-width: 0; } .ch ...

javascripthtmlcsssvgd3.js

Using single-line ellipsis with the Material-UI select and option components

I have a TableHead Component with multiple columns. Among them is a <Select> element that allows users to filter the table content based on one of four statuses. I am trying to implement an ellipsis at the end of the option string if it exceeds its c ...

cssreactjsmaterial-ui

Mixing two elements for a continuous animation without the use of JavaScript

I'm interested in creating an animation that cycles between "0% interest free credit" and "free delivery". I am attempting to achieve this without the use of JavaScript, but so far I can only make the first element fade away without the second one fad ...

htmlcsscss-animations

What is the ideal framerate for smooth animation?

I'm looking to add a snow animation using JavaScript. I currently have it running at 200ms which is decent but not smooth enough. Would changing the interval to 20ms make it more fluid, or would it be inefficient and strain the CPU? window.setInterva ...

javascriptjqueryhtmlcss

Container will keep items from spreading out

Experiencing an issue with the card layout in my weather dashboard app. The cards within a container are not spreading out evenly to match the 100% width of the header. I want the container with the 5 cards to be the same width as the header and wrap prope ...

htmlcssflexboxbootstrap-5

Do we need to duplicate structured data when listing nested objects, or is it better to avoid doing so?

We are currently focused on implementing JSON structured data for a one-page website that contains extensive information about a local business, including address, pricing, reviews, and services. The JSON snippet provided below represents the structured da ...

htmljsonschemagoogle-rich-snippetsstructured-data

Position the typography component to the right side

Is there a way to align two typography components on the same line, with one aligned to the left and the other to the right? I'm currently using this code but the components are aligned next to each other on the left side. const customStyles = makeSt ...

javascriptcssreactjsalignmentmaterial-ui

What is the best way to display each value from the array arr, containing strings, on separate lines?

Can you complete the function below to display each value in the array 'arr' on separate lines? <!DOCTYPE html> <html> <head> <title> ...

javascripthtml

Tips for making an image box with a rollover effect

I need help figuring out how to create a unique user experience within a container that is 500px wide and 800px tall. The container currently has an image as a background, and I want to add a "sign up" button in the middle. When this button is clicked, I w ...

javascriptimagehtmlwidgetrollover-effect