failed to apply border radius style into table

up vote
-1
down vote

favorite

I'm trying to create a table that has a scrollbar in my angular app.

In the code below I'm adding a div with the help of the after selector to add a space between the scrollbar and table container.

Because the table parent element doesn't take the 'padding-right' style when the table content get overflowed.

But my issue is: When I apply border-radius style into the table it doesn't apply it. Can anyone help me to solve this issue?

.tableContainer {

    padding: 20px;

    background: #e7e7e7;

    width: 1340px;

    height: 200px;

    overflow: scroll;

    margin-left: 18px;

}



.tableContainer>table  {

    border-radius:20px;

    position: relative;

    width: 100%;

}

.tableContainer>table th {

    padding: 10px;

    color: #fff;

    text-align: center;

}

.tableContainer>table td {

    border: 3px solid #e1e1e1;

    padding: 10px;

    text-align: center;

}

.tableContainer table::after  {

    content: '';

    position: absolute;

    width: 20px;

    height: 100%;

    right: -20px;

    top:0px;

}

<div class="tableContainer">

    <table>

        <!--<thead class="bg-dark">

            <tr>

                <th></th>

                <th *ngFor="let thead of tableHeader">{{thead}}</th>

            </tr>

        </thead>-->

        <tbody>

            <tr class="bg-dark">

                <th></th>

                <th *ngFor="let thead of tableHeader">{{thead}}</th>

            </tr>

            <tr *ngFor="let key of tableColumnKeys;let i=index;" [class.firstRow]="i == 0">

                <td>{{key}}</td>

                <td *ngFor="let data of tableColumn[key]">

                    {{data}}

                </td>

            </tr>

        </tbody>

    </table>

</div>

edited Nov 20 at 15:01

rpm192

1,1311417

asked Nov 20 at 14:50

federer

237114

I think that the table is with border-radius but you don't have a border to the table so you can't see the effect
– Paco Gómez Capón
Nov 20 at 16:08

add a comment |

up vote
-1
down vote

favorite

I'm trying to create a table that has a scrollbar in my angular app.

In the code below I'm adding a div with the help of the after selector to add a space between the scrollbar and table container.

Because the table parent element doesn't take the 'padding-right' style when the table content get overflowed.

But my issue is: When I apply border-radius style into the table it doesn't apply it. Can anyone help me to solve this issue?

.tableContainer {

    padding: 20px;

    background: #e7e7e7;

    width: 1340px;

    height: 200px;

    overflow: scroll;

    margin-left: 18px;

}



.tableContainer>table  {

    border-radius:20px;

    position: relative;

    width: 100%;

}

.tableContainer>table th {

    padding: 10px;

    color: #fff;

    text-align: center;

}

.tableContainer>table td {

    border: 3px solid #e1e1e1;

    padding: 10px;

    text-align: center;

}

.tableContainer table::after  {

    content: '';

    position: absolute;

    width: 20px;

    height: 100%;

    right: -20px;

    top:0px;

}

<div class="tableContainer">

    <table>

        <!--<thead class="bg-dark">

            <tr>

                <th></th>

                <th *ngFor="let thead of tableHeader">{{thead}}</th>

            </tr>

        </thead>-->

        <tbody>

            <tr class="bg-dark">

                <th></th>

                <th *ngFor="let thead of tableHeader">{{thead}}</th>

            </tr>

            <tr *ngFor="let key of tableColumnKeys;let i=index;" [class.firstRow]="i == 0">

                <td>{{key}}</td>

                <td *ngFor="let data of tableColumn[key]">

                    {{data}}

                </td>

            </tr>

        </tbody>

    </table>

</div>

edited Nov 20 at 15:01

rpm192

1,1311417

asked Nov 20 at 14:50

federer

237114

I think that the table is with border-radius but you don't have a border to the table so you can't see the effect
– Paco Gómez Capón
Nov 20 at 16:08

add a comment |

up vote
-1
down vote

favorite

I'm trying to create a table that has a scrollbar in my angular app.

In the code below I'm adding a div with the help of the after selector to add a space between the scrollbar and table container.

Because the table parent element doesn't take the 'padding-right' style when the table content get overflowed.

