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.
Related
Setting some tds to have border widths to "thin" and some to "0" with border-collapse: collapse; I would have thought would give me no 2px-wide borders, but yet I get inconsistent borders. It seems to be a problem when one has display:flex on it--gets rendered 2px wide instead of 1px, as if there is no border-collapse. Is this a shortcoming of Chrome or am I missing a CSS technique?
Does anyone have insight on what circumstances cause border-collapse to fall short of the ideal in Chrome?
Here's the effect in an example - cell two seems to ignore border-collapse.
table {
box-sizing: border-box;
border-collapse: collapse;
}
td {
border-left: thin solid #d3d3d3;
border-right: thin solid #d3d3d3;
}
.d-flex { display: flex; }
<table class="my-grid">
<tr>
<td>cell one</td>
<td class="d-flex">cell two</td>
</tr>
<tr>
<td>cell three</td>
<td>cell four</td>
</tr>
</table>
The border-collapse property only applies to table and inline-table elements.
You're telling the table cell to display as flex instead of an inline-table element so it can't collapse its borders.
Note that this is not specific Chrome either. Testing in Edge and Firefox yields the same result.
Using display: flex; makes the cell lose some of its desirable table cell properties, since it is no longer set to display: table-cell;, and there is no display: table-cell-flex.
So the only solution seems to be to add a container <div> element inside the <td>, which should by nature take up the entire table cell except for its padding if any, and make it have display: flex; so that I can use flexbox styles for the content.
table {
box-sizing: border-box;
border-collapse: collapse;
}
td {
border-left: thin solid #d3d3d3;
border-right: thin solid #d3d3d3;
}
td {
display: table-cell;
vertical-align: inherit;
}
.d-flex { display: flex; }
<table class="my-grid">
<tr>
<td>cell one</div></td>
<td><div class="d-flex">cell two</div></td>
</tr>
<tr>
<td>cell three</td>
<td>cell four</td>
</tr>
</table>
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 have the following code here:
table {
border-collapse: collapse;
border-spacing: 0px;
resize: both;
}
td {
border: 2px solid black;
padding: 10px 20px 10px 20px;
margin: 0px;
resize: both;
overflow: auto;
}
div {
resize: both;
overflow: auto;
width: 120px;
height: 120px;
border: 1px solid black;
}
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<br>
<div></div>
It doesn't work in Chrome, Safari or IE.
If you re-size the width of the top-left cell, and then re-size the width of the middle-left cell it will not let you downsize the width.
If you try to downsize via the top-left cell again it will not work
either.
How should I fix it?
When you resize an element using the CSS resize property, a CSS height/width are applied inline to that table cell.
Example:
Now, let's resize the cell below it so that the width is smaller:
It doesn't work, the width of the top cell does not change and the column remains the width of its largest cell.
This particular behaviour is not a bug, it is a limitation of the resize property. To get the result that you want, you would need to adjust the width of all the cells in the column, when one is resized. This would require javascript.
Note: I'm not saying that Chrome (tested 44.0.2403.130 m) doesn't have bugs using the resize property on table cells, it does display very buggy behaviour.
Maybe the bug is your code. You may not to allow resize tables and tds. You can resize divs inside your td and it was correct. Table and cell resizing is not allowed in firefox and in webkit browsers it is dangerous.
You can make something like this:
<table>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
</table>
<br>
<div></div>
And the css
table, td { resize: none; }
table td div { min-width: 50px; min-height: 50px; resize: both; }
I seem to be having issues with the either the border, or the box shadow appearing on my site.
If need be I will post the CSS for the areas that have the borders applied but it may be easier to just link you to my site: http://w11.zetaboards.com/GamesAndAnime/index/
Please remove below tr
<tr>
<td colspan="6" class="c_foot"></td>
</tr>
And add padding-bottom:10px to table (css.css line no:31) like below
table {
clear: both;
width: 100%;
padding-bottom: 10px;
}
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.