On mobile devices, table rows do not stretch across the full 100% width

I'm facing an issue with a table I'm using for a shopping basket on my website. Everything seems to be working fine until I added a tfoot element, causing the tbody to not span 100% of the container's width.

I've been troubleshooting and suspect that the problem lies within the tfoot, but I haven't been able to pinpoint the exact issue. I initially thought it might be related to the colspan not functioning correctly on mobile devices because I had hidden one of the cells in the body, resulting in an uneven layout. However, that didn't resolve the issue.

Here is a link to the example for reference: https://codepen.io/moy/pen/KQJdbV

.page {
  margin: 0 auto;
  max-width: 1000px;
}

/* 
 * Basket table rules. 
 */
 /* CSS rules for the basket table... */

CSS and HTML code snippets...

Could someone assist in identifying the missing piece in my setup?

I want to display the content of 2 cells in the tfoot side by side, with the text in the first cell aligned to the left and the text in the second cell aligned to the right. Does this alignment requirement affect the layout?

htmlcsshtml-tableresponsive

Answer №1

Your styling currently has

text-align: right;

applied to the .basket__foot class, causing the td with colspan=3 to inherit it. To align it on the left, simply add the following to the end of your CSS file:

.basket__foot p:first-child {
  text-align: left;
}

Additionally, you can press ctrl-shift-i to inspect the tab elements. When you hover over a tag, you will be able to see the dimensions of the elements.

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

Some Android devices experience unusual behavior with inlined icon links

Check out this small jsFiddle: <html> <head> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <style> .navButton { font-size:30px; height:43px; ...

androidhtmlcssiconsfont-awesome

Encountered an issue while trying to reset the dropdown menu values on a Dash application when utilizing a clear button

I'm attempting to add a clear button for users to reset the values in a dropdown menu. However, when I run the application, I encounter the following error preventing me from selecting an option in the dropdown: Unable to access property 'leng ...

pythonhtmlcssweb-applicationsplotly-dash

How can I ensure my md-sidenav takes up the entire height when using ui-router?

Currently, I am utilizing the most recent version of Angular Material (1.0.0) library and I am attempting to ensure that my <md-sidebar> panel occupies the entire height of the available space on the webpage. While it functions correctly on a regul ...

htmlcssangularjsangular-material

Toggle between bold and original font styles with Javascript buttons

I am looking to create a button that toggles the text in a text area between bold and its previous state. This button should be able to switch back and forth with one click. function toggleTextBold() { var isBold = false; if (isBold) { // Code t ...

javascripthtmlcss

Is there a method to incorporate a scroll event into the ng-multi-selectdropdown, a npm package?

Query: I need to incorporate a scroll event in the given html code that triggers when the div is scrolled. However, I am facing issues with implementing a scroll event that works when the elements are being scrolled. <ng-mult ...

javascripthtmlangular

Right-align SELECT-OPTIONS text

Here are the screenshots of the form I'm currently working on. I am aiming to create a select box in the form where the text within the options is aligned to the right. After an option is selected, the chosen text should be displayed as illustrated i ...

javascriptjquerycsshtml

Is it possible for a relative div to automatically adjust its height when the height of the inner absolute div increases?

I am working with the following HTML code snippet: <div id="content"> <div id="leftcol"> <p>Lorem Ipsum</p> </div> </div> along with this CSS styling: #content { width: 780px; padding: 10px; position: relative; back ...

htmlcss

Creating a Dynamic Navigation Bar with HTML and CSS

I've been exploring the code on w3schools.com, and while there are some great examples, I'm struggling to understand it all. Unfortunately, there aren't any instructions on customizing the code for a third level of menus. Can someone simplif ...

htmlcssnavigationhoverdropdown

Steps for modifying the look of a button to display an arrow upon being clicked with CSS

Looking to enhance the visual appearance of a button by having an arrow emerge from it upon clicking, all done through CSS. Currently developing a React application utilizing TypeScript. Upon clicking the next button, the arrow should transition from the ...

cssreactjstypescripttailwind-css

Innovative Audio Editing Tool using Javascript

Currently, I am in the process of creating a JavaScript-based audio editor that will allow users to record, play, and edit audio files. It is crucial for the tool to be able to visualize both real-time recorded audio and selected/uploaded audio files. Whil ...

javascriptjqueryhtmlaudio

How to maintain aspect ratio when setting max-height on React strap/Bootstrap CardImg?

Currently working on integrating the front-end with a MERN stack application and facing challenges with Reactstrap Cards and CardImgs. I am specifically trying to ensure that the images do not exceed a certain max height, while also keeping all the content ...

htmlcssbootstrap-4reactstrap

When padding is added on an MVC 5 page, the Bootstrap 4.1.1 class option for rounded-circle becomes distorted

Incorporating VS 2017 and bootstrap 4.1.1 into an MVC 5 page, I am facing a challenge in adding right-side padding to an image without distorting the circular shape of the image, as shown below. When I apply the padding, the circle becomes warped, but remo ...

c#asp.netcssasp.net-mvc-5bootstrap-4

What is preventing my code from being recognized as a valid XML file?

Encountering an error indicating that this code snippet is not valid within an XSL file. This is the only feedback provided by the document system. While this code is a part of a larger document, I decided to isolate the issue to determine if it lies in ...

htmlxmltemplatesxslt

The embedded CartoDB image header is set to have a style of "display:none"

I'm currently working on a CartoDB map showcasing my readers' summer fishing photos. Each row in the table has an image url, which I've placed at the top of the infowindow display list. I've enabled it and set the image window type to ...

htmlcsscartodb

Tips for shrinking the circumference of a circle

Currently, I have a circular div that has been styled using CSS animations. My goal is to keep the size of the circle consistent when it moves to the bottom, but reduce its size when it bounces back to the top. I am uncertain if this can be achieved solely ...

javascriptjqueryhtmlcss

Enhancing SEO for slideshow presentations

I've been thinking about the SEO implications of using a slideshow. For content that hasn't been displayed in the slideshow yet, I'm keeping it hidden in a div. While this content will still be indexed, search engines (especially Google) ma ...

htmlseo

Retrieve the element (node) responsible for initiating the event

Is there a way to identify which element triggered the event currently being handled? In the following code snippet, event.target is only returning the innermost child node of #xScrollPane, with both event.currentTarget and event.fromElement being null. A ...

javascripthtml

Strategies for improving the efficiency of HTML and styles in a generated document

Generating the invoice printing form layout using dynamically created Razor views through RazorEngine can result in messy and hard-to-read code. The repetitive use of words like top, left, width, and height makes it challenging for human inspection and deb ...

htmlcssasp.net-mvcrazorstylesheet

Navigate to a particular section in the webpage

There are a few div elements with the class .posts that each have an attribute data-id which corresponds to the ID in a MySQL database. <div class="posts" data-id="1"></div> <div class="posts" data-id="2"></div> If I want to scrol ...

javascriptjqueryhtmlscroll

What is the process for submitting a record to a table following the activation of a JavaScript link or button

I am working on creating a like-unlike button below each post for registered users to interact with. I have successfully created the button itself, but now I need to figure out how to store records when a user clicks the button. My idea is to utilize a tab ...

javascriptphphtmlajaxmysqli