I followed an online tutorial to create this table, but now I want to center it on the page and I'm not sure how to do that. Can someone help me out?
Thank you in advance! http://jsbin.com/xiwayugu/8/
I followed an online tutorial to create this table, but now I want to center it on the page and I'm not sure how to do that. Can someone help me out?
Thank you in advance! http://jsbin.com/xiwayugu/8/
To achieve the desired effect, you can utilize the following CSS code.
table{
margin: 0 auto;
position: relative;
top: 25%;
}
For an updated demonstration, check out this JSFiddle link
Updated on 10/06/2014
Keep in mind this solution may only work for browsers using the Webkit engine like Safari and Chrome. However, you can experiment with the following code:
table{
width: 100%;
display: -webkit-box;
-webkit-box-pack: center;
}
For Firefox, consider using -mox prefix.
Insert the following code to center a table:
<div align="center">
<table>
<thead>
<tr>
<th scope="col">Duration</th>
<th scope="col>Course 20 hours+<br>accommodation</th>
</tr>
</thead>
<tbody>
<tr>
<td>2 weeks</td>
<td>1,300 euros</td>
</tr>
<tr>
<td>2 weeks</td>
<td>1,300 euros</td>
</tr>
<tr>
<td>2 weeks</td>
<td>1,300 euros</td>
</tr>
<tr>
<td>2 weeks</td>
<td>1,300 euros</td>
</tr>
<tr>
<td>2 weeks</td>
<td>1,300 euros</td>
</tr>
</tbody>
</table>
</div>
To vertically center your table in the middle, you can make adjustments to the CSS code like this:
html {
display:table;
height:100%;
width:100%;
}
body {
display:table-cell;
vertical-align:middle;
}
table {
margin:auto;
}
Check out the demonstration here: http://jsbin.com/xiwayugu/14/edit
Alternatively, you can use this CSS code:
html, body {
height:100%;
width:100%;
}
body {
display:flex;
}
table {
margin:auto;
}
View the demo here: http://jsbin.com/xiwayugu/15/edit
For optimal alignment, jquery.ui.position.js can be a valuable resource.
Here is a sample implementation:
let siblingElement = "#" + this.previousElementSibling.id $(this).position({my: "center", at: "center", of: siblingElement })
<div class="container">....</div>
I am currently working on a table that displays all the users. My goal is to turn the usernames into clickable links that direct you to their profile page. What steps should I take to convert the username into an href link and send it to the detail page? ...
Is it possible to have a link that, when clicked, opens a print window for a .docx or PDF file instead of downloading or displaying the file directly? I attempted to achieve this with the following code snippet but encountered an error: var e = docume ...
I have been facing a challenge with dynamically loading the nodes of a jtree upon expansion. The limited documentation I could find is located towards the end of this specific page. Several solutions involve creating nodes individually using a loop, simil ...
I am looking to apply styles based on the data attribute value matching an AJAX get request Here is my jQuery code: jQuery(function($) { get_stock(); function get_stock(){ $.ajax({ url: vdisain_vd.url, ...
I have implemented a partial view that utilizes Ajax to display User Data on the Main View. The script is executed from the main view. My next step is to include a 'delete' button in the results displayed within the partial view, but I am facing ...
I'm struggling with using jQuery AJAX to retrieve data from a WebGet function in an "AJAX-enabled WCF Service". The service code is provided below: using System; using System.Collections.Generic; using System.Linq; using System.Runtime.Serialization; ...
Having always been able to do something similar in other languages, I'm facing a few difficulties with PHP. My goal is to load a page that displays all the values from a form (created with a SELECT) and then update them all when clicking a "CHANGE" bu ...
I'm currently using Materialize 0.97.7 along with Leaflet 1.0.1 (the latest version). <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet-src.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com ...
I have a single word that needs to be hyphenated, but the lang=en hyphenate: auto property does not work on capitalized words. To address this, I utilized the slice function in JavaScript to split the word in half so that the second half, which requires h ...
I have the following action: def out_team if params[:user] @user = User.find_by(id: params[:user]) @user.update(team_id: nil) render nothing: true respond_to do |format| format.json { render :json => 'teste' } ...
I'm having trouble with the border shape of my navbar. When I try to make it a rounded pill shape, the edges get cut off instead of being properly displayed. https://i.stack.imgur.com/sUN2Y.png Below is the HTML template: <template> <div cl ...
As I create an HTML document with R Markdown, I incorporate external HTML documents for headers and footers. Utilizing the here() package enables relative paths within my project. However, including external HTML files via YAML in the R code disrupts the f ...
My current project involves using AngularJS to compile a directive into the main page. This directive contains a series of buttons that dynamically change based on its internal state. I am interested in relocating these buttons to a menu-bar within the pag ...
Having trouble deleting a customer record when clicking the modal popup delete button in Bootstrap 5. Despite clicking 'Yes, I want to delete,' nothing occurs, and I can't figure out what's wrong. I've searched for solutions on thi ...
In FF3.X and IE7 to 9, the code below is functioning correctly, but in FF4, there seems to be an issue. The following code is used in two different locations within my file: var args = "method=getoptions"; args += "&dr ...
I've been working on a jQuery slider for my header, but I'm encountering an issue where the previous image drops down to the next container instead of staying in place and transitioning smoothly. It seems like there might be an error in my HTML/C ...
I recently set up a chained select box with JSON data to populate options, using this Fiddle. While the data is hardcoded for now, I am looking to load it using the $.getJSON() method. However, despite my efforts, I haven't been able to get the code r ...
I am in the process of developing a PHP web application and utilizing the datatables jQuery plugin along with jQuery AJAX calls to create a dynamic table for editing, deleting, and adding elements. Although it appears to be working correctly, I've not ...
I have this HTML structure: <button ng-disabled="vm.updating" ng-click="doSomething()" class="something" type="submit" aria-label="average score"> <span ng hide="hideConditional()" class="font-white">score</span> <span ng-show= ...
I have implemented this code to continuously retrieve the first position and I need it to keep doing so. var init = function() { navigator.geolocation.getCurrentPosition(function(position) { new_position = position; }, onEr ...