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>
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'm programming pages exclusively for IE (corporate environment). Trying to achieve matching layout from separate tables stacked one on top of the other on the table.
Trying to use CSS table-layout:fixed, but encountering problems. Unless I set the padding in each cell to 0px, the resulting width of the table increases by 2px for every cell in the row.
I need there to be distance between the edge of the cell and the text, but I don't want that to affect the width of the table. How do I get padding and an exact fixed-width table?
Here's my code. Note that the DIV displays exactly 500px wide, but the table is wider.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div style="height:30px;width:500px;background-color:Blue;">500px</div>
<table style="width:500px;table-layout:fixed;border-spacing:0px;"><tr>
<td style="width:100px;background-color:#d0d0d0;">Text</td>
<td style="width:100px;background-color:#d0d0d0;">Text</td>
<td style="width:100px;background-color:#d0d0d0;">Text</td>
<td style="width:100px;background-color:#d0d0d0;">Text</td>
<td style="width:100px;background-color:#d0d0d0;">Text</td>
</tr></table>
</body>
</html>
You're making the border, and padding on the table equal 0 anywhere they are.
table, th, td {
border: 0px;
padding: 0px;
}
Adding padding or margin to your tds via styling will increase their width, as you've experienced. But you can add margin to anything inside a table cell.
Example:
<td><span>Text</span></td>
td > * {
margin: 3px;
}
It seems that the CSS model achieves padding by adding to the width of the object, not by creating an internal margin within the object. The only way I could overcome this was by changing the width of each column in the example to 96px, thus accommodating for the inherent 2px of padding on either side of the text.
You have to reset the padding for your td elements. You do not need table-layout: fixed; on your tables and should consider to avoid inline style attributes on your elements.
The padding is due to the browsers' default stylesheets. If you want to remove all default styles you can take a look at “css resets”.
See the following code and a live example on JSFiddle.
HTML
<div class="reference">500px</div>
<table>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</table>
CSS
.reference {
width: 500px;
background-color: blue;
}
table {
width: 500px;
border-spacing: 0;
}
td {
width: 100px;
background-color: #d0d0d0;
padding: 0; /* important */
}
I am working on a client's site that was built using XHTML 1.0 Transitional. I'm changing it to HTML5.
I run into a problem when I switch the Doctype declaration to HTML5 however: table cells acquire top and bottom padding of about 2px.
But here's the strange thing: it isn't padding! While it displays as padding (green) in Chrome's Developer Tools, the Metrics section of DT clearly shows that there isn't any padding.
So if it's not padding, what is it? And where does it come from?
I've tried zeroing everything but to no avail.
HTML:
<DOCTYPE html>
<html>
<table>
<tbody>
<tr>
<td>Link</td>
<td>Link</td>
<td>Link</td>
<!-- etc etc -->
</tr>
</tbody>
</table>
</html>
CSS:
table, tbody, tr, th, td {
margin: 0px;
border: 0px;
padding: 0px;
border-collapse: collapse;
border-spacing: 0;
}
td {
line-height: 20px;
vertical-align: middle;
border-spacing: 0;
}
a {
display: block;
width: 50px;
height: 20px;
margin: 0px;
padding: 0px;
background: url(somebackground-image);
}
I tried copying everything over to jsFiddle but I couldn't recreate the issue.
Turns out this is apparently an issue related to HTML5.
This page relates specifically to Chrome, but I observed the behaviour in IE9 also.
I removed the line-height declaration from the table cells, but that wasn't enough - I also had to set the table line-height to 0px.
table {
line-height: 0px;
}
td {
/* make sure no line height is set on td */
/* line-height: somepx; */
}
This solved my problem.
Dear all, I tried CSS Position: Fixed Property but it does work properly on Firefox and IE(hack for IE6), but it's not working at all for Chrome. I thought Chrome being the latest will support it very easily but still it isn't. I Tried out <thead>,<tfoot><tbody> again works in IE and Firefox, but problematic in Chrome. Please any one have an alternate solution to it.
It seems like Chrome[webkit] has different way of handling position:fixed in print stylesheets than the rest of the browsers.
So the current answer to this question is:
There is no adequate solution for this in Chrome.
Whereas FF and IE render it on Every page, Opera doesn't show it at all, and webkit browsers only show it on the first page.
small test file:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>print css test by mtness</title>
<style type="text/css">
#media print {
#watermark {
display: block;
position: fixed;
top: 0;
right: 0;
z-index: 5;
}
p {
position: relative;
top: 40pt;
display: block;
page-break-after: always;
z-index: 0;
}
}
</style>
</head>
<body>
<div id="watermark">AWESOME!</div>
<p>page1</p>
<p>page2</p>
<p>page3</p>
</body>
</html>
further resources might be found here:
http://room118solutions.com/2011/03/31/styling-print-headers-and-footers-with-css/
http://css-discuss.incutio.com/wiki/Printing_Headers
http://www.andypemberton.com/css/print-watermarks-with-css/
test page:
http://www.andypemberton.com/sandbox/watermark/
HTH.
Kind regards, mtness.
Edit: Apparently the bug has been fixed, so the library I share below may not be of much use anymore.
From all of my research, it is correct that there is no way to get position: fixed to work in Chrome. Here is a link to the bug on the Chromium project page.
In the meantime, I have created this open-source project that allows you to print headers and footers in Chrome. It is early in development but it works, depending on the structure of your HTML layout:
It is a work-in-progress, and it relies heavily on the CSS Regions Polyfill. But I am using the techniques in this library to very good effect on a project at work.
I accomplished that using tables, but only for headers in chrome. I placed the repeating content on thead tag and the page content in tbody, so the browser interpreted correct.
However, I have encountered a bug in large contents HTML. In some cases, the content overlapped the header. In the date that I'm posting this, still not found a solution.
When printing tables in Google Chrome, content overlaps header
thead.report-header {
display: table-header-group;
}
tfoot.report_footer_Mh {
display:table-footer-group;
}
tabel.report-container {
page-break-after: always;
}
<table class="report-container" cellpadding="4" cellspacing="0" width="790" align="center" background="" style="word-break: break-word">
<!-- place the header part here-->
<thead class="report_header_Mh">
<tr>
<th class="report_header_cell_Mh">
<div class="header_info_Mh">
</div>
</th>
</tr>
</thead>
<!-- Header Ends here-->
<!-- Place the Main Content here-->
<tbody class="report_content_Mh">
<tr>
<td class="report_content-cell_Mh">
<div class="main_Mh">
</div>
</td>
</tr>
</tbody>
<!-- Main Content ends here-->
<!--Place Footer content here-->
<tfoot class="report_footer_Mh">
<tr>
<td class="report_footer-cell_Mh">
<div class="footer_info_Mh">
</div>
</td>
</tr>
</tfoot>
<!-- Footer Ends here-->
</table>
It worked for me try this way
This is the code i use. Note I am setting both html and body height to 100%.
#media print {
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#footer {
position: absolute;
bottom: 0;
}
}
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.