Position: sticky on table head in React issue in Chrome
I'm creating a table in react and would like the header row to be sticky. It works as I like, except for this weird issue I'm experience in Chrome. If you look at the picture, rows 1-4 have a bunch of extra horizontal lines across them. Every time I scroll down, new horizontal lines are made and the old ones disappear. I've researched the issue and haven't been able to find any similar issues. Any idea what's going on? My code is below.
const ReusableTable = props => (
<table className={"table sticky-table"}>
<thead className={styles.stickyHead}>
<tr>
<th> Item </th>
{
props.fields[0].map(row => <th key={row.key}> {row.title}
</th>)
}
</tr>
</thead>
<tbody>
{
props.fields.map((row, index) => {
return (
<tr key={index}>
<td> {index + 1} </td>
{row.map((attributes, indx) => {
if (!attributes.clickable) {
return <td key={indx}> {attributes.value} </td>
}
else {
return <td key={indx} onClick={props.clickableTD} style=
{props.styling}> {attributes.value} </td>
}
})}
</tr>
)
})
}
</tbody>
</table>
);
and the css
.stickyHead {
background-color: #000000;
color: #ffffff;
border: none;
outline: 0;
}
.stickyHead th {
position: sticky;
position: -webkit-sticky;
top: 0;
background-color: #000000;
color: #ffffff;
}
td {
text-decoration: none;
background-color: #ffffff;
color: #000000;
}
html css reactjs sticky
edited Nov 21 at 15:49
D Manokhin
588219
asked Nov 20 at 23:04
Cameron Tharp
100119
add a comment |
I'm creating a table in react and would like the header row to be sticky. It works as I like, except for this weird issue I'm experience in Chrome. If you look at the picture, rows 1-4 have a bunch of extra horizontal lines across them. Every time I scroll down, new horizontal lines are made and the old ones disappear. I've researched the issue and haven't been able to find any similar issues. Any idea what's going on? My code is below.
const ReusableTable = props => (
<table className={"table sticky-table"}>
<thead className={styles.stickyHead}>
<tr>
<th> Item </th>
{
props.fields[0].map(row => <th key={row.key}> {row.title}
</th>)
}
</tr>
</thead>
<tbody>
{
props.fields.map((row, index) => {
return (
<tr key={index}>
<td> {index + 1} </td>
{row.map((attributes, indx) => {
if (!attributes.clickable) {
return <td key={indx}> {attributes.value} </td>
}
else {
return <td key={indx} onClick={props.clickableTD} style=
{props.styling}> {attributes.value} </td>
}
})}
</tr>
)
})
}
</tbody>
</table>
);
and the css
.stickyHead {
background-color: #000000;
color: #ffffff;
border: none;
outline: 0;
}
.stickyHead th {
position: sticky;
position: -webkit-sticky;
top: 0;
background-color: #000000;
color: #ffffff;
}
td {
text-decoration: none;
background-color: #ffffff;
color: #000000;
}
html css reactjs sticky
edited Nov 21 at 15:49
D Manokhin
588219
asked Nov 20 at 23:04
Cameron Tharp
100119
that's strange. Is there any styling that can be seen via the chrome inspector? What happens if you comment out the styles? Is it possible to narrow down which one of them might be causing the issue?
– Ariel Salem
Nov 20 at 23:14
what's the body look like?
– Ariel Salem
Nov 20 at 23:36
Thanks for the advice. I narrowed it down to the table class. Still don't know why bootstrap caused the issue, but I'll just give it custom css.
– Cameron Tharp
Nov 21 at 15:48
add a comment |
I'm creating a table in react and would like the header row to be sticky. It works as I like, except for this weird issue I'm experience in Chrome. If you look at the picture, rows 1-4 have a bunch of extra horizontal lines across them. Every time I scroll down, new horizontal lines are made and the old ones disappear. I've researched the issue and haven't been able to find any similar issues. Any idea what's going on? My code is below.
const ReusableTable = props => (
<table className={"table sticky-table"}>
<thead className={styles.stickyHead}>
<tr>
<th> Item </th>
{
props.fields[0].map(row => <th key={row.key}> {row.title}
</th>)
}
</tr>
</thead>
<tbody>
{
props.fields.map((row, index) => {
return (
<tr key={index}>
<td> {index + 1} </td>
{row.map((attributes, indx) => {
if (!attributes.clickable) {
return <td key={indx}> {attributes.value} </td>
}
else {
return <td key={indx} onClick={props.clickableTD} style=
{props.styling}> {attributes.value} </td>
}
})}
</tr>
)
})
}
</tbody>
</table>
);
and the css
.stickyHead {
background-color: #000000;
color: #ffffff;
border: none;
outline: 0;
}
.stickyHead th {
position: sticky;
position: -webkit-sticky;
top: 0;
background-color: #000000;
color: #ffffff;
}
td {
text-decoration: none;
background-color: #ffffff;
color: #000000;
}
html css reactjs sticky
edited Nov 21 at 15:49
D Manokhin
588219
asked Nov 20 at 23:04
Cameron Tharp
100119
I'm creating a table in react and would like the header row to be sticky. It works as I like, except for this weird issue I'm experience in Chrome. If you look at the picture, rows 1-4 have a bunch of extra horizontal lines across them. Every time I scroll down, new horizontal lines are made and the old ones disappear. I've researched the issue and haven't been able to find any similar issues. Any idea what's going on? My code is below.
const ReusableTable = props => (
<table className={"table sticky-table"}>
<thead className={styles.stickyHead}>
<tr>
<th> Item </th>
{
props.fields[0].map(row => <th key={row.key}> {row.title}
</th>)
}
</tr>
</thead>
<tbody>
{
props.fields.map((row, index) => {
return (
<tr key={index}>
<td> {index + 1} </td>
{row.map((attributes, indx) => {
if (!attributes.clickable) {
return <td key={indx}> {attributes.value} </td>
}
else {
return <td key={indx} onClick={props.clickableTD} style=
{props.styling}> {attributes.value} </td>
}
})}
</tr>
)
})
}
</tbody>
</table>
);
and the css
.stickyHead {
background-color: #000000;
color: #ffffff;
border: none;
outline: 0;
}
.stickyHead th {
position: sticky;
position: -webkit-sticky;
top: 0;
background-color: #000000;
color: #ffffff;
}
td {
text-decoration: none;
background-color: #ffffff;
color: #000000;
}
html css reactjs sticky
html css reactjs sticky
edited Nov 21 at 15:49
D Manokhin
588219
asked Nov 20 at 23:04
Cameron Tharp
100119
edited Nov 21 at 15:49
D Manokhin
588219
asked Nov 20 at 23:04
Cameron Tharp
100119
edited Nov 21 at 15:49
D Manokhin
588219
edited Nov 21 at 15:49
D Manokhin
588219
edited Nov 21 at 15:49
D Manokhin
588219
588219
asked Nov 20 at 23:04
Cameron Tharp
100119
asked Nov 20 at 23:04
Cameron Tharp
100119
asked Nov 20 at 23:04
Cameron Tharp
100119
100119
that's strange. Is there any styling that can be seen via the chrome inspector? What happens if you comment out the styles? Is it possible to narrow down which one of them might be causing the issue?
– Ariel Salem
Nov 20 at 23:14
what's the body look like?
– Ariel Salem
Nov 20 at 23:36
Thanks for the advice. I narrowed it down to the table class. Still don't know why bootstrap caused the issue, but I'll just give it custom css.
– Cameron Tharp
Nov 21 at 15:48
add a comment |
that's strange. Is there any styling that can be seen via the chrome inspector? What happens if you comment out the styles? Is it possible to narrow down which one of them might be causing the issue?
– Ariel Salem
Nov 20 at 23:14
what's the body look like?
– Ariel Salem
Nov 20 at 23:36
Thanks for the advice. I narrowed it down to the table class. Still don't know why bootstrap caused the issue, but I'll just give it custom css.
– Cameron Tharp
Nov 21 at 15:48
that's strange. Is there any styling that can be seen via the chrome inspector? What happens if you comment out the styles? Is it possible to narrow down which one of them might be causing the issue?
– Ariel Salem
Nov 20 at 23:14
that's strange. Is there any styling that can be seen via the chrome inspector? What happens if you comment out the styles? Is it possible to narrow down which one of them might be causing the issue?
– Ariel Salem
Nov 20 at 23:14
what's the body look like?
– Ariel Salem
Nov 20 at 23:36
what's the body look like?
– Ariel Salem
Nov 20 at 23:36
Thanks for the advice. I narrowed it down to the table class. Still don't know why bootstrap caused the issue, but I'll just give it custom css.
– Cameron Tharp
Nov 21 at 15:48
Thanks for the advice. I narrowed it down to the table class. Still don't know why bootstrap caused the issue, but I'll just give it custom css.
– Cameron Tharp
Nov 21 at 15:48
add a comment |
1 Answer
1
active
oldest
votes
Seems it was from Bootstrap. I removed the table class and the problem has been fixed.
Edit: I gutted the Bootstrap for custom css and got the same issue when I gave the tr tags a border-bottom. I gave each td tag the border-bottom instead and problem solved.
answered Nov 21 at 15:48
Cameron Tharp
100119
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
});
}
});
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%2f53402936%2fposition-sticky-on-table-head-in-react-issue-in-chrome%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Seems it was from Bootstrap. I removed the table class and the problem has been fixed.
Edit: I gutted the Bootstrap for custom css and got the same issue when I gave the tr tags a border-bottom. I gave each td tag the border-bottom instead and problem solved.
answered Nov 21 at 15:48
Cameron Tharp
100119
add a comment |
Seems it was from Bootstrap. I removed the table class and the problem has been fixed.
Edit: I gutted the Bootstrap for custom css and got the same issue when I gave the tr tags a border-bottom. I gave each td tag the border-bottom instead and problem solved.
answered Nov 21 at 15:48
Cameron Tharp
100119
add a comment |
Seems it was from Bootstrap. I removed the table class and the problem has been fixed.
Edit: I gutted the Bootstrap for custom css and got the same issue when I gave the tr tags a border-bottom. I gave each td tag the border-bottom instead and problem solved.
answered Nov 21 at 15:48
Cameron Tharp
100119
Seems it was from Bootstrap. I removed the table class and the problem has been fixed.
Edit: I gutted the Bootstrap for custom css and got the same issue when I gave the tr tags a border-bottom. I gave each td tag the border-bottom instead and problem solved.
answered Nov 21 at 15:48
Cameron Tharp
100119
edited Nov 21 at 16:26
answered Nov 21 at 15:48
Cameron Tharp
100119
answered Nov 21 at 15:48
Cameron Tharp
100119
answered Nov 21 at 15:48
Cameron Tharp
100119
100119
add a comment |
add a comment |
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.
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%2f53402936%2fposition-sticky-on-table-head-in-react-issue-in-chrome%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
that's strange. Is there any styling that can be seen via the chrome inspector? What happens if you comment out the styles? Is it possible to narrow down which one of them might be causing the issue?
– Ariel Salem
Nov 20 at 23:14
what's the body look like?
– Ariel Salem
Nov 20 at 23:36
Thanks for the advice. I narrowed it down to the table class. Still don't know why bootstrap caused the issue, but I'll just give it custom css.
– Cameron Tharp
Nov 21 at 15:48