But my issue is: When I apply border-radius style into the table it doesn't apply it. Can anyone help me to solve this issue?

.tableContainer {

    padding: 20px;

    background: #e7e7e7;

    width: 1340px;

    height: 200px;

    overflow: scroll;

    margin-left: 18px;

}



.tableContainer>table  {

    border-radius:20px;

    position: relative;

    width: 100%;

}

.tableContainer>table th {

    padding: 10px;

    color: #fff;

    text-align: center;

}

.tableContainer>table td {

    border: 3px solid #e1e1e1;

    padding: 10px;

    text-align: center;

}

.tableContainer table::after  {

    content: '';

    position: absolute;

    width: 20px;

    height: 100%;

    right: -20px;

    top:0px;

}

<div class="tableContainer">

    <table>

        <!--<thead class="bg-dark">

            <tr>

                <th></th>

                <th *ngFor="let thead of tableHeader">{{thead}}</th>

            </tr>

        </thead>-->

        <tbody>

            <tr class="bg-dark">

                <th></th>

                <th *ngFor="let thead of tableHeader">{{thead}}</th>

            </tr>

            <tr *ngFor="let key of tableColumnKeys;let i=index;" [class.firstRow]="i == 0">

                <td>{{key}}</td>

                <td *ngFor="let data of tableColumn[key]">

                    {{data}}

                </td>

            </tr>

        </tbody>

    </table>

</div>

edited Nov 20 at 15:01

rpm192

1,1311417

asked Nov 20 at 14:50

federer

237114

I'm trying to create a table that has a scrollbar in my angular app.

In the code below I'm adding a div with the help of the after selector to add a space between the scrollbar and table container.

Because the table parent element doesn't take the 'padding-right' style when the table content get overflowed.

But my issue is: When I apply border-radius style into the table it doesn't apply it. Can anyone help me to solve this issue?

.tableContainer {

    padding: 20px;

    background: #e7e7e7;

    width: 1340px;

    height: 200px;

    overflow: scroll;

    margin-left: 18px;

}



.tableContainer>table  {

    border-radius:20px;

    position: relative;

    width: 100%;

}

.tableContainer>table th {

    padding: 10px;

    color: #fff;

    text-align: center;

}

.tableContainer>table td {

    border: 3px solid #e1e1e1;

    padding: 10px;

    text-align: center;

}

.tableContainer table::after  {

    content: '';

    position: absolute;

    width: 20px;

    height: 100%;

    right: -20px;

    top:0px;

}

<div class="tableContainer">

    <table>

        <!--<thead class="bg-dark">

            <tr>

                <th></th>

                <th *ngFor="let thead of tableHeader">{{thead}}</th>

            </tr>

        </thead>-->

        <tbody>

            <tr class="bg-dark">

                <th></th>

                <th *ngFor="let thead of tableHeader">{{thead}}</th>

            </tr>

            <tr *ngFor="let key of tableColumnKeys;let i=index;" [class.firstRow]="i == 0">

                <td>{{key}}</td>

                <td *ngFor="let data of tableColumn[key]">

                    {{data}}

                </td>

            </tr>

        </tbody>

    </table>

</div>

.tableContainer {

    padding: 20px;

    background: #e7e7e7;

    width: 1340px;

    height: 200px;

    overflow: scroll;

    margin-left: 18px;

}



.tableContainer>table  {

    border-radius:20px;

    position: relative;

    width: 100%;

}

.tableContainer>table th {

    padding: 10px;

    color: #fff;

    text-align: center;

}

.tableContainer>table td {

    border: 3px solid #e1e1e1;

    padding: 10px;

    text-align: center;

}

.tableContainer table::after  {

    content: '';

    position: absolute;

    width: 20px;

    height: 100%;

    right: -20px;

    top:0px;

}

<div class="tableContainer">

    <table>

        <!--<thead class="bg-dark">

            <tr>

                <th></th>

                <th *ngFor="let thead of tableHeader">{{thead}}</th>

            </tr>

        </thead>-->

        <tbody>

            <tr class="bg-dark">

                <th></th>

                <th *ngFor="let thead of tableHeader">{{thead}}</th>

            </tr>

            <tr *ngFor="let key of tableColumnKeys;let i=index;" [class.firstRow]="i == 0">

                <td>{{key}}</td>

                <td *ngFor="let data of tableColumn[key]">

                    {{data}}

                </td>

            </tr>

        </tbody>

    </table>

