Table border radius is not working

ionic-v1
1

I’m using Ionic for web development (I know that’s not a good a idea).

Table border radius is not working, It remains squared:

.table-bordered {
border-color: lightgray;
border-style: solid;
border-radius: 15px;
border-width: 1px;
padding: 10px;
}

2

Hi andreshg112,

If you want to give border to whole table then you need to give below mentioned property to your table tag directly like,

table {
    border-collapse: initial;
    border: 1px solid #CCCCCC;
    border-radius: 6px 6px 6px 6px;
}

Hope this will work for you.

3

It didn’t work.
padding neither radius are working.
I’ve tested in Google Chrome and Mozilla Firefox.

4

Let me send you full tested demo which is working in Google Chrome and Firefox both.

ionic.app.scss

.bordered {
    border: 1px solid #CCCCCC;
    border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
    box-shadow: 0 1px 1px #CCCCCC;
}
table {
    border-collapse: initial;
    border: 1px solid #CCCCCC;
    border-radius: 6px 6px 6px 6px;
}        
.bordered {
    th {
        background-color: #DCE9F9;
        background-image: -moz-linear-gradient(center top , #F8F8F8, #ECECEC);
        background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#F8F8F8), to(#ECECEC), color-stop(.4, #F8F8F8));
        border-top: medium none;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
        border-left: 1px solid #CCCCCC;
        border-top: 1px solid #CCCCCC;
        padding: 10px;
        text-align: left;
        &:first-child {
             -webkit-border-radius: 6px 0 0 0;
             -moz-border-radius: 6px 0 0 0;
             border-radius: 6px 0 0 0;
             border-left: medium none;
        }
        &:last-child {
            -webkit-border-radius: 0 6px 0 0;
            -moz-border-radius: 0 6px 0 0;
            border-radius: 0 6px 0 0;
        }
    }
}

.bordered {
    td {
        border-left: 1px solid #CCCCCC;
        border-top: 1px solid #CCCCCC;
        padding: 10px;
        text-align: left;
        &:first-child {
            border-left: medium none;
        }
    }
}

In template file

   <table class="bordered">
  <thead>
      <tr>
          <th><label>Header1</label></th>
          <th><label>Header2</label></th>
      </tr>
  </thead>
  
  <tbody>
      <tr>
          <td><label>Text1</label></td>
          <td><label>Text2</label></td>
      </tr>
  </tbody>                    
</table>

This will work only if you have setup the sass in your ionic application.

5

I got this when running ionic setup sass:
npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN angular-permission@4.0.3 requires a peer of angular-route@>=1.4.8 but none was installed.
npm WARN angular-permission@4.0.3 requires a peer of angular-ui-router@^0.2.11 || ^0.3.0 but none was installe
d.
npmnpm WARN material@1.1.1 No license field.
npm ERR! Linux 4.4.0-45-generic
npm ERR! argv “/usr/bin/nodejs” “/usr/bin/npm” “install”
npm ERR! node v4.2.6
npm ERR! npm v3.5.2
npm ERR! path /home/andreshg112/Projects/HTML5/ion-md-cli/node_modules/gulp-order
npm ERR! code ENOTEMPTY
npm ERR! errno -39
npm ERR! syscall rename

npm ERR! ENOTEMPTY: directory not empty, rename ‘/home/andreshg112/Projects/HTML5/ion-md-cli/node_modules/gulp
-order’ → ‘/home/andreshg112/Projects/HTML5/ion-md-cli/node_modules/.gulp-order.DELETE’
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request:
npm ERR! /home/andreshg112/Projects/HTML5/ion-md-cli/npm-debug.log

Caught exception:
TypeError: Cannot read property ‘bold’ of undefined
at ChildProcess. (/usr/local/lib/node_modules/ionic/node_modules/ionic-app-lib/lib/setup.js:180
:49)
at emitTwo (events.js:87:13)
at ChildProcess.emit (events.js:172:7)
at Process.ChildProcess._handle.onexit (internal/child_process.js:200:12)

Mind letting us know? Issues · ionic-team/ionic-cli · GitHub