I have a table with 1 row and two cells.
Each cell has its own background image.
I need to be able to display some text that will be centered in relation to the entire table, meaning that it will appear to be displayed over both table cells.
like this:
Or ideally:
You can use Colspan / Rowspan to create a cell that spans over multiple rows / multiple columns. But it will be a single cell with a single background image as well.
Take a look at this example 'http://www.angelfire.com/fl5/html-tutorial/tables/colspan.htm'
EDIT: You added a new example that clearly shows that colspan will not solve the problem:
Take a look at the answers to this question
Invert CSS font-color depending on background-color
It includes code for a similar solution using DIV elements positioned ontop of each other
One very primitive solution to this goes like this:
<table style="position:absolute; left: 100px; top:100px; width:400px; z-index:1; ">
<tr>
<td style="width: 200px; height: 200px; background-image: url('http://www.hdofwallpapers.com/wp-content/uploads/2013/11/Opera-Background.jpg')"></td>
<td style="width: 200px; height: 200px; background-image: url('http://www.hdofwallpapers.com/wp-content/uploads/2013/11/Opera-Background.jpg')"></td>
</tr>
</table>
<div style="color:#ffffff; position: absolute; left: 100px; top: 200px; text-align: center; width:400px; height:200px; vertical-align:middle; z-index:2">
sadf asfasdf asfd d
</div>
Related
I have a one-row table that is centered within a div. Two of the columns (i.e. cells) are filled with the name of a team and a round. I simply can't find a way to make the size of these columns correspond to the length of e.g. the team name.
The HTML code is:
<div id="greeting">
<table id="t03">
<colgroup>
<col style="width: auto;">
<col style="width: auto;">
<col style="width: auto;">
<col style="width: auto;">
</colgroup>
<tr style= "height: 30px; width:auto;">
<td> Welcome, Team</td>
<td id="teamnamehere"></td>
<td> Please Make Your Decisions for Round</td>
<td id="roundnumberhere"></td>
</tr>
</table>
</div>
The corresponding CSS is:
#greeting {
position: absolute;
top: 385px;
width: 980px;
margin: auto;
}
table#t03 {
width: 65%;
margin: auto;
font-family:verdana;
font-size:18px;
font-color: #000000;
background-color: #FFFFFF;
}
Thanks for any help!
The problem comes from trying to use a table for wrong purposes - they should only be used for data that genuinely needs a tabular layout to understand it. Use two divs instead, and make them inline-block in the CSS:-
div { display : inline-block}
and that will both show them side by side on one line and allow the divs to adjust their size to the length of text.
It has the additional advantage of being Responsive, so if you have an exceptionally long name or text too large to fit on a mobile phone screen, the second div will automatically drop to the line below!
If you remove width: 65%; from table#t03, it will have the width of its content.
I have a div that has a table in it.the table has a row and tow columns.I want a div inside the second column and I want it to be positioned absolute from the table column(not the start of the page).so here is what I did:
this is the html file:
<body>
<div id="one">
<table id="table">
<tr id="two">
<td id="three"></td>
<td id="three">
<div id="four"></div>
</td>
</tr>
</table>
</div>
</body>
and this is the CSS:
#one {
width: 100%;
height: 100px;
background-color: #f00;
}
#three {
width: 100px;
height: 80px;
background-color: #b6ff00;
/*margin-left: 100px;*/
/*float: left;*/
position: relative;
}
#four {
width: 50px;
height: 40px;
background-color: #0ff;
position: absolute;
left: 20px;
top: 20px;
}
this code works nicely on Chrome and IE.But it doesn't work on Firefox.In Firefox,the <div id=four> 's position,starts from the top left corner of the page rather than the <div id=three>.What can I do about it?(And I should mention that I should use a table for my design.I can't use anything else here)
I had this EXACT same problem, found none of the above answers fixed it, and then found a solution in a different thread that fixed it for my project.
Put display: block; on the td that is parent to the div. That's it.
You may be interested to know that I tested this with your example code and got it to work as well, without negative effects in other browsers that I've tested so far. Your mileage may vary depending on needs of the project.
One downside is that it does kill the td identity - for some table layouts you will need additional CSS trickery to reformat, for others this may not be feasible.
Linkage to answer I found:
Using Position Relative/Absolute within a TD?
Give the parent position:relative and you are done.
How to force images to overflow in table cells without expanding the cells?
EDIT:
Sorry, I'll provide some more information. This is the table:
<table class="content">
<col width="200px" />
<col width="560px" />
<col width="200px" />
<tr>
<td colspan="3" class="logo"></td>
</tr>
</table>
CSS:
.logo
{
height: 120px;
background: url('img/wallpaper.png') center;
}
I thought there would be a simple solution...
If you use an <img> tag instead of a background image, you could remove it from document flow with position: absolute;
html
<td class="logo">
<img src="img/wallpaper.png">
</td>
css
.logo img {
position: absolute;
}
This will let the image overflow the cell, but creates other side-effects you would need to deal with. Update top or bottom accordingly to keep the image in place.
Adjusted css
.logo img {
position: absolute;
top: 15px;
}
Check out http://jsfiddle.net/QMNRp/1/
You're asking for an element's background to escape into the foreground. This isn't possible. An element's background can only be as large as the element itself.
To make the .logo image the same dimensions as the containing cell you could make use of the background-size property, but this isn't supported in older browsers.
Set Static Width to td's and set overflow to visible and text-wrap:nowrap; or word-break to keep all for text in tables
td{
width:100px;
max-width:100px;
overflow:visible
text-wrap:nowrap; //for text
word-break:keep-all; // for text
}
I have an html table of width 222px
Inside in I have a single row with width defined as 160px.
Inside this row, there is a single column having same width as that
of the row.
My question is, how to align this row to the center of the table.
I have tried align="center"and style="float:center;" but these work only
on the contained text.
But if you really, really must use a table, here's how to style it:
.resultset {
width:222px; border:1px solid;
border-collapse:separate; border-spacing:30px 2px;
}
.resultset td {
border:1px solid;
}
Where the 30px in the border-spacing is half the horizontal difference between the table width and the cell width.
See jsFiddle.
Agree with Quentin. There is no point having a 1x1 table.
Try with the following.
<div style="margin: 0px auto; position: relative; width: 222px;">
....your content
</div>
You might want to create a CSS class for the div. I personally don't like having inline styles.
you can try this like that
<table width="222px" align="center">
<td width="31px"></td>
<td width="160px">test</td>
<td width="31px"></td>
</table>
test here : http://www.webmasterorbit.com/wysiwyg-html-tester.html
You must use this
<td align = 'center'>Blah blah</td>
using this wont work
<tr align = 'center'></tr>
I have these code block:
<table border="1px">
<tr>
<td>
my content
</td>
</tr>
</table>
I'd like to show my table in the center of the screen (vertically and horizontally).
Here is a demo.
How can I do that?
Horizontal centering is easy. You just need to set both margins to "auto":
table {
margin-left: auto;
margin-right: auto;
}
Vertical centering usually is achieved by setting the parent element display type to table-cell and using vertical-align property. Assuming you have a <div class="wrapper"> around your table:
.wrapper {
display: table-cell;
vertical-align: middle;
}
More detailed information may be found on http://www.w3.org/Style/Examples/007/center
If you need support for older versions of Internet Explorer (I do not know what works in what version of this strange and rarely used browser ;-) ) then you may want to search the web for more information, like: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html (just a first hit, which seems to mention IE)
This fixes the box dead center on the screen:
HTML
<table class="box" border="1px">
<tr>
<td>
my content
</td>
</tr>
</table>
CSS
.box {
width:300px;
height:300px;
background-color:#d9d9d9;
position:fixed;
margin-left:-150px; /* half of width */
margin-top:-150px; /* half of height */
top:50%;
left:50%;
}
View Results
http://jsfiddle.net/bukov/wJ7dY/168/
I think this should do the trick:
<table border="1px" align="center">
According to http://w3schools.com/tags/tag_table.asp this is deprecated, but try it. If it does not work, go for styles, as mentioned on the site.
For horizontal alignment (No CSS)
Just insert an align attribute inside the table tag
<table align="center"></table
I've been using this little cheat for a while now. You might enjoy it. nest the table you want to center in another table:
<table height=100% width=100%>
<td align=center valign=center>
(add your table here)
</td>
</table>
the align and valign put the table exactly in the middle of the screen, no matter what else is going on.
One way to center any element of unknown height and width both horizontally and vertically:
table {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
See Example
Alternatively, use a flex container:
.parent-element {
display: flex;
justify-content: center;
align-items: center;
}
This guy had the magic wand we were looking for, guys.
To quote his answer:
just add "position:fixed" and it will keep it in view even if you scroll down. see it at http://jsfiddle.net/XEUbc/1/
#mydiv {
position:fixed;
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
border: 1px solid #ccc;
background-color: #f3f3f3;
}
I tried above align attribute in HTML5. It is not supported. Also I tried flex-align and vertival-align with style attributes. Still not able to place TABLE in center of screen.
The following style place table in center horizontally.
style="margin:auto;"