Can you provide me with advice on how to make a materialize table responsive?

Here is the script I am using:

<table class="responsive-table">
  <thead>
    <tr>
        <th>Mon</th>
        <th>Tue</th>
        <th>Wed</th>
        <th>Thr</th>
        <th>Fri</th>
        <th>Sat</th>
        <th>Sun</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
          <ul>
              <li>09:00-09:30</li>
              <li>10:00-10:30</li>
          </ul>
      </td>
      <td>
          <ul>
              <li>14:00-14:30</li>
          </ul>
      </td>
      <td>
          <ul>
              <li>12:30-13:00</li>
              <li>14:00-14:30</li>
          </ul>
      </td>
      <td>
          <ul>
              <li>15:00-16:00</li>
          </ul>
      </td>
      <td>
          <ul>
              <li>16:00-16:30</li>
          </ul>
      </td>
      <td>
          <ul>
              <li>09:00-09:30</li>
          </ul>
      </td>
      <td>
          <ul>
              <li>-</li>
          </ul>
      </td>
    </tr>
  </tbody>
</table>

See the demo here: https://jsfiddle.net/g9b7oj8t/

The display looks good on desktop, but messy on mobile devices.

I need help customizing the CSS from materialize to make it look neat on mobile. Any suggestions?

cssbootstrap-4responsivematerialize

Answer №1

There seems to be a known issue with Materialize. Check out the reference to the problem here.

The suggested solution can be found on GitHub.

<thead>
    <tr>
        <th>Mon<br/>&nbsp;</th>
        <th>Tue<br/>&nbsp;</th>
        <th>Wed<br/>&nbsp;</th>
        <th>Thr<br/>&nbsp;</th>
        <th>Fri<br/>&nbsp;</th>
        <th>Sat<br/>&nbsp;</th>
        <th>Sun<br/>&nbsp;</th>
    </tr>
</thead>

If you want it to function correctly, try not to overload the cells with too many styles as it might affect the heights.

Answer №2

Don't forget to include an outer div element. Following the guidelines of BS4 -

To ensure a table responds well, wrap it in a container that has the .table-responsive class (or one of the .table-responsive-* classes) applied.

Therefore, your code should be modified and added with the relevant classes as follows:

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>Mon</th>
        <th>Tue</th>
        <th>Wed</th>
        <th>Thr</th>
        <th>Fri</th>
        <th>Sat</th>
        <th>Sun</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <ul>
            <li>09:00-13:00</li>
            <li>10:00-14:30</li>
          </ul>
        </td>
        <td>
          <ul>
            <li>10:00-14:30</li>
          </ul>
        </td>
        <td>
          <ul>
            <li>09:00-13:00</li>
            <li>10:00-14:30</li>
          </ul>
        </td>
        <td>
          <ul>
            <li>09:00-13:00</li>
          </ul>
        </td>
        <td>
          <ul>
            <li>09:00-13:00</li>
          </ul>
        </td>
        <td>
          <ul>
            <li>09:00-13:00</li>
          </ul>
        </td>
        <td>
          <ul>
            <li>-</li>
          </ul>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<style>
ul {
  list-style-type: none;
  padding: 5px;
}
</style>

Visit this link for additional details

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

Confirming the authenticity of a newly added user input with the help of jQuery

Within my current project, I have implemented validation features for text boxes. When a user clicks on a text box, the border is highlighted. If they click elsewhere without entering any value, the border turns red and an alert pop-up appears. In additio ...

jqueryhtmlcssvalidation

Tips for displaying form data in a boostrap modal

One issue I am facing involves a form that collects a user's first and last name, along with a button that activates a bootstrap modal. When the button is clicked, the goal is to display the inputted data from the form within the modal window. The use ...

phphtmlbootstrap-4

Two boxes each taking up half of the width, with content placed inside a container

How can I achieve the appearance seen in this image? https://i.sstatic.net/2oZW8.png The layout consists of four columns using regular Bootstrap code. The first two columns should have a white background within a .container, while the other two columns s ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Unlocking the potential of resizable bootstrap table columns in React

Currently utilizing a bootstrap table <div class="table-responsive"> <table class="table table-bordered"> <thead> <tr> <th>#</th> <th>Table heading</th> </tr> < ...

javascripthtmlcssreactjstwitter-bootstrap-3

What is the best way to align a group of checkboxes to the left side of the page

I am struggling to display a group of 8 checkboxes in 2 columns with labels on the right side of the checkboxes, and I want them to be left-aligned instead of center-aligned. Despite trying different approaches with the CSS, I can't seem to achieve th ...

htmlbootstrap-4

Automatic closing of multile- vel dropdowns in Bootstrap is not enabled by default

I have successfully implemented bootstrap multilevel dropdowns. However, I am facing an issue where only one child is displayed at a time. <div class="container"> <div class="dropdown"> <button class="btn btn-default dropdown-to ...

javascripthtmlcsstwitter-bootstrapdropdown

Adding animation to a div that is being appended can be done by using JavaScript functions and

I am looking to incorporate animation into my title div. Below is the HTML code I have so far: <div class="particles" id="tittle"> <!-- Displaying title from Firestore using JavaScript --> </div> Here is the CSS cod ...

javascripthtmljquerycss

maintaining the alignment of one div's right boundary with another div's right boundary

---------------------- ----------------------------->edge X | | | | | logo | | dropdown menu ...

javascripthtmlcss

Tips for properly applying the CSS display property to images

I have a piece of HTML code that includes an image of Rapunzel. The image has the style attribute set to display inline, but when I try to retrieve the display property using JavaScript, it always returns 'block' instead. I have tried using both ...

javascripthtmlcssproperties

Link causing chaos in CSS animation

I've created a CSS animated banner. You can view the result here. However, I'm facing an issue where adding a hyperlink to some of the pictures is causing the animation to mess up. The first picture has a href attribute, making it smaller and not ...

cssimageanimationhref

Bootstrap 4.1 slider-markers

I'm currently using the latest version of Bootstrap 4.1 Attempting to incorporate carousel indicators, However, when I attempt to click on one of the indicators, It does not respond. My preference is to avoid using: "carousel-control-prev" "carou ...

bootstrap-4

What are some effective ways to propose horizontal lines as useful breaks for web page layout?

I'm currently working on enhancing the print layout of my web pages using CSS. One issue I've encountered is figuring out how to properly handle page breaks. I have managed to avoid breaks in the middle of images and text blocks that should stay ...

htmlcssprinting

Conceal different text when a div with a specific class includes particular text

Is there a way to dynamically add a class to a div based on the content of another div on the same page? Here is a snippet of my HTML: window.addEventListener("load", () => { let b = document.getElementsByClassName('aw-property-data-item') ...

javascripthtmlcss

Add a CSS class to a different element when hovering

I have the following HTML structure: <div class="container"> <div class="list-wrapper"> <ul> <li class="item-first"> </li> </ul> </div> <div class="description-wrapper"> <d ...

javascripthtmlcss

How can the object currently being dragged be chosen using JQueryUI Draggable?

Working with JQueryUI draggable, I am interested in applying styling to the draggable element while it is being dragged. Various attempts have been made using code like this: $(".ui-widget-content").draggable({ drag: function(event, ui) { $(this).cs ...

htmlcssjquery-uijquery-ui-draggable

The iframe is being loaded in the center of the page rather than at the top

I am currently facing an issue with embedding wetransfer into a website using iframe. The problem is that when the page loads, it automatically scrolls past the header section of the site instead of loading the new page at the top. How can I prevent this ...

javascriptjquerycsshtml

`Gradient blending in ChartJS`

Currently, I am facing an issue with my line chart having 2 datasets filled with gradients that overlap, causing a significant color change in the 'bottom' dataset. Check out my Codepen for reference: https://codepen.io/SimeriaIonut/pen/ydjdLz ...

javascriptcsschart.js

Designing a calendar with a grid template

I am attempting to design a calendar that resembles an actual calendar, but I am facing an issue where all created divs (representing days) are being saved in the first cell. I am not sure how to resolve this. Any help would be greatly appreciated. css . ...

javascriptcssreactjscalendar

What is the best way to display a description overlay on an adjacent image when hovering over it?

Seeking assistance or guidance in the right direction. I have a desire to showcase a grid of images with hover-over functionality for additional information, similar to what can be seen here. Could someone advise if this task is manageable with pure CSS ...

jquerycsshover

Adjust the date input alignment in mobile browsers

I am trying to align the entered date to the left in input[type='date']. However, when testing on mobile browsers like safari and chrome, the date remains centered within the input. mobile example This is the code I have been working on: .co ...

htmlcss