Mixing
![how can i find the position of maximum value in this code [on hold]](https://lh3.googleusercontent.com/-XdUIqdMkCWA/AAAAAAAAAAI/AAAAAAAAAAA/4252rscbv5M/s72-c/photo.jpg?sz=32)
failed to apply border radius style into table
-1
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>css3
edited Nov 20 '18 at 15:01
rpm192
1,3491620
asked Nov 20 '18 at 14:50
federerfederer
247215
add a comment |
-1
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>css3
edited Nov 20 '18 at 15:01
rpm192
1,3491620
asked Nov 20 '18 at 14:50
federerfederer
247215
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 '18 at 16:08
add a comment |
-1
-1
-1
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>css3
edited Nov 20 '18 at 15:01
rpm192
1,3491620
asked Nov 20 '18 at 14:50
federerfederer
247215
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
css3
edited Nov 20 '18 at 15:01
rpm192
1,3491620
asked Nov 20 '18 at 14:50
federerfederer
247215
edited Nov 20 '18 at 15:01
rpm192
1,3491620
asked Nov 20 '18 at 14:50
federerfederer
247215
edited Nov 20 '18 at 15:01
rpm192
1,3491620
edited Nov 20 '18 at 15:01
rpm192
1,3491620
edited Nov 20 '18 at 15:01
rpm192
1,3491620
1,3491620
asked Nov 20 '18 at 14:50
federerfederer
247215
asked Nov 20 '18 at 14:50
federerfederer
247215
asked Nov 20 '18 at 14:50
federerfederer
247215
247215
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 '18 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 '18 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 '18 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 '18 at 16:08
add a comment |
2 Answers
2
active
oldest
votes
1
@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
answered Nov 20 '18 at 16:20
weibenfalkweibenfalk
53617
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 '18 at 16:25
when am I adding 'overflow:hidden' property the element that I added using after selector will be removed.
– federer
Nov 20 '18 at 16:30
Because you have it with right: -20px, it goes out of the box!
– Paco Gómez Capón
Nov 20 '18 at 16:32
add a comment |
0
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;
}
answered Nov 20 '18 at 16:10
Paco Gómez CapónPaco Gómez Capón
332213
it doesn't work after adding border to the table???
– federer
Nov 20 '18 at 16:28
I have tested it on codepen and it works like charm! :)
– Paco Gómez Capón
Nov 20 '18 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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
@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
answered Nov 20 '18 at 16:20
weibenfalkweibenfalk
53617
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 '18 at 16:25
when am I adding 'overflow:hidden' property the element that I added using after selector will be removed.
– federer
Nov 20 '18 at 16:30
Because you have it with right: -20px, it goes out of the box!
– Paco Gómez Capón
Nov 20 '18 at 16:32
add a comment |
1
@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
answered Nov 20 '18 at 16:20
weibenfalkweibenfalk
53617
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 '18 at 16:25
when am I adding 'overflow:hidden' property the element that I added using after selector will be removed.
– federer
Nov 20 '18 at 16:30
Because you have it with right: -20px, it goes out of the box!
– Paco Gómez Capón
Nov 20 '18 at 16:32
add a comment |
1
1
1
@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
answered Nov 20 '18 at 16:20
weibenfalkweibenfalk
53617
@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
answered Nov 20 '18 at 16:20
weibenfalkweibenfalk
53617
answered Nov 20 '18 at 16:20
weibenfalkweibenfalk
53617
answered Nov 20 '18 at 16:20
weibenfalkweibenfalk
53617
answered Nov 20 '18 at 16:20
weibenfalkweibenfalk
53617
53617
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 '18 at 16:25
when am I adding 'overflow:hidden' property the element that I added using after selector will be removed.
– federer
Nov 20 '18 at 16:30
Because you have it with right: -20px, it goes out of the box!
– Paco Gómez Capón
Nov 20 '18 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 '18 at 16:25
when am I adding 'overflow:hidden' property the element that I added using after selector will be removed.
– federer
Nov 20 '18 at 16:30
Because you have it with right: -20px, it goes out of the box!
– Paco Gómez Capón
Nov 20 '18 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 '18 at 16:25
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 '18 at 16:25
when am I adding 'overflow:hidden' property the element that I added using after selector will be removed.
– federer
Nov 20 '18 at 16:30
when am I adding 'overflow:hidden' property the element that I added using after selector will be removed.
– federer
Nov 20 '18 at 16:30
Because you have it with right: -20px, it goes out of the box!
– Paco Gómez Capón
Nov 20 '18 at 16:32
Because you have it with right: -20px, it goes out of the box!
– Paco Gómez Capón
Nov 20 '18 at 16:32
add a comment |
0
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;
}
answered Nov 20 '18 at 16:10
Paco Gómez CapónPaco Gómez Capón
332213
it doesn't work after adding border to the table???
– federer
Nov 20 '18 at 16:28
I have tested it on codepen and it works like charm! :)
– Paco Gómez Capón
Nov 20 '18 at 16:31
add a comment |
0
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;
}
answered Nov 20 '18 at 16:10
Paco Gómez CapónPaco Gómez Capón
332213
it doesn't work after adding border to the table???
– federer
Nov 20 '18 at 16:28
I have tested it on codepen and it works like charm! :)
– Paco Gómez Capón
Nov 20 '18 at 16:31
add a comment |
0
0
0
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;
}
answered Nov 20 '18 at 16:10
Paco Gómez CapónPaco Gómez Capón
332213
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;
}
answered Nov 20 '18 at 16:10
Paco Gómez CapónPaco Gómez Capón
332213
edited Nov 20 '18 at 16:26
answered Nov 20 '18 at 16:10
Paco Gómez CapónPaco Gómez Capón
332213
answered Nov 20 '18 at 16:10
Paco Gómez CapónPaco Gómez Capón
332213
answered Nov 20 '18 at 16:10
Paco Gómez CapónPaco Gómez Capón
332213
332213
it doesn't work after adding border to the table???
– federer
Nov 20 '18 at 16:28
I have tested it on codepen and it works like charm! :)
– Paco Gómez Capón
Nov 20 '18 at 16:31
add a comment |
it doesn't work after adding border to the table???
– federer
Nov 20 '18 at 16:28
I have tested it on codepen and it works like charm! :)
– Paco Gómez Capón
Nov 20 '18 at 16:31
it doesn't work after adding border to the table???
– federer
Nov 20 '18 at 16:28
it doesn't work after adding border to the table???
– federer
Nov 20 '18 at 16:28
I have tested it on codepen and it works like charm! :)
– Paco Gómez Capón
Nov 20 '18 at 16:31
I have tested it on codepen and it works like charm! :)
– Paco Gómez Capón
Nov 20 '18 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.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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 '18 at 16:08