I want a set of <td>s to float left in IE7. They should break onto the next line if the window is too small.
CSS
table {
width: 100%;
}
td {
border: 1px solid red;
}
tr.f td {
width: 500px;
float: left;
}
HTML:
<table>
<tr class="f">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
This works in IE8 and Firefox, but not in IE7. What am I doing wrong?
Page rendering mode is "IE7 (Quirks)" or "IE7 (Standards)". I'm trying with IE8, though, trusting that IE7 rendering mode is what it says. "IE8 Compatibility View" is failing as well, only "IE8 Standards" gets it right.
I don't think this is possible the way you want.
When you apply the float to td elements [in FF/IE8[ they become anonymous table objects as per the CSS 2.1 spec. Essentially, they're no longer table cells, and these anonymous objects have a display type that is floatable.
IE7 doesn't follow this part of the spec, in fact, the display type of the cells cannot be altered at all, and objects with a display type of table-cell can't be floated.
If you absolutely need to use a table (instead of a ul/li) could you do something like this instead?
<style type="text/css" media="screen">`
table {
width: 100%;
}
.f {
border: 1px solid red;
float: left;
height: 10px;
width: 500px;
}
</style>
<table summary="yes">
<tr><td>
<span class="f">1</span>
<span class="f">2</span>
<span class="f">3</span>
</td></tr>
</table>
My best guess: IE7 and below have stricter table models and don't allow you to change the flow of table elements.
Related
I've been trying to fix this issue for 10 days now and still i couldn't find any solution.
I have a table that shows perfectly on desktop version but on mobile it gets out of the page area, i tried also #media screen max width 600px to modify the size of the table and overflow hidden but still not working, i will paste the code below:
<style type="text/css">
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #d3d3d3;
text-align: center;
white-space: nowrap;
}
th {
background-color: #0288D1;
border: 2px solid #d3d3d3;
text-align: center;
font-size: large;
color: white;
text-transform: uppercase;
}
</style>
<table>
<thead>
<tr>
<th colspan="4" style="background-color:#0277BD"><strong>Some Text Here<strong></th></tr>
<tr>
<th><strong>Some Text Here</strong></th>
<th><strong>Some Text Here</strong></th>
<th><strong>Some Text Here</strong></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a rel="nofollow" target="_blank" href="https://somesite.com/play"><img width="200" height="80" src="https://somesite.com/image.png" alt="Some Text Here"></a>
</td>
<td><strong><font color="green">Some Text Here</font></strong></td>
<td>Some Text Here</td>
<td>
<div>
<button class="playblock" style="display:block;width:150px;height:50px;background-color:#4CAF50;margin-bottom:5px;color:white;font-size:20px;cursor:pointer;text-align:center;" onmouseover="this.style.backgroundColor='green'" onMouseOut="this.style.backgroundColor='#4CAF50'" onclick="window.location.href = 'https://somesitehere.com/play';">PLAY</button>
</div>
<div>
<button class="reviewblock" style="display:block;width:150px;height:50px;background-color:#EB9C12;color:white;font-size:20px;cursor:pointer;text-align:center;" onmouseover="this.style.backgroundColor='orange'" onMouseOut="this.style.backgroundColor='#EB9C12'" onclick="window.location.href = 'https://somesitehere.com/see/';">REVIEW</button>
</div>
</td>
</tr>
This is a common problem with tables on mobile. It is not clear if you are using the table for layout or if you will have more rows of data with Play and Review links.
If you are using it for layout, I would suggest exploring a flexbox layout instead.
If you are planning to have more rows in the table you could wrap the table in a <div> with max-width: 100%; overflow: auto; that would allow the div/table to horizontally scroll but not otherwise affect the layout of the page. Pair this with reduced font-size on smaller screens and, IMO, you get a pretty usable table on mobile.
There are a few methods for modifying how a table is rendered on small screens by using a data attribute (like data-title) on the <td> and <th> that duplicate the column heading so that on small screens you can pull the data attribute using a ::before pseudo element like td::before { content: attr(data-title); } and tell your table elements to all be display: block; and styling them kinda like each row is it's own table.
Here is an example from CSS Tricks: https://css-tricks.com/responsive-data-tables/
You have to decide what it should look like on mobile. The simple fix is to set a min-width on the table but this might make things to small on mobile. You should also be using a media query to make the buttons smaller, they are very large.
table { min-width: 500px; }
Add a container element with overflow-x:auto around the <table>, for example:
<div style="overflow-x:auto;">
<table>
...
</table>
</div>
This table will display a horizontal scroll bar if the screen is too small to display the full content.
Thanks for all your feedback.
I fixed it myself after some testing using:
#media only screen and (max-width: 800px) { ... }
I am trying to append some content to a th container where the text is centered. I want the new content to be at the very right of the container, and keep the current text centered.
|--------content--------|
to
|--------content-------a|
where a is the new content.
I have seen a couple of similar posts, but can't find one that is relevant. I can easily do a float left , right, clear both to keep a on the right and content on the left, but I specifically want to keep content where it is. Also, I don't want content to be shifted to the left due to the presence of a if possible.
Try the following. Use position: relative on the th and then use absolute positioning for the appended element, b in my example.
table {
border: 1px dotted blue;
width: 100%;
}
table th {
position: relative;
}
table th div {
position: absolute;
top: 0;
right: 0;
border: 1px dotted gray;
color: red;
}
<table>
<tr>
<th>Centered Content <div>A</div></th>
</tr>
</table>
I think this is what you need.
<table width="200px" border="1">
<tbody>
<th> <span style=" text-align:center;">content </span><span style="float:right;">1</span>
</th>
</tbody>
</table>
I am trying to create a button inside the caption of a table. It works in both Firefox and Chrome, but not IE 7 (The most used browser for my userbase). IE 7 creates the button on a new line below instead of floating it to the right.
Here is the (simplified) html
<table>
<caption>
Versions
<button class="inline-button">Add</button>
</caption>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>10.0</td>
<td>Oompa-loompa</td>
</tr>
<tr>
<td>10.0</td>
<td>Oompa-loompa</td>
</tr>
</table>
Here is the css:
button.inline-button {
float: right;
border: 1px solid gray;
margin: 0;
}
table { width: 300px; }
caption { background: #ddd; }
As is usual (for IE7) one simple solution is to switch the order of the text and the button:
<caption>
<button class="inline-button">Add</button>
Versions
</caption>
http://jsfiddle.net/hgNdK/
If you float: left; the "Versions" bit, it works sensibly in IE6 and IE7. I also set display: inline; on the button, because you are trying to make it display in-line. It shouldn't make any difference because of the floating, but it more semantically correct, and it may help in certain browsers.
Here's a jsFiddle demonstrating the solution.
I have the following :
HTML
<th class="sort">
<div>
<div class="sort"></div>Last Name
</div>
</th>
css:
table.tablesorter thead th.sort
{
padding:0;
}
table.tablesorter thead th div.sort
{
margin:0;
width:15px;
height:30px;
float:left;
background: url("/Content/images/admin/sort.png") no-repeat;
background-position: 0px center;
cursor:pointer;
}
table.tablesorter thead tr th.sort a
{
cursor:pointer;
color:inherit;
vertical-align:middle;
float: left;
padding-top: 7px;
}
I want to display inner and inside vertically aligned middle and always on ONE line so that when a browser window is resized (small) it will not break and will not more underneath inner (which is what is happening now).
thanks
use the "display inline" command...
<div style="display:inline;float left;">First name</div>
<div style="display:inline;float right;">Last name</div>
Its not clear to me what "inner" and "inside" youre referring to (you mught want to update and elaborate a bit, as well as post the complete markup for the table) but it sounds like you basically want everything in the th to be in one continuous line regardless of avialable space. You can turn off the text from wrapping with whitespace: nowrap;. However your content is going to overflow the th because thats how table cells work, so you need to set overflow: hidden on something that wraps the text. Unless yo need more than one elemment inside the cells you dont need the float.
The markup might look like this:
<thead>
<th><div class="clip sort">First Name</th>
<th><div class="clip sort">Last Name</th>
</thead>
Whith the css like so:
.clip {width: 100%; overflow: hidden; whitespace: nowrap;}
th {vertical-align: middle; height: 30px;}
I found many answers to this question on Google, but none of them seem to work for all browsers.
I am looking for a CSS-only way to get min-width working on Firefox, IE6, IE7, and IE8. It is well-known that IE does not support min-width, so several hacks are out there to try to emulate the behavior of min-width. Unfortunately, I have not had any luck with them.
Specifically, this is what I'm trying to do:
<style type="text/css">
table.dataTable td {
white-space: nowrap;
}
table.dataTable td.largeCell {
white-space: normal;
min-width: 300px;
}
</style>
<table class="dataTable">
<tr>
<td>ID</td>
<td>Date</td>
<td>Title</td>
<td class="largeCell">A large amount of data like a description that could
span several lines within this cell.</td>
<td>Link</td>
</tr>
</table>
Does anyone have a way to get this to work?
So it turns out that the necessary hack for getting min-width to work in all browsers isn't as ugly as many make it out to be.
All I had to do was add CSS for a div within the largeCell and add an empty div at the end of the cell. The div is only 1px tall, so it doesn't really make the cell look larger than it should be.
<style type="text/css">
table.dataTable td {
white-space: nowrap;
}
table.dataTable td.largeCell {
white-space: normal;
min-width: 300px;
}
table.dataTable td.largeCell div {
margin: 0px 0px 0px 0px;
height: 1px;
width: 300px;
}
</style>
<table class="dataTable">
<tr>
<td>ID</td>
<td>Date</td>
<td>Title</td>
<td class="largeCell">A large amount of data like a description that could
span several lines within this cell.
<div></div>
</td>
<td>Link</td>
</tr>
</table>
I use:
min-width: 200px;
_width: 200px; /* IE6 */
min-height:expression( document.body.clientHeight +'px');
min-width:expression( document.body.clientWidth +'px');
By default the Document mode in IE will be Quirks mode
Solution:
add the doctype on top of your html page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
After so many hack that i have tried none of them works for me for this "min-width" issue, but finally i got its solution for IE 8.
Try to use this: <!DOCTYPE html> as your DOC type, this is HTML 5 DOC Type that turns your IE8 page to behave like mozilla or webkit browser.
So apart for min-width and min-height issue, it solves many IE8 problems very easily.
If my post helps you please mail me with your name thats it works for you.
Try adding:
overflow: visible
to the element
I was having a similar issue, I needed a site to be 95% unless it was less than 980px.
Nothing here worked, and in desperation I reached out to Bill Burlington's expression answer. The one mentioned above didn't work for me, but if I used a more robust expression it did!
width: expression ( document.body.clientWidth < 980 ? "980px" : "95%" );
This basically says if the width is less than 980px, set the width to 980px. If it's wider, set the width to 95%.
<style type="text/css">
.table1 th a {
display:inline-block;
width:200px";
}
</style>
<table>
<tr>
<th><a>title1</a></th>
<th><a>title2</a></th>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
</table>