</div>

.tableContainer {

    padding: 20px;

    background: #e7e7e7;

    width: 1340px;

    height: 200px;

    overflow: scroll;

    margin-left: 18px;

}



.tableContainer>table  {

    border-radius:20px;

    position: relative;

    width: 100%;

}

.tableContainer>table th {

    padding: 10px;

    color: #fff;

    text-align: center;

}

.tableContainer>table td {

    border: 3px solid #e1e1e1;

    padding: 10px;

    text-align: center;

}

.tableContainer table::after  {

    content: '';

    position: absolute;

    width: 20px;

    height: 100%;

    right: -20px;

    top:0px;

}

<div class="tableContainer">

    <table>

        <!--<thead class="bg-dark">

            <tr>

                <th></th>

                <th *ngFor="let thead of tableHeader">{{thead}}</th>

            </tr>

        </thead>-->

        <tbody>

            <tr class="bg-dark">

                <th></th>

                <th *ngFor="let thead of tableHeader">{{thead}}</th>

            </tr>

            <tr *ngFor="let key of tableColumnKeys;let i=index;" [class.firstRow]="i == 0">

                <td>{{key}}</td>

                <td *ngFor="let data of tableColumn[key]">

                    {{data}}

                </td>

            </tr>

        </tbody>

    </table>

</div>

css3

edited Nov 20 at 15:01

rpm192

1,1311417

asked Nov 20 at 14:50

federer

237114

edited Nov 20 at 15:01

rpm192

1,1311417

asked Nov 20 at 14:50

federer

237114

edited Nov 20 at 15:01

rpm192

1,1311417

edited Nov 20 at 15:01

rpm192

1,1311417

edited Nov 20 at 15:01

rpm192

1,1311417

asked Nov 20 at 14:50

federer

237114

asked Nov 20 at 14:50

federer

237114

asked Nov 20 at 14:50

federer

237114

I think that the table is with border-radius but you don't have a border to the table so you can't see the effect
– Paco Gómez Capón
Nov 20 at 16:08

add a comment |

I think that the table is with border-radius but you don't have a border to the table so you can't see the effect
– Paco Gómez Capón
Nov 20 at 16:08

I think that the table is with border-radius but you don't have a border to the table so you can't see the effect
– Paco Gómez Capón
Nov 20 at 16:08

add a comment |

2 Answers
2

active

oldest

votes

up vote
1
down vote

@Paco Gómez Capón - I would also set overflow: hidden on .tableContainer>table
Otherwise the content will go over the rounded border. See image

enter image description here

answered Nov 20 at 16:20

weibenfalk

51117

I agree! But the main problem is solved with my solution. In fact, I am going to edit it! Thanks!
– Paco Gómez Capón
Nov 20 at 16:25

when am I adding 'overflow:hidden' property the element that I added using after selector will be removed.
– federer
Nov 20 at 16:30

Because you have it with right: -20px, it goes out of the box!
– Paco Gómez Capón
Nov 20 at 16:32

add a comment |

up vote
0
down vote

The table has the border-radius well implemented, the problem is that you can't see it because you don't have a border setted for the table.
The code will be something like this:

.tableContainer {

    padding: 20px;

    background: #e7e7e7;

    width: 1340px;

    height: 200px;

    overflow: scroll;

    margin-left: 18px;

}



.tableContainer>table  {

    border-radius:20px;

    position: relative;

    width: 100%;

    overflow: hidden;

    border: 1px solid;

}

.tableContainer>table th {

    padding: 10px;

    color: #fff;

    text-align: center;

}

.tableContainer>table td {

    border: 3px solid #e1e1e1;

    padding: 10px;

    text-align: center;

}

.tableContainer table::after  {

    content: '';

    position: absolute;

    width: 20px;

    height: 100%;

    right: -20px;

    top:0px;

}

edited Nov 20 at 16:26

