Improvement - adapted stylesheet for c-table

[helloimela]

Describe pull-request

• Implement shadow Dom for c-table component
• Under shadowDom, dropdown will not inherit bootstrap js and style from global, so it needs to be made as its own component

Solving issue
Fixes: #551

How to test

Test together with scania/scania-theme#146

Use component:

<c-table></c-table>

<script>

const arr = [
      {
        "id":1,
        "name" : "Harru",
        "lastname": "Haru",
        "email": "[email protected]"
      },
      {
        "id":2,
        "name" : "Johan",
        "lastname": "Johansson",
        "email": "[email protected]"
      },
      {
        "id":3,
        "name" : "Mika",
        "lastname": "Fedora",
        "email": "[email protected]"
      },
        
    ]
    
    const el = document.querySelector('c-table');

    el.header = [
      {
        key: "name",
        description: "First Name",
      },
      {
        key: "lastname",
        description: "Last Name",
      },
      {
        key: "email",
        description: "Email",
      }
    ]
    el.content = arr;

    el.hasEdit = true;
    el.hasDelete = true;
    el.addEventListener('optEdit', testEdit)
    el.addEventListener('optDelete', testDelete)

    function testEdit(msg) {
      alert(JSON.stringify(msg.detail));
    }

    function testDelete(msg) {
    // es6 format won't work in IE
       let newArr = [...el.content];
       newArr.forEach(function(item, index){
         if(item.id == msg.detail.id) {
           newArr.splice(index, 1)
         }
       })
       el.content = newArr;
    }
</script>

Screenshots
If applicable, add screenshots to help explain

Additional context
Add any other context about the pull-request here.

[mmexvr]

• If you click on the action span element inside the dropdown, it will not open the dropdown.
• Color of the delete is different in different browsers

[mmexvr]

Looks good!

#565 Reference, this PR is related with some fixes and improvements from that PR