Question

我正在React中创建一个表，希望标题行是粘性的。它可以按我的喜好工作，除了我在Chrome中遇到的奇怪问题。如果您查看图片，第1-4行上有一堆额外的水平线。每次向下滚动时，都会创建新的水平线，而旧的水平线会消失。我已经研究了这个问题，却找不到任何类似的问题。知道发生了什么吗？我的代码如下。

    String sparqlEndpointUri = "https://dbpedia.org/sparql";

和CSS

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>
     );

Answer 1

似乎是来自Bootstrap。我删除了表类，问题已解决。

编辑：我为自定义css删除了Bootstrap，并在给tr标签加底线时遇到了同样的问题。我给每个td标签加了底线，问题解决了。

位置：在Chrome的React问题中粘在桌面上

1 个答案: