Hi everyone, I'm struggling to understand why my table is displaying incorrectly when switching to the mobile version. I've attempted various CSS adjustments to correct it, but the issue persists when viewed on mobile devices.
Hi everyone, I'm struggling to understand why my table is displaying incorrectly when switching to the mobile version. I've attempted various CSS adjustments to correct it, but the issue persists when viewed on mobile devices.
Give this a shot: Made some adjustments to the styles and included width for the <th> elements.
Cascading Style Sheets (CSS):
table {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
font-size:13px;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
th, td {
padding: 8px;
text-align: center;
}
table#t01 tr:nth-child(even) {
background-color: #fff;
}
table#t01 tr:nth-child(odd) {
background-color: #eee;
}
table#t01 th {
background-color: #eee;
}
Data Table:
<table id="t01">
<tr>
<th>Size</th>
<th>Bust</th>
<th>Sleeve</th>
<th width="20%">Shoulder</th>
<th width="15%">Length</th>
</tr>
<tr>
<td>S</td>
<td>102</td>
<td>61</td>
<td>45</td>
<td>37</td>
</tr>
<tr>
<td>M</td>
<td>106</td>
<td>62</td>
<td>46</td>
<td>38</td>
</tr>
<tr>
<td>L</td>
<td>110</td>
<td>63</td>
<td>47</td>
<td>39</td>
</tr>
</table>
I can't figure out how to remove the vertical spacing between these two spans. Any help would be greatly appreciated. The issue I'm facing is the large gap between these two spans: <span class="twentyeight nomargin threshold_green">6</ ...
My goal is to add a footer to my website that includes a text field, but for some reason I'm encountering an issue with two of my divs not cooperating. You can observe this problem in this JSFiddle. Here is the CSS code for the footer: .footer { b ...
My webpage contains two div elements: one for displaying multi-line text and the other for showing an image which is positioned to the right of the text. The width of the image is not fixed and can be adjusted using a user-defined parameter. <div> ...
Is there a way to make the dropdown menu active when I click on an item, specifically making the word Services active? How can this be achieved? <nav class="navbar navbar-light navbar-expand-xl"> <a class="navbar-brand" hre ...
Struggling to change the default link colors on my site. Despite researching similar issues, I can't seem to make it work. This is how I've set the base link colors: a:link, a:visited, a:hover { color: #0279aa } Below is my style override for ...
I am attempting to click on all unopened tabs (elements) randomly across this page. While the code below usually does the trick, it sometimes doesn't click on all elements. I suspect that there might be an issue with how it loads indexes or some othe ...
I have created an HTML page with CSS animation and transitions. <div class="container-fluid" id="team"> <div class="row first"> <div class="wrapper"></div> </div> <div class="row second"> <div class="wrapper" ...
I've been experimenting with CSS column count to create a masonry effect for my items. Everything was going smoothly until I added a subtle drop shadow to the items. Upon closer inspection in the jsfiddle link provided, you'll notice that the dr ...
My current jQuery script is linked to a button and it functions by toggling font styles on a website by enabling or disabling a stylesheet upon clicking the button. Now, I want to enhance this functionality by saving user preference to a cookie so that the ...
Hello, I am new to web development and I am interested in creating a page similar to the style of nikebetterworld. Can you point me in the right direction on where to start studying to achieve this design? My impression is that it involves multiple scrol ...
Currently, my node.js server is operational and successfully creating an excel document by fetching data from an API using Axios. Now, I am looking to implement a feature where users can input a string on my HTML page, which will then be sent to the web se ...
This is my first attempt at using AJAX and jQuery to retrieve data from another HTML page. Below is the code I have written: Here is my JavaScript code: <script type="text/javascript> $(document).ready(function() { $('#submit').click( ...
I am currently working on creating a popover dialog that should point to the element triggering its appearance. The goal is for the arrow to align with the middle of the button when clicked. While I am familiar with using CSS to create pointing arrows, th ...
When I perform actions with a couple of images, I encounter delays because the browser needs to load the images. For example, if I use $('body').append(''); everything works smoothly without any delays. However, when I try using style= ...
I am faced with a challenge where I have multiple image tags nested within a div that has the class google-image-layout. Each image is equipped with various data attributes, including: data-anger="0" data-disgust="0" data-facedetected="0" data-fear="0" da ...
Encountering some unusual behavior with radio buttons and forms currently. In my form, I have 4 radio buttons set up. The issue I'm facing is that when I click on a radio button, it remains enabled permanently. This means I can have all 4 options sel ...
I am currently developing a web radio application that utilizes AngularJS and Laravel 5 to read Icecast streams. Currently, I have implemented loading the stream into an html5 audio element which is working well. However, I am facing an issue where the vie ...
I've been working on aligning the page content for different browser sizes using CSS. However, I'm having an issue with the first @media statement - no matter what changes I make in there, it doesn't affect the layout. I've been using ...
I have a script that automatically submits a form when two textfields are filled using variables from local storage. The script checks if the variables for email and password are not null before submitting. if (localEmail != null && localPwd != null) { ...
Description of issue: I am attempting to retrieve a value from an HTML input using PHP and execute a query on a MySQL database: SELECT * FROM WHERE (value = ID in the HTML input). MY APPROACH: I have created an HTML input: <input id="akt_djubrenje" ...