[SOLVED] Html table border


#1

The top of my html code is

table style="border-color: #000000; width: 100%; margin-left: auto; margin-right: auto;" border="1" cellspacing="0" cellpadding="0"

But the black border is not appearing on my tables.


#2

Maybe a (browser) caching issue?


#3

I cleared the cache and tried a different browser - still no luck


#4

Any reason you’re not just doing it all in CSS? Maybe it’s missing the styling this way
Try this: border: 1px solid black;


#5

Why go this way and not make use of ionic components take a look at
https://ionicframework.com/docs/v1/components/#grid


#6

CSS and components go beyond my abilities. html is pretty much the limits of my coding knowledge. Perhaps I’ll need to hire someone for these pages.


#7

Okay, I’ve got a responsive grid figured out. The issue now is still size (another thread I opened). Some of my rows are too dense and stretch off of the page. I need to be able to swipe the table to reveal the rest of the table (the responsive grid option isn’t good in this case)


#8

Take a look at this https://ionicframework.com/docs/v1/api/directive/ionScroll/


#9

Thanks for the assistance. I’m hoping If you can indulge me, I believe my code is correct but it is not working as I want it to. The horizontal scrolling does not fully work.

  1. In the Creator app I am able to zoom but not enough to see the entire table.
  2. When scrolling over to the right-most position, the view bounces back to the left hand side
  3. I am not able to scroll further down the table, it bounces back to the top

Here is the top of my code (with one row - it is a massive table)

<ion-scroll zooming="true" direction="xy" style="width: 800px;">
<div style="width: 800px;  repeat">
<div class="row">
<div class="col"><strong>ἀγαθοποιέω</strong></div>
<div class="col">—</div>
<div class="col">ἠγαθοποίησα</div>
<div class="col">—</div>
<div class="col">—</div>
<div class="col">—</div>
</div>

Thanks for your help


#10

For those who find this, the issue was the width and height. The magic was going with percentage rather than pixels (as per the documentation) and playing with lower pixel count rather than higher

<ion-scroll zooming="true" direction="xy" style="width: 100%; height: 100%;">
<div style="width: 750px; height: 425px; repeat">