I am helping a friend with his website (URL: http://mk7vrlist.altervista.org/databases/test.html). I used a table for the design and I put each single inputbox in a <td> .. </td>. I used Javascript for save the datas and PHP for upload them on the server. My problem is that when an user open this page, the table is not well aligned according to the background.
Screen of my desktop.
As you can see, the table is insede the black rectangle, but with other screen sizes the looking is not the same. For solve this problem I used the following code:
CSS:
body {
background-image:url('pictures/bgframe.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
input{
text-align:center;
}
In the table I used this code:
<table id="tab" border="0" style="width:1200px;" align="center">
<tr>
...
</tr>
</table>
This code is not working because with a smaller screen, the align of the table is not the same.Can you help me? If you want, here there is the entire code.
You probably should try relative CSS property, like: width:100%; (instead of hard-coded value in px) in order to scale it properly. Also, it might be useful to explicitly set HTML5 <body> CSS properties: padding:0;margin:0;
Related
I am trying to create a progress update e-mail. I have two main percentage calculations:
Actual Percentage: What is the actual number of completed items, used to fill the progress bar.
Target Percentage: What was the target number of completed items for this time, used to put a vertical line on the progress bar.
I create the html file dynamically from a Scala back-end task. I am copying created html string to a test.html file, see the code:
Style section:
.vl {
border-left: 3px solid black;
height: 15px;
position: relative;
}
Body section:
<table style="border:0;" cellpadding="0" cellspacing="0" width="250">
<tr>
<td style="width:0.0%; background-color:red; float:left; height:15px;"></td>
<td style="width:100.0%; background-color:#cccccc; float:left; height:15px;"><div class="vl" style = "left: 98.75777%"></div></td>
</tr>
</table>
The problem is, when I open the test.html file on a browser (chrome, explorer, edge all the same) I can see my progress bar (sort of) seems correct:
But when I send the e-mail, outlook doesn't show "target percentage":
I've faced the same issue for example with progress tag, it was perfect in browser but not working in the mail so I used td's with percentages. But since this vertical line is completely defined css style by me, I couldn't find a work-around for this one.
I've found which features are not supported on Outlook on this website. For my particular example it was position tags.
I've removed position tags and converted whole structure to a table so I could find a work around for position tags.
I want to put an some animation on my screen so I got a really cool idea and the programmed it. I have it ready and now I put it in a table(i really love tables) to create a "bordered" effect. It now sits in the bottom corner of my screen. i have used align="right" and gotten this far. Vertical-align or valign="top" are not doing anything. Can you help?
Not knowing the actual markup, e.g. possible containers like a div where the table is located, one approach can be using absolute positioning (just using the selector table as example, better use a class):
table
{
position:absolute;
top:0;
right:0;
}
Fiddle
To display the table to the right, you can use float:
table
{
float:right;
}
Fiddle
but question because of missing markup / CSS in the OP is, why the table is currently displayed at the bottom. In case this is a misunderstanding and it's not the table that you want to position, but content in a tablecell - <td> - you can consider to update this in your question to avoid confusion.
I have an html table that is created using constant contact and and I would like to make it responsive and fit the container div holding it.
Here is the demo
I tried the following but this doesn't work as well
<table border="0" width="100%" cellspacing="0" cellpadding="0">
Table aren't great at being responsive and keeping their layout - so it's probably best to override their styles on smaller screens, like:
http://jsfiddle.net/wildandjam/E32Cq/
#media all and (max-width:768px){
table,tr, td, tbody, td p table div, table table{
width:100%!important;
float:left;
clear:both;
display:block;
text-align:center;
}
table img {
max-width:100%;
height:auto;
}
}
Pure css way to make a table fully responsive, no JavaScript is needed. Check demo here Responsive Tables
Here is css
<style>
.tablewrapper{width: 95%; overflow-y: hidden; overflow-x: auto;
background-color:green; height: auto; padding: 5px;}
</style>
And here is HTML Part
<div class="tablewrapper">
<table class="responsive" width="98%" cellpadding="4" cellspacing="1" border="1">
<tr>
<td>Name</td>
<td>Email</td>
<td>Phone</td>
<td>Address</td>
<td>Contact</td>
<td>Mobile</td>
<td>Office</td>
<td>Home</td>
<td>Residency</td>
<td>Height</td>
<td>Weight</td>
<td>Color</td>
<td>Desease</td>
<td>Extra</td>
<td>DOB</td>
<td>Nick Name</td>
</tr>
</table>
</div>
Additionally use can use jquery to add tablerapper on page load, if you don't want to manually add tableWrapper div around your table. Just use
$().ready(function(e){
$(document).find("table.responsive").each(function(e){
$(this).wrap("<div class="tablewrapper"></div>")
})
})
It'll be much easier if you don't use html elements that aren't designed to do this job. Tables are used for presenting data, not to hold layout.
If you really need to use tables you'll have to hide and show rows with media queries, which is a pretty bad practice.
If you decide to go with divs, you can float them setting different width in media queries depends on screen size.
I've been looking to your case and I have two answers for you.
The first one is the answer to the question "¿how to make your html table responsive?" (note: Spanish article, you may need chrome page translator for example)
The second one is "you should considere a more semantic markup" (tableless) for that content. Instead of using <table> you should use <ul><li> as follows:
<ul class="itemList">
<li class="item">
<img src="" alt="" />
<p>From</p>
<p class="price">25€<span>per person sharing</span></p>
</li>
</ul>
Then use external CSS to apply style:
.itemList {width: 100%} /*probably not necessary*/
.item {display:inline-block; width: 33%; max-width: /*here your desired max width*/}
.price span {display: inline-block} /*no cells, no floats = no problems*/
Finally you can use #media queries to creat your CSS breakpoints:
#media only screen and (max-width: 480px) {
.item {display:inline-block; width: auto; max-width:100%;}/*just as an example*/
}
Just let me know if you have any further questions
I try to make a lite rwd table extend without any other dependency libraries (ex: jQuery):
https://github.com/sean1093/html-rwd-table
You can simply use as follow:
<div id="myTable"></div>
var myTable = new rwdTableExtend("myTable");
myTable.initTable();
You can use bootstrap to make table responsive.
Define class as table-responsive to make table as responsive.
<div class="table-responsive">
<table class="table">
...
</table>
</div>
TL;DR:
I have a solution that works well for a lot of table implementations, given that you are formatting your tables well (table>thead>tr>th^^tbody>tr>td). Find my CodePen here. Depending on the data in your table, this may be a good mobilizing solution.
The Director's Cut
See my CodePen here.
This solution assumes you have built your tables nicely, meaning you are using thead with th and tbody with td. For example:
<table>
<thead>
<tr>
<th>A</th>
<th>S</th>
<th>L</th>
</tr>
</thead>
<tbody>
<tr>
<td>33</td>
<td>M</td>
<td>United States</td>
</tr>
</tbody>
</table>
Given that the table data isn't characterized by columns and columns of numeric values, this JS / CSS solution works well. You can see it in action on my employer's docs pages (SmartyStreets Documentation) and in human readable form on the CodePen snippet I built for it here. To see it working, resize the screen. Breakpoints are set differently on each implementation, because consistency. Here's how to implement it.
Tables are fed to the tableMobilizer function. Given that it is built on jQuery, this can be done for all tables on the page like so:
var tables = $(table);
tableMobilizer(tables);
You can definitely be more selective about how you mobilize tables with your selector if you need to be.
This will generate a new set of tables for each table passed in and append them after their respective source table. Each new table contains a row of a source table which is transformed with a 90 degree CCW rotation and paired with the table headings.
Old tables are dynamically classed with .hidden-small-down and new tables are classed with .hidden-medium-up for your CSS media queries.
New tables come classed with .mobile-tables (for a collection of all mobile tables generated by a single source table), .mobile-table (for each mobile table representation of a single source table row), .mobile-table-row (for a row in a mobile table), .mobile-table-key (for the first column of a mobile table), and .mobile-table-value (for the second column of a mobile table).
In your CSS, set up your media queries to hide / show the appropriate table views:
#media only screen and (min-width: 768px) {
.hidden-medium-up {
display: none;
}
}
#media only screen and (max-width: 768px) {
.hidden-small-down {
display: none;
}
}
With the media queries implemented, styling the tables is left to your discretion.
After Credits Scene
This is not a silver bullet solution. Visualizations using tabular data can be very complicated. As mentioned above, this solution isn't great for column-heavy tables. It also doesn't handle col and row spanning. As always, seriously consider whether or not you actually need to use a table in your layout (beyond the scope of this comment). If you do, this may be a good solution for mobilizing your tables.
Use media queries and width of your container and font sizes should be in percentage.
The problem here is actually with your table. As you can see, one of the bottom tables has an explicit width set, which is forcing the rest of your table to follow suit:
<table id="content_LETTER.BLOCK1" style="height: 21px;" border="0" width="798" cellspacing="0" cellpadding="0">
Notice the width="798". This will default to pixels. Get rid of any explicitly defined widths and the table should become closer to being responsive.
However, as others have said - responsive tables are tricky. Especially ones containing so many other nested tables (as in your example). You'll also need to address the responsiveness of any images within those tables, as these will likely force the table to be bigger than it needs to be. I would re-visit your whole layout here, and try and adopt a more responsive-friendly element to use throughout your page.
Update:
Please note that the reason #wildandjam's answer 'works' is essentially because he's overwritten the set width of all of your table elements. It's a quick fix but in my opinion it doesn't bridge the gap of understanding.
I've been looking for a way to position one of my tables that has an image in it. Its a little bit far to the left and I need to scoot it over to the right. So far my table is written like:
<TD>
<IMG SRC='http://farm8.staticflickr.com/7209/6978440877_10b1fcffc4_o.jpg'/>
</TD>
What do I need to add? I tried some css like:
position:absolute; z-index:2; left: 50px; top: 1040px;
-but it just appeared on the page as text. What should I add/write so that I can control where I put my table?
When you make a table in HTML you at least need to define the table, rows, and cells (not sure if you had these already, just posting truncated code):
<table>
<tr>
<td> ... </td>
</tr>
</table>
When you define CSS it needs to be in the proper place. You have a few choices. First, you can put it inline in a tag like this:
<table style="attribute:value; attribute:value;">
Or you can define it in the <head> (preferred):
<head>
...
<style type="text/css">
table{
attribute:value;
attribute:value;
}
</style>
</head>
Finally, that 1000 pixel offset is pretty high. Get comfortable with both relative and absolute positioning. Absolute positioning can lead to a lot of issues for beginners who don't understand how layouts flow together in my experience.
Hopefully that will get you started. There are a lot of great resources out there.
Try the following style for <Body> and <TD> tag it will remove the left space.
<body style="margin:0; padding:0;">
<TD style="padding-left:0;" >
If still unable to fix, please provide the complete code.
What is the best way to go about displaying an html table with text in the background of each cell? I am making a calendar and I would like to have grey dates in the background of actual text.
The only thing I can think of at this point is to have the date and the cell content in separate divs that float over one another but even that isn't implementing well within a table.
By the way using an image to display the date is not really an option IMHO.
Use relative positioning in the content span:
<tr>
<td>
<span class="day">6</span>
<span class="contents">Contents go here</span>
</td>
</tr>
And in CSS:
span.day {
line-height: 20px; /* just to give it a height */
display: block;
color: #aaa;
}
span.contents {
position: relative;
top: -20px;
}
Now the spans are overlapping, with contents over day number. You might want to adjust the position but this should work.
Even though this would work, I would advise you to use images. You can embed all the required dates in one image file (the CSS sprite technique), it gives you greater control with less browser specific issues.
Hmm... if I understood correctly, the way I would do it is probably something like the following in each cell:
<div class="cell_container" style="position:relative;">
<div class="cell_bg" style="position:absolute; width:100%;
height:100%; z-index:0; color: gray;">29/12/2009</div>
<div class="cell_fg" style="position:absolute; width:100%;
height:100%; z-index:1;">Jim's birthday</div>
</div>
Naturally, you can move the styles into a seperate css file. You might also be able to do away with the container div and just apply the "position:relative;" style to the containing cell. The major downside to this method is that you will lose the ability to vertically align in IE, without some trickily implemented workaround.
I realize you said that using an image is "not an option IMHO", but may I suggest that using images would give you a lot more flexibility in the appearance of the date. You could use any font available to your image editor, rather than the limited set of fonts you can count on in a browser. And all sorts of image tweaking tricks could be aplied that would be immpossible in the browser.