# \[SOLVED\] Html table border

**URL:** <https://forum.ionicframework.com/t/solved-html-table-border/107645>\
**Category:** ionic-v1\
**Created:** [October 4, 2017, 12:51pm UTC](https://forum.ionicframework.com/t/solved-html-table-border/107645 "2017-10-04T12:51:45Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![danzac](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/danzac/32/113850_2.png) [@danzac](https://forum.ionicframework.com/u/danzac)\
**Post date:** [October 4, 2017, 12:51pm UTC](https://forum.ionicframework.com/t/solved-html-table-border/107645/1 "2017-10-04T12:51:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mvdNL](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mvdnl/32/108998_2.png) [@mvdNL](https://forum.ionicframework.com/u/mvdNL)\
**Post date:** [October 4, 2017, 2:57pm UTC](https://forum.ionicframework.com/t/solved-html-table-border/107645/2 "2017-10-04T14:57:35Z")

</div>

Maybe a (browser) caching issue?

---

<div class="post-metadata">

**Author:** ![danzac](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/danzac/32/113850_2.png) [@danzac](https://forum.ionicframework.com/u/danzac)\
**Post date:** [October 4, 2017, 3:21pm UTC](https://forum.ionicframework.com/t/solved-html-table-border/107645/3 "2017-10-04T15:21:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mich356c](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mich356c/32/105794_2.png) [@mich356c](https://forum.ionicframework.com/u/mich356c)\
**Post date:** [October 4, 2017, 3:24pm UTC](https://forum.ionicframework.com/t/solved-html-table-border/107645/4 "2017-10-04T15:24:17Z")

</div>

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;`

---

<div class="post-metadata">

**Author:** ![wingly](https://avatars.discourse-cdn.com/v4/letter/w/43a26b/32.png) [@wingly](https://forum.ionicframework.com/u/wingly)\
**Post date:** [October 4, 2017, 3:28pm UTC](https://forum.ionicframework.com/t/solved-html-table-border/107645/5 "2017-10-04T15:28:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![danzac](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/danzac/32/113850_2.png) [@danzac](https://forum.ionicframework.com/u/danzac)\
**Post date:** [October 4, 2017, 3:54pm UTC](https://forum.ionicframework.com/t/solved-html-table-border/107645/6 "2017-10-04T15:54:12Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![danzac](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/danzac/32/113850_2.png) [@danzac](https://forum.ionicframework.com/u/danzac)\
**Post date:** [October 4, 2017, 4:43pm UTC](https://forum.ionicframework.com/t/solved-html-table-border/107645/7 "2017-10-04T16:43:03Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![wingly](https://avatars.discourse-cdn.com/v4/letter/w/43a26b/32.png) [@wingly](https://forum.ionicframework.com/u/wingly)\
**Post date:** [October 5, 2017, 7:34am UTC](https://forum.ionicframework.com/t/solved-html-table-border/107645/8 "2017-10-05T07:34:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![danzac](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/danzac/32/113850_2.png) [@danzac](https://forum.ionicframework.com/u/danzac)\
**Post date:** [October 6, 2017, 4:16pm UTC](https://forum.ionicframework.com/t/solved-html-table-border/107645/9 "2017-10-06T16:16:28Z")

</div>

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)

```auto
<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

---

<div class="post-metadata">

**Author:** ![danzac](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/danzac/32/113850_2.png) [@danzac](https://forum.ionicframework.com/u/danzac)\
**Post date:** [October 7, 2017, 2:28am UTC](https://forum.ionicframework.com/t/solved-html-table-border/107645/10 "2017-10-07T02:28:21Z")

</div>

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

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

```
