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;
}
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) { ... }
Quick question. I have a table, it has a border. When I add padding, it adds the padding from the inside of the table. Any way to make it add padding from outside the border?
Essentially, the table border lines should appear to be within its cell.
Im not 100% sure what you mean but you may want this.
HTML:
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
CSS:
body {
padding: 20px;
}
table {
width: 400px;
height: 400px;
outline:2px solid red;
outline-offset: -15px;
}
td {
border:2px solid blue;
}
Table only:
DEMO HERE
Cell only:
DEMO HERE
So here we are setting an outline and you can put an outline-offseton it. So this will bring it into the table if you use - value. Use it as a border but remember it doesn't count towards width or height.
Note: You can use this on each cell etc.
if i understand you right then you should use margin not padding.
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'm trying to BOTTOM align an image in a fixed-height block:
div { float: left; width: 100px; height: 100px; line-height: 100px; }
div img { vertical-align: middle; }
...works in modern browsers, except IE! IE sucks no wonder, but I really need a fix, if possible.
Edited to add: Can't use tables or background image.
Many thanks
Why can't you just position:relative the division, position:absolute and mess with bottom/left properties?
Or toggle it's position to inline-block and play around.
As much as it pains me to say it and at the risk of being drawn and quartered by the purists out there, the most reliable way to vertically align something in a universally compatible way is to use a table.
table {
float: left;
width: 100px;
height: 100px;
line-height: 100px;
}
<table cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="bottom"><img src="foo.jpg" /></td>
</tr>
</table>
Simplest way to do this is to use in the DIV style="background:url(...) no-repeat center bottom" instead of IMG tag.
I can´t find it right now, but I saw something positioning the element at 50% (the top) and then giving it a negative top-margin of -50%.
Just for the vertical alignment obviously...
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.