Блог

У меня есть таблица реакций. Я хочу оставить немного свободного места в конце таблицы, но когда я использую отступ или отступ справа, это не влияет на нее. вот его изображение.

но когда я перемещаю свой веб-сайт на больший экран, на столе справа остается место.

итак, как я могу добавить пространство, когда есть полоса прокрутки.

 export const TableContainer = styled.div`
padding-top: 25px;
justify-content: center;
font-size: 10px;
`
 

Я уже пробовал отступ справа и отступ справа

вот мой код таблицы.

 return (
   <s.TableContainer>
       <s.Table {...getTableProps()} rowHeight='5px'>
            <s.Thead isDarkMode={isDarkMode}>
                {headerGroups.map(headerGroup => (
                    <s.Tr {...headerGroup.getHeaderGroupProps()}>
                        {headerGroup.headers.map(column => (
                            <s.Th {...column.getHeaderProps(column.getSortByToggleProps)}>
                                {column.render("Header")}
                                <s.Span>
                                    {column.isSorted ? (
                                        column.isSortedDesc ? (
                                            <FaCaretSquareDown className="downIcon"/>
                                        ) : (
                                            <FaCaretSquareUp className="upIcon"/>
                                        )
                                    ) : ( "" )}
                                </s.Span>
                            </s.Th>
                        ))}
                    </s.Tr>
                ))}
            </s.Thead>
           <s.Tbody  {...getTableBodyProps()}>
               {rows.map(row => {
                   prepareRow(row);
                   return(
                       <s.TrBody colorPalette={isDarkMode === true ? preDark : dejaVu } {...row.getRowProps({style: {
                           Height: '50px',
                           backgroundColor: props.getSelectedRowId()===row.id ? tableColor.selectedRowColor :  row.values.Status === "VERIFICATION" ? tableColor.verificationColor :
                               row.values.Status === "ALNK" ?  tableColor.alnkColor :
                                   row.values.Status === "INBND" ? tableColor.inbdColor :
                                       row.values.Status === "REPAR" ? tableColor.reparColor : tableColor.othersColor
                       }})}  onDoubleClick={() => handleRowDoubleClick(row.id)} onClick={()=> {props.setSelectedRowId(row.id); console.log(props.getSelectedRowId())}}>

                           {row.cells.map(cell => {
                               return(
                                 <s.Td {...cell.getCellProps({
                                         style: {
                                             minWidth: cell.column.minWidth,
                                         }
                                 }
                                     )}> {cell.render("Cell")}</s.Td>
                               );
                           })}
                       </s.TrBody>
                   );
               })}
           </s.Tbody>
       </s.Table>
   </s.TableContainer>
);