Currently, I am in the process of developing a schedule table that displays events alongside their respective hours. It is crucial for the first column to remain fixed as users scroll horizontally through the table. This will greatly enhance user experience by allowing them to easily reference the hour corresponding to each event. My implementation is based on Bootstrap 4. Here is a screenshot showcasing the table: http://prntscr.com/japkbc.
Warm Regards
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
th
{
background-color:black;
color:white;
}
th:first-child, td:first-child
{
position:sticky;
left:0px;
}
td:first-child
{
background-color:grey;
}<table>
<tr>
<th>TIME</th>
<th>Company</th>
<th>Company</th>
<th>Company</th>
<th>Company</th>
<th>Company</th>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>11:40 </td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>11:40 </td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>11:40 </td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>11:40 </td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>11:40 </td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>11:40 </td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>One of the challenges I am facing involves a textarea where users can input messages. The goal is to split the message into an array of words after detecting an '@' symbol, and then search for specific words in that array such as @person1 and @pe ...
I'm currently facing an issue with the PHP XML DOM parser. When parsing HTML from the real world, I noticed that many elements have multiple CSS classes due to spaces in the 'class' attribute. However, when using getAttribute() on a DOMNode, ...
Here is some HTML code <select ng-model="selectedMarker" ng-options="shape.text for shape in Selects('shapes')"> </select> And below is the JavaScript code angular.module('todo', ['ionic']) . ...
I am currently using the showbiz jQuery carousel on my products page. I have encountered an issue where, upon clicking the "view more" button, an unwanted border appears around the carousel, but only in Chrome. How can I go about removing this border? Her ...
I am delving into the world of cross-domain Ajax requests for the first time by interacting with an API. Utilizing jQuery, I aim to extract specific elements from the response and display them on the webpage. Here is the code snippet for the request: $.a ...
I am having trouble retrieving filenames and displaying them in the label lbName. I tried using asp:FileUpload but it's not working. Here is my code: <asp:FileUpload ID="FileUpload1" AllowMultiple="true" runat="server" ...
I am facing an issue with a piece of code within a link. The problem arises when I use NVDA to focus on the element, as the screen reader reads out all the content in the link at once. For instance, here is the code snippet: <a href="example.html" ...
Currently, I am in the process of mastering AngularJS, and recently came across this code snippet: .factory('cribs',function(){ var data = [{ name: "jack", last: 'doe' },{ name: 'hazel&apos ...
I've been working on integrating the Rateyo plugin with AngularJS, but I'm facing an issue in extracting the rating value from the directive. Below are the snippets of my code: EDIT: Check out the functional plunker Controller var app = angula ...
Can you explain the distinctions between flexbox and grid systems? In what situations would it be appropriate to use each system? ...
Looking for a textbox with the following requirements: Accept only 6-digit numbers Range from 000001 to 999999 Allow leading and trailing spaces (not between digits) ...
Using the JS library MagnificPopup, I implement popups on my website triggered by a "read more" button. This library moves the html to display it in a different location and then injects it back when the popup is closed. While this functionality works seam ...
I am currently developing a multiplayer game using node.js, socket.io, and express for TWO players. To ensure that only the intended two players are able to join the game and avoid interference from others, I'd like to generate a unique URL specifica ...
My code includes an AJAX function to delete items by row. In my table, there is a column with the action to perform the deletion. Here is the AJAX function: //delete detail function deleteDetail(id_po_req_detail) { var tr = ...
Following the guidance provided in this thread Preview an image before it is uploaded, I was able to implement a feature on my website that allows users to preview images before submitting them. I currently have code set up to display the image preview on ...
After encountering this issue, I came to the realization that the events onblur and onchange function properly. However, I noticed that if your page contains only ONE <input type="text" onblur="loadXMLDoc()"> Change Content</input> The behav ...
I'm working on creating a student report list using Angularjs ng-repeat. My main issue is figuring out how to dynamically append numbering like an ordered-list to the generated list in the view. I am aiming for something similar to this: # | Name of ...
I have recently started learning about Angular and TypeScript. Within my AppComponent HTML file, I include another component using the code <app-listpost></app-listpost> In the TypeScript file, I import the ListPostComponent into my AppCompon ...
After setting some data in the window, I am facing issues with updating an angular.js table created using the smart table module/plugin. The data is structured like this: window.checker={};window.checker.checked = [{'ip':9,'port':0}] ...
After diligently following the provided instructions, I managed to get cesium running locally. I then attempted the hello world example as shown: However, despite clicking on "open in browser," I couldn't see anything. It has been a constant struggl ...