I Have a Caption with Dynamic Width, and i Want it in the center of the table, but inline-block isnt working right, the inline make it in the center of the td, not of all the table, How can i make it in the center of the table? Here is a example of this html:
<table class="hours-table" style="width: 100%;" border="0"><caption>Title</caption>
<tbody>
<tr>
<td>1_1</td>
<td>1_2</td>
<td>1_3</td>
<td>1_4</td>
<td>1_5</td>
</tr>
<tr>
<td>2_1</td>
<td>2_2</td>
<td>2_3</td>
<td>2_4</td>
<td>2_5</td>
</tr>
<tr>
<td>3_1</td>
<td>3_2</td>
<td>3_3</td>
<td>3_4</td>
<td>3_5</td>
</tr>
<tr>
<td>4_1</td>
<td>4_2</td>
<td>4_3</td>
<td>4_4</td>
<td>4_5</td>
</tr>
<tr>
<td>5_1</td>
<td>5_2</td>
<td>5_3</td>
<td>5_4</td>
<td>5_5</td>
</tr>
</tbody>
</table>
Thanks a lot in Advance!
If you want it to be both vertically and horizontally aligned in the center, you could use the following CSS:
table { position: relative; }
caption {
position: absolute;
top: 50%;
left: 50%;
margin: -0.5em -10px; /* Change the -10px part depending on length of title */
}
jsFiddle
If you only want it to be horizontally aligned (at the top of the table, you could use:
caption { text-align: center; }
jsFiddle
Edit: Here is a solution that will allow a background behind a centered caption but also create a white background behind just the text part of the caption:
HTML
<caption>Title</caption>
CSS
div { background: url('background_image.jpg') repeat; }
caption {
text-align: center;
background: rgba(0,0,0,0);
}
span { background: white; }
JS
$(function() {
var caption = $('caption');
caption.html('<span>' + caption.html() + '</span>');
});
jsFiddle
Related
I have a Foundation button:
Delete
Which is inside a table row cell: ``button```
As you can see the button is not aligned vertically centered.
Here is a JSFiddle I created to show the problem.
<table class="centered columns">
<thead>
<tr>
<td>Granted</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr>
<td>true</td>
<td>Delete </td>
</tr>
</tbody>
</table>
How can I center a Button Vertically in a Table in the CSS Foundation Framework?
You are just need to remove the button margin-bottom property.
jsfiddle
This will centre everything in the middle of your table. But as its CSS3 you will need to only be worried about modern browsers.
td{
position:relative;
}
.button{
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
JSFIDDLE
Just add Margin Auto to button class
.button{
margin: auto;
}
and remove previous styling Because it will sift up and it will not work;Auto will also be responsive as compare to position absolute
add id="top-padding" into button and add this bit of CSS
<style>
#top-padding {
padding-top: 10px;
}
</style>
might not be perfect but you can mess around with the number of pixels until it is centered
I am looking for the best approach to solve this situation:
Given a 4 cell grid. I'd like the top row to be of fixed height and the right column to be of fixed width. The left column's width and the bottom row's height would then resize automatically as you resize the screen.
(that's the easy part .. just set the "northeast" cell in an HTML TABLE to fixed size and set the TABLE's height and width to 100%)
Now the tricky part. I want the southeast, northwest, and northeast cells to be rotated. Since the northeast cell is a fixed size square, that's super easy to do, just rotate it. However the southeast and northwest cells are dynamic in size based on the window's height and width.
Here is a super simple example of the situation -- I will rotate only the southeast corner for this example:
<html>
<head>
<style>
#mainGrid {
width: 100%;
height: 100%;
}
#nw {
background-color:blue;
}
#ne {
height: 100px;
width: 100px;
transform:rotate(180deg);
background-color:red;
}
#sw { background-color:yellow; }
#se {
transform:rotate(-90deg);
background-color:green;
}
</style>
</head>
<body>
<table id="mainGrid">
<tr>
<td id="nw">Northwest</td>
<td id="ne">Northeast</td>
</tr>
<tr>
<td id="sw">Southwest</td>
<td id="se">Southeast</td>
</tr>
</table>
</body>
</html>
Which results in:
What would be the simplest approach to getting the TABLE (or a grid of DIV or UL) to behave nicely when the screen is resized, like it does before the rotation? In other words, the southeast cell would have the same size and location it originally did, but the contents would layout rotated.
Can this be done with pure HTML5/CSS3 and no javascript? If not, what would be the simplest javascript I could use -- without any libraries -- to pull this off?
You could just wrap the content in a div or something and rotate that rather than the td itself:
<table id="mainGrid">
<tr>
<td id="nw">Northwest</td>
<td id="ne">Northeast</td>
</tr>
<tr>
<td id="sw">Southwest</td>
<td id="se"><div class="rotated">Southeast</div></td>
</tr>
</table>
CSS:
#mainGrid {
width: 100%;
height: 100%;
}
#nw {
background-color:blue;
}
#ne {
height: 100px;
width: 100px;
transform:rotate(180deg);
background-color:red;
}
#sw { background-color:yellow; }
#se {
background-color:green;
}
.rotated {
transform:rotate(-90deg);
}
Fiddle:
https://jsfiddle.net/2hagsgs2/
My code is:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Inventory-Tags</title>
<script src="http://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
<style>
/* Appearance */
body, table { font-family: sans-serif; }
table { border-collapse: collapse; }
td, th { padding: 6px; }
th { background: #333; color: white; }
tbody tr:nth-child(odd) { background: #dfdfdf; }
table { border: 1px solid red; }
/* Scrollability of table */
table { width: 610px; } /* fixed width table */
thead tr { display: block; } /* makes it sizeable */
tbody {
display: block; /* makes it sizeable */
height: 262px; /* height of scrollable area */
overflow: auto; /* scroll rather than overflow */
width: 100%; /* fill the box */
}
thead th { width: 197px; } /* fixed width for THs */
tbody td { width: 185px; } /* fixed width for TDs */
</style>
</head>
<body>
<script>
function myFunction(Move2) {
document.getElementById("table1").style = "position: absolute; top: 40px"
document.getElementById("table2").style ="position:absolute; top: -9999px"
}
</script>
<script>
function myFunction(Move2) {
document.getElementById("table1").style = "position: absolute; top: -9999px"
document.getElementById("table2").style ="position:absolute; top: 40px"
}
</script>
<a onclick="function(Move)">Hi</a>
<div style="left: 40px">
<a onclick="function(Move2)">Hi2</a>
</div>
<div id="table1"; style="position: absolute; top: 40px">
<h1><div id=user_name>'s Inventory- Tags</h1>
<table class="sortable">
<thead><tr><th>Name</th><th>Explanation</th><th>Rarity</th></thead>
<tbody>
<tr><td>(the Halfbaked)</td><td>It looks kinda... under-cooked</td><td>R2</td></tr>
<tr><td>(Ninja)</td><td>Hiding in the night, you approach.</td><td>R6</td></tr>
<tr><td>(the Foul)</td><td>Foresee the future.</td><td>R7</td></tr>
<tr><td>(the Master)</td><td>Make le gold.</td><td>R6</td></tr>
<tr><td>(the Photographer)</td><td>Where's the camera?</td><td>R5</td></tr>
<tr><td>(the Canonical)</td><td>We all ship it.</td><td>R5</td></tr>
<tr><td>(the Punching Bag)</td><td>Looks like that hurt.</td><td>R3</td></tr>
<tr><td>(the Fancy)</td><td>I swear, if you start singing that song...</td><td>R5</td></tr>
<tr><td>(the Knight)</td><td>You live by the code of chivalry.</td><td>R6</td></tr>
<tr><td>(the Samurai)</td><td>Your enemy is the ninja.</td><td>R6</td></tr>
<tr><td>(the Loser)</td><td>You're not a winner.</td><td>R2</td></tr>
<tr><td>(the Outlaw)</td><td>You done somethin' bad, son.</td><td>Unique</td></tr>
<tr><td>(the Lord)</td><td>We bow to you humbly.</td><td>R9</td></tr>
<tr><td>(the Fugitive)</td><td>Always running, always hiding.</td><td>Unique</td></tr>
<tr><td>(the Egg)</td><td>Yes, that's right. An egg.</td><td>R4</td></tr>
</tbody>
</table>
</div>
<div id="table2"; style="position: absolute; top: -9999px">
<h1><div id=user_name>'s Inventory- Specials</h1>
<table class="sortable">
<thead><tr><th>Name</th><th>Explanation</th><th>Rarity</th></thead>
<tbody>
<tr><td>/slap</td><td>Allows you to slap any player for up to 15 damage.</td><td>R8</td> </tr>
<tr><td>/heal</td><td>Allows you to automatically heal yourself.</td><td>R9</td></tr>
<tr><td>/buildmode</td><td>Grants immunity to damage and permanent lighting; meant for use during building.</td><td>R9</td></tr>
<tr><td>/buff</td><td>Allows you to give yourself buffs.</td><td>R4</td></tr>
<tr><td>/invasion</td><td>Allows you to start an invasion.</td><td>R8</td></tr>
<tr><td>/gbuff</td><td>Allows you to give buffs to all players.</td><td>R9</td></tr>
<tr><td>/spawnmob</td><td>Allows you to spawn in any mob.</td><td>R9</td></tr>
<tr><td>/command1</td><td>Allows you to use /command1.</td><td>R8</td></tr>
<tr><td>/command2</td><td>Allows you to use /command2.</td><td>R8</td></tr>
<tr><td>HouseName</td><td>Gives ownership to HouseName.</td><td>House</td></tr>
<tr><td>HouseName2</td><td>Gives ownership to HouseName2.</td><td>House</td></tr>
</tbody>
</table>
</div>
</body>
</html>
From my code, I'm sure you can see what I want. I want to be able to click on my 'a' divs. When they click on 'Hi' the first table goes to the visible area, and the second table goes away. When you click on 'Hi2' the first table goes away, and the second table goes to the visual area. I know that onclick won't work with <style>, so I tried using the ParseInt method, but that will continue to move. Note that I will have four tables in my full code, and four buttons. I don't make it so that if you click 'Hi,' and then 'Hi3,' you have to click 'Hi2' or 'Hi4' to display their respective tables.
In short, I want to be able to click a button, or an <a>, and move the four tables to my own specified coordinates, without using <style>.
To answer to fixing your problem is to understand the use of basic javascript.
You cannot change an elements style like this
document.getElementById("table1").style = "position: absolute; top: -9999px"
document.getElementById("table2").style ="position:absolute; top: 40px"
Each different style change has to be set individually. Like this.
document.getElementById("table1").style.top = "-9999px"; //also don't forget the semicolon
When you are setting multiple styles on an element, it is best to set the element as a variable and setting a style to this variable each time.
var elem = document.getElementById("table1");
elem.style.position = "absolute";
elem.style.top = "-9999px";
MOST styles can be placed after the elem.style.top using their normal style name such as top, height, color, etc.. Except z-index which can be defined as zIndex
tried to apply this answer to make change the class of the cells in my table on click, yet it doesn't work :(
$('td.link').click(function() {
$('td.button_active').removeClass('button_active');
$('td.link').addClass('button');
$(this).removeClass('button');
$(this).addClass('button_active')
})
My example code in jsfiddle is here..
Could someone take a short look and point what to change?
I am trying to make font red and change background image of clicked cell, other cells leaving with (or returning to) grey font and default backround image.
Thank you in advance!
Valdas
Because you've included MooTools instead of jQuery ;)
Check out this fiddle. It works when using jquery...
$('td.link').click(function() {
$('td.button_active').removeClass('button_active');
$('td.link').addClass('button');
$(this).removeClass('button');
$(this).addClass('button_active')
});
Edit
Here you go, a proper version. What I've done: put buttons inside the table cell (instead of transforming table cells into buttons), used an active class for the active button (instead of copying the button css to the active_button class), and altered the javascript a bit (less lines = nice :))
Check it out here (fiddle)
And the relevant code:
HTML
<table>
<tr>
<td>Link One</td>
</tr>
<tr>
<td>Link Two</td>
</tr>
<tr>
<td>Link Three</td>
</tr>
<tr>
<td>Link Four</td>
</tr>
</table>
CSS
.button {
display: block;
width: 113px;
height: 30px;
text-decoration: none;
background-image: url(http://www.verslomonitorius.lt/uploads/2/1/9/2/21922640/vm_button.svg);
background-repeat: no-repeat;
background-size: 138px 33px;
border: 1px solid #e6e6e6;
text-align: right;
padding: 0 25px 0 0;
font: 16px/30px 'Ubuntu';
color: #737373;
}
.active {
background-image: url(http://www.verslomonitorius.lt/uploads/2/1/9/2/21922640/vm_button_active.svg);
color: #ff0000;
cursor: default
}
.button:not(.active):hover {
background-image: url(http://www.verslomonitorius.lt/uploads/2/1/9/2/21922640/vm_button_hover.svg);
color: #000000;
}
Javascript
$('a.link').click(function(e) {
e.preventDefault();
$('a.active').removeClass('active');
$(this).addClass('active')
});
Note: In a live version, don't forget to wrap your javascript in a $.ready or closure
Be more accurate with libraries defined in jsfiddle. Here is what you need.
$('td.link').click(function() {
$('td.button_active').each(function(index) {
$(this).removeClass('button_active');
});
$('td.link').each(function(index) {
$(this).addClass('button')
});
$(this).removeClass('button');
$(this).addClass('button_active')
})
I need to place a <div> with fixed height (100px) and full width (100% of the parent <td>) within a <td> on the bottom. The <td> could be higher than the browsers viewport height as the content of the other <td>s are probably huge.
I already tried some solutions like this (link), which is actually placing the div at the bottom of the browsers viewport.
Edit:
Here's a snippet of what is NOT working (according to the link above):
td {
position: relative;
}
div {
position: absolute;
bottom: 0;
}
Is there any option to fix a <div> to the total bottom of a <td> using PHP, HTML, CSS or JavaScript (jQuery also)?
Edit 3:
Another problem occuring, when I use the solution as showed above is, that if I assign the div the property "position: absolute;" the "width: 100%;" relates to the viewport width, not the td width.
Edit 4:
The actual code of my page:
html:
<tr>
<td id="content">
</td>
<td class="sidebar">
<div class="internal">Notice</div>
</td>
</tr>
css:
#content{
height: 1000px;
}
.sidebar{
width: 10%;
min-width: 200px;
position: relative;
}
div.internal{
position: absolute;
bottom:0;
width:100%;
height: 100px;
}
jsFiddle: Source
Here's a working example
Use this to place the div at the bottom
td{
position: absolute;
}
div{
position: absolute;
bottom: 0px;
}
UPDATE
This is an example with your code working link
It work's for me in Chrome and IE. The Red section is your div. Is this the layout you want?
UPDATE 2
If you want to use a table layout you can try doing that: table layout
UPDATE 3: working only with tables
If the previous solution didn't work for you I'm guessing your code isn't modular enough. If you want to use tables, you might want to use only tables. Add another table inside the requested cell like this: table inside the cell . As much as I'm against it, I still think it's better than using JS to solve your problem. It will be easier to maintain in the future.
You need using something like:
<table>
<tr>
<td class="sidebar">
<div class="internal">Notice</div>
</td>
</tr>
</table>
CSS:
.sidebar{
width: 10%;
min-width: 200px;
height: 1000px;
background-color: green;
}
div.internal{
position: absolute;
height: 100px;
background-color: yellow;
}
Javascript:
$(document).ready(function () {
var $div = $('div.internal');
var $td = $div.closest('td');
$div.width($td.width() + 2);
$div.css('top', ($td.height() - $div.height() + 12) + 'px');
});
http://jsfiddle.net/Z58ZW/5/
try adding
div.myClass{
position: absolute;
bottom:0;
width:100%;
}
to the div.
Example with the div positioned only on td bottom.
JSFiddle