CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
Shuib Abdillahi
Shuib Abdillahi

Reputation: 95

How to separate Spans in table using styled components - React

I've got this really annoying CSS issue. So im rendering these tags as spans like in the picture below but I cant get them to seperate top and bottom, theyre stuck togetehr and I dont know why. Im using styled components to .map them out and render them as individual spans

enter image description here

<TableBody >
          {props.filteredData(props.API_DATA,props.filters).map((row,index) => (
           <>
           <TableRow  key={row.name}>
            <TableCell style={{ textAlign:"left", width:'5%'}} align="center">{index + 1}</TableCell> 
              <TableCell style={{ textAlign:"left", width:'25%'}}   align="center">{row.bnd}</TableCell> 
              <TableCell style={{ textAlign:"left", width:'5%'}}  align="center">{row.cnt}</TableCell>
              <TableCell style={{ textAlign:"left", width:'20%'}}  align="center">{row.prt.map((e) => <span  key={e}><span style={{backgroundColor:"#FFD9B6", padding:"1px",display:"flex",width:"80px", border:"0.5px solid orange", borderRadius:"3px"}}>{e}</span></span>)}</TableCell>
              <TableCell style={{ textAlign:"left", width:'25%'}}  align="center"><a href={row.url}>{row.url}</a></TableCell>
            </TableRow>
            <Waypoint onEnter={()=>limitHandler(index + 10)}/>
          </>
          ))}
          
        </TableBody>

Upvotes: 1

Views: 180

Answers (2)

stann
stann

Reputation: 91

If I understand your problem well, you just have to add margins. Is that correct?

<TableBody >
          {props.filteredData(props.API_DATA,props.filters).map((row,index) => (
           <>
           <TableRow  key={row.name}>
            <TableCell style={{ textAlign:"left", width:'5%'}} align="center">{index + 1}</TableCell> 
              <TableCell style={{ textAlign:"left", width:'25%'}}   align="center">{row.bnd}</TableCell> 
              <TableCell style={{ textAlign:"left", width:'5%'}}  align="center">{row.cnt}</TableCell>
              <TableCell style={{ textAlign:"left", width:'20%'}}  align="center">{row.prt.map((e) => <span  key={e}><span style={{backgroundColor:"#FFD9B6", padding:"1px",display:"flex",width:"80px", border:"0.5px solid orange", borderRadius:"3px"; margin: "5px"}}>{e}</span></span>)}</TableCell>
              <TableCell style={{ textAlign:"left", width:'25%'}}  align="center"><a href={row.url}>{row.url}</a></TableCell>
            </TableRow>
            <Waypoint onEnter={()=>limitHandler(index + 10)}/>
          </>
          ))}
          
        </TableBody>

Tested on codepen inside of a table. Check out there - imgur.com

Upvotes: 1

rigojr
rigojr

Reputation: 361

you can add a margin-top and margin-bottom to the <span> tag.

Try this:

<span key={e} style={{...styleProperties, margin: "10px 0px"}}>{e}</span>

I advice you to avoid styling component in that way, try to use a .css module outside or .scss

Read this article

Upvotes: 2

Related Questions