answered Nov 20 at 16:10

Paco Gómez Capón

333113

it doesn't work after adding border to the table???
– federer
Nov 20 at 16:28

I have tested it on codepen and it works like charm! :)
– Paco Gómez Capón
Nov 20 at 16:31

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53395614%2ffailed-to-apply-border-radius-style-into-table%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

up vote
1
down vote

@Paco Gómez Capón - I would also set overflow: hidden on .tableContainer>table
Otherwise the content will go over the rounded border. See image

enter image description here

answered Nov 20 at 16:20

weibenfalk

51117

I agree! But the main problem is solved with my solution. In fact, I am going to edit it! Thanks!
– Paco Gómez Capón
Nov 20 at 16:25

when am I adding 'overflow:hidden' property the element that I added using after selector will be removed.
– federer
Nov 20 at 16:30

Because you have it with right: -20px, it goes out of the box!
– Paco Gómez Capón
Nov 20 at 16:32

add a comment |

up vote
1
down vote

@Paco Gómez Capón - I would also set overflow: hidden on .tableContainer>table
Otherwise the content will go over the rounded border. See image

enter image description here

answered Nov 20 at 16:20

weibenfalk

51117

I agree! But the main problem is solved with my solution. In fact, I am going to edit it! Thanks!
– Paco Gómez Capón
Nov 20 at 16:25

when am I adding 'overflow:hidden' property the element that I added using after selector will be removed.
– federer
Nov 20 at 16:30

Because you have it with right: -20px, it goes out of the box!
– Paco Gómez Capón
Nov 20 at 16:32

add a comment |

up vote
1
down vote

@Paco Gómez Capón - I would also set overflow: hidden on .tableContainer>table
Otherwise the content will go over the rounded border. See image

enter image description here

answered Nov 20 at 16:20

weibenfalk

51117

@Paco Gómez Capón - I would also set overflow: hidden on .tableContainer>table
Otherwise the content will go over the rounded border. See image

enter image description here

answered Nov 20 at 16:20

weibenfalk

51117

answered Nov 20 at 16:20

weibenfalk

51117

answered Nov 20 at 16:20

weibenfalk

51117

answered Nov 20 at 16:20

weibenfalk

51117

I agree! But the main problem is solved with my solution. In fact, I am going to edit it! Thanks!
– Paco Gómez Capón
Nov 20 at 16:25

when am I adding 'overflow:hidden' property the element that I added using after selector will be removed.
– federer
Nov 20 at 16:30

Because you have it with right: -20px, it goes out of the box!
– Paco Gómez Capón
Nov 20 at 16:32

add a comment |

I agree! But the main problem is solved with my solution. In fact, I am going to edit it! Thanks!
– Paco Gómez Capón
Nov 20 at 16:25

when am I adding 'overflow:hidden' property the element that I added using after selector will be removed.
– federer
Nov 20 at 16:30

Because you have it with right: -20px, it goes out of the box!
– Paco Gómez Capón
Nov 20 at 16:32

I agree! But the main problem is solved with my solution. In fact, I am going to edit it! Thanks!
– Paco Gómez Capón
Nov 20 at 16:25

when am I adding 'overflow:hidden' property the element that I added using after selector will be removed.
– federer
Nov 20 at 16:30

Because you have it with right: -20px, it goes out of the box!
– Paco Gómez Capón
Nov 20 at 16:32

add a comment |

up vote
0
down vote

The table has the border-radius well implemented, the problem is that you can't see it because you don't have a border setted for the table.
The code will be something like this:

.tableContainer {

    padding: 20px;

    background: #e7e7e7;

    width: 1340px;

    height: 200px;

    overflow: scroll;

    margin-left: 18px;

}



.tableContainer>table  {

    border-radius:20px;

    position: relative;

    width: 100%;

    overflow: hidden;

    border: 1px solid;

}

.tableContainer>table th {

    padding: 10px;

    color: #fff;

    text-align: center;

}

.tableContainer>table td {

    border: 3px solid #e1e1e1;

    padding: 10px;

    text-align: center;

}

.tableContainer table::after  {

    content: '';

    position: absolute;

    width: 20px;

    height: 100%;

    right: -20px;

    top:0px;

}

edited Nov 20 at 16:26

answered Nov 20 at 16:10

Paco Gómez Capón

333113

it doesn't work after adding border to the table???
– federer
Nov 20 at 16:28

I have tested it on codepen and it works like charm! :)
– Paco Gómez Capón
Nov 20 at 16:31

add a comment |

up vote
0
down vote

The table has the border-radius well implemented, the problem is that you can't see it because you don't have a border setted for the table.
The code will be something like this:

.tableContainer {

    padding: 20px;

    background: #e7e7e7;

    width: 1340px;

    height: 200px;

    overflow: scroll;

    margin-left: 18px;

}



.tableContainer>table  {

    border-radius:20px;

    position: relative;

    width: 100%;

    overflow: hidden;

    border: 1px solid;

}

.tableContainer>table th {

    padding: 10px;

    color: #fff;

    text-align: center;

}

.tableContainer>table td {

    border: 3px solid #e1e1e1;

    padding: 10px;

    text-align: center;

}

.tableContainer table::after  {

    content: '';

    position: absolute;

    width: 20px;

    height: 100%;

    right: -20px;

    top:0px;

}

edited Nov 20 at 16:26

answered Nov 20 at 16:10

Paco Gómez Capón

333113

it doesn't work after adding border to the table???
– federer
Nov 20 at 16:28

I have tested it on codepen and it works like charm! :)
– Paco Gómez Capón
Nov 20 at 16:31

add a comment |

up vote
0
down vote

The table has the border-radius well implemented, the problem is that you can't see it because you don't have a border setted for the table.
The code will be something like this:

.tableContainer {

    padding: 20px;

    background: #e7e7e7;

    width: 1340px;

    height: 200px;

    overflow: scroll;

    margin-left: 18px;

}



.tableContainer>table  {

    border-radius:20px;

    position: relative;

    width: 100%;

    overflow: hidden;

    border: 1px solid;

}

.tableContainer>table th {

    padding: 10px;

    color: #fff;

    text-align: center;

}

.tableContainer>table td {

    border: 3px solid #e1e1e1;

    padding: 10px;

    text-align: center;

}

.tableContainer table::after  {

    content: '';

    position: absolute;

    width: 20px;

    height: 100%;

    right: -20px;

    top:0px;

}

edited Nov 20 at 16:26

answered Nov 20 at 16:10

Paco Gómez Capón

333113

The table has the border-radius well implemented, the problem is that you can't see it because you don't have a border setted for the table.
The code will be something like this:

.tableContainer {

    padding: 20px;

    background: #e7e7e7;

    width: 1340px;

    height: 200px;

    overflow: scroll;

    margin-left: 18px;

}



.tableContainer>table  {

    border-radius:20px;

    position: relative;

    width: 100%;

    overflow: hidden;

    border: 1px solid;

}

.tableContainer>table th {

    padding: 10px;

    color: #fff;

    text-align: center;

}

.tableContainer>table td {

    border: 3px solid #e1e1e1;

    padding: 10px;

    text-align: center;

}

.tableContainer table::after  {

    content: '';

    position: absolute;

    width: 20px;

    height: 100%;

    right: -20px;

    top:0px;

}

edited Nov 20 at 16:26

answered Nov 20 at 16:10

Paco Gómez Capón

333113

edited Nov 20 at 16:26

answered Nov 20 at 16:10

Paco Gómez Capón

333113

answered Nov 20 at 16:10

Paco Gómez Capón

333113

answered Nov 20 at 16:10

Paco Gómez Capón

333113

it doesn't work after adding border to the table???
– federer
Nov 20 at 16:28

I have tested it on codepen and it works like charm! :)
– Paco Gómez Capón
Nov 20 at 16:31

add a comment |

it doesn't work after adding border to the table???
– federer
Nov 20 at 16:28

I have tested it on codepen and it works like charm! :)
– Paco Gómez Capón
Nov 20 at 16:31

it doesn't work after adding border to the table???
– federer
Nov 20 at 16:28

I have tested it on codepen and it works like charm! :)
– Paco Gómez Capón
Nov 20 at 16:31

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg