I am looking to design a table with a fixed header that will automatically generate horizontal or vertical scrolls as the content inside the table increases, without having to specify a fixed width for the table columns. I want to avoid breaking words to stretch the td or th height (so that cells can stretch horizontally and add scrolls to the table).
Check out this JS Fiddle example
<section class="">
<div class="container">
<table>
<thead>
<tr class="header">
<th>
Attribute
<div>Table attribute name</div>
</th>
<th>
Value
<div>Value</div>
</th>
<th>
Description
<div>Description</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
<td>Alignment of table according to surrounding text</td>
</tr>
<tr>
<td>bgcolor</td>
<td>rgb(x,x,x), #xxxxxx, colorname</td>
<td>Background color for a table</td>
</tr>
<tr>
<td>border</td>
<td>1,""</td>
<td>Specifies borders for table cells</td>
</tr>
<tr>
<td>cellpadding</td>
<td>pixels</td>
<td>Space between cell wall and content</td>
</tr>
<tr>
<td>cellspacing</td>
<td>pixels</td>
<td>Space between cells</td>
</tr>
<tr>
<td>frame</td>
<td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
<td>Visibility of outside borders</td>
</tr>
<tr>
<td>rules</td>
<td>none, groups, rows, cols, all</td>
<td>Visibility of inside borders</td>
</tr>
<tr>
<td>summary</td>
<td>text</td>
<td>Summary of table content</td>
</tr>
<tr>
<td>width</td>
<td>pixels, %</td>
<td>Width of the table</td>
</tr>
</tbody>
</table>
</div>
</section>
html, body{
margin:0;
padding:0;
height:100%;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
}
section.positioned {
position: absolute;
top:100px;
left:100px;
width:800px;
box-shadow: 0 0 15px #333;
}
.container {
overflow-y: auto;
height: 200px;
}
table {
border-spacing: 0;
width:100%;
}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: #000;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div{
border: none;
}
I am encountering an issue with my image gallery. Currently, when I click on a thumbnail, the large image is displayed. However, I would like the first image to show up without requiring the user to click on its thumbnail. How can I address this problem? B ...
I am struggling to make my button show the menu when clicked. I have tried various methods but still can't pinpoint the issue. I utilized the "checkbox" trick to display the hamburger button when the site width is under 500px for a responsive menu, ye ...
I've got a node server up and running with a React application that's integrated with Socket.io, and everything is working smoothly. However, I also have an external application that relies on the same data. My goal is to post to my node server w ...
When it comes to dynamic imports, Next.js suggests using the following syntax: const DynamicComponent = dynamic(() => import('../components/hello')) However, I prefer to import all exports from a file like this: import * as SectionComponents ...
I am currently working on a minimalist website using pure JavaScript and the fetch API to interact with a backend powered by Node.js and Express.js. Once the user logs in, a session cookie is generated. The issue I'm encountering is related to redire ...
As a newcomer to kendo, I am facing an issue with model binding. While debugging with Firebug, I see that options.models is undefined, causing the "if" condition in parameterMap to always return false and preventing the grid from populating with data. Howe ...
Below is the content of my package.json file: { "name": "pro-mern-stack", "version": "1.0.0", "description": "initial version", "main": "index.js", "scripts": { "start": "nodemon server.js server.js", "compile": "babel src --presets rea ...
Looking for some help with this jQuery function: function updateProfile(profile, sessionId){ alert(profile,sessionId); } In my HTML code, it's set up like this: <button onclick="updateProfile(profile, {{sessionId}})">Update</button& ...
My current dilemma involves extracting student data for each week within an academic year based on a start date and end date. To achieve this, I have devised an array that contains the start and end dates for every week. The process involves iterating thro ...
I am currently working on implementing a notification system that will appear for a few seconds and then vanish. However, I want to give users the option to hover over it with their mouse to prevent it from disappearing. It would also be nice to have the n ...
I'm trying to figure out how to make a div expand to a certain point and then wrap to the next line after reaching 200px. Currently, both the div and span are positioned absolutely in my element structure: <div><span></span>My text ...
I am currently working with an angular module named 'widgets'. In my app, I have used its signature as follows: var app = angular.module('widgets', [ 'widget.Panel', 'widget.List', 'services' ] ...
My code in TEST.ASP looks like this: <HTML> <HEAD> <SCRIPT src="ajaxScript.js" type="text/javascript"></SCRIPT> </HEAD> <BODY> <FORM action="action_page.asp" method="post"> First Name:<BR> ...
I am currently struggling to align my Bootstrap 4 dropdown items side by side as shown below: https://i.sstatic.net/i3pP0.png The desired layout involves having Item 1 and Item 2 as dropdown options when hovering over the first Test item. I attempted to ...
My goal is to create a functionality where, on a mobile browser, when the user clicks on a button: If the app is already installed on the user's mobile device, it should open up. If the app is not yet installed, I aim to redirect the user to the appr ...
When attempting to place the "back to top" button on the right-hand side just above the footer, the footer disappears. I am striving to position the button just above the footer while ensuring it aligns correctly. Prior to adding the "back to top" button, ...
I've created numerous images for a small video game. Within each image, I saved an integer using a function based on the advice mentioned here. Here's an example: for (var index=0; index<game.length; index++) { $('#game').appen ...
In my struct example, I have a two-dimensional array: type Foo struct{ testArray[9][9] int } My goal is to access it using a template. For instance: tmpl.Execute(w, foo) //foo is a pointer to Foo struct and w represents the parsed html website How can ...
Here is a simple tab plugin that I developed. I am looking for suggestions on how to make it easier to switch tabs using an external method. /** * Custom jQuery Tabs Plugin */ (function($) { $.fn.customTabs = function(options) { var default ...
When attempting to load content onto the index of my webpage using Ajax, I encountered an issue with applying click functions to that content. The problem arises when the content is loaded through Ajax as the click event does not work properly. It seems ...