table information squishes together and elongates

ppstaking · Member · Jul 30, 2017 at 2:54 pm
Copy link

Add topic to favorites
On : https://ppstaking.com/rakeback/
Underneat the text there is a table. The text within the table squished together and elongates when minimising screen. I’d like the text to stay fixed.
I have the following code in case that is effecting anything:
```
.post-705 .entry-content{
width: 95%;
}
.post-705 .th {
	text-align: center;
	padding: 8px;
}
```
– I’d also like to make just the table body font size small, but I seem to be making the whole page small with `.post-705 .tbody {
font-size: 12px;}` etc
– I’m also trying to put a border around each .tr with `.post-705 .tr {
border-style: solid;
border-width: 5px;}` but that isn’t working either.

The blog I need help with is: (visible only to logged in users)
samanthainnes · Member · Jul 30, 2017 at 11:10 pm
Copy link
Would you consider putting the table into an image? That is your best bet for controlling how this content will look.
ppstaking · Member · Jul 31, 2017 at 10:24 am
Copy link
That would work, thanks i’ll try it
ppstaking · Member · Jul 31, 2017 at 11:15 am
Copy link
Image doesn’t work because I have links imbedded in the table.
Something like
```
<td nowrap="nowrap"></td>
</tr>
</tbody>
```
?? Doesn’t seem to work.
ppstaking · Member · Jul 31, 2017 at 11:40 am
Copy link
<th nowrap="nowrap"> functions. Got to play around with it to make the table look as one wants depending on the text.

– Any one know how to reduce text of the table? Without reducing the font size of the rest of the page?
– And also increasing the size of the links??

all on ppstaking.com/rakeback
pankajkumr · Member · Jul 31, 2017 at 11:59 am
Copy link
Hi ppstaking

Try the following trick to make it responsive.
Change your table width to 100% and set the overflow-x to auto. Something like this:
<table id="Poker-sites" style="width: 100%;display:block;overflow-x:auto;>
Just go to HTML mode and replace the table tag with the above.
Let me know if you need further help.

Cheers
Pankaj Kumar
ppstaking · Member · Jul 31, 2017 at 12:30 pm
Copy link
That didn’t help. I have got the table wrapping sorted now.

I just need to solve these other two issues:
– Reduce text size of only the table? Without reducing the font size of the rest of the page?
– Increase / fix the size of the links?? To stop them going tiny in phone mode.

Thanks!
ppstaking.com/rakeback/
samanthainnes · Member · Jul 31, 2017 at 7:39 pm
Copy link
Tables are tricky. If applying font style to cells or rows doesn’t work, try putting cell content inside a <p> and then styling like that. You’ll have to specify the <p> class inside every cell.

I notice you’re using an ID for your table called “Poker-sites” so try:

#Poker-sites p {
font-size: 8px;
}
ppstaking · Member · Jul 31, 2017 at 8:58 pm
Copy link
```
#Poker-sites p {
font-size: 8px;
}
```
didn’t work :(
samanthainnes · Member · Jul 31, 2017 at 10:17 pm
Copy link
I don’t see any

tags inside the table cells. Each cell needs its content wrapped in a

tag. And then you can style the #Poker-sites p class in CSS.

I am signing off for the day but will check up on you tomorrow.
```
<table id="Poker-sites">
<tbody>
<tr> ....
<td><p>100% up to €100 excluding players from Romania, Hungary & Poland.</p></td>
</tr>
</tbody>
</table>
```
thesacredpath · Member · Aug 1, 2017 at 3:56 am
Copy link
Hi, to make the font size smaller in that table, add the following to your custom CSS and adjust the 1.3rem value as desired. It was originally 1.8rem.
```
#Poker-sites td {
  font-size: 1.3rem;
}
```
samanthainnes · Member · Aug 1, 2017 at 1:22 pm
Copy link
I hope that works, let us know!
ppstaking · Member · Aug 1, 2017 at 3:50 pm
Copy link
it worked. thanks
samanthainnes · Member · Aug 1, 2017 at 5:52 pm
Copy link
Good to hear! I wonder if using rem vs. px made the difference. The last time I tried styling font size in a table element I could just not get it work –
td, tr, tbody, etc – didn’t matter what element I styled. But that was using px.

No items found.