adding padding to td`s

This commit is contained in:
Alex Windett 2017-01-20 14:37:19 +00:00
parent a315a9cff2
commit 569b3182dd
2 changed files with 9 additions and 10 deletions

View File

@ -13,19 +13,14 @@ const {
const StyledTableHeadItem = styled.td` const StyledTableHeadItem = styled.td`
${props => `width: ${props.width}`} ${props => `width: ${props.width}`}
padding-top: ${remcalc(24)};
padding-bottom: ${remcalc(24)};
border-bottom: none; border-bottom: none;
padding: ${remcalc(24)};
`; `;
const StyledTableHead = styled.thead` const StyledTableHead = styled.thead`
background: #fafafa; background: #fafafa;
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05); box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
`; border: solid ${remcalc(1)} #d8d8d8;
const StyledTableHeadRow = styled.tr`
border-left: solid ${remcalc(24)} transparent;
border-right: solid ${remcalc(24)} transparent;
`; `;
const TableHeader = ({ const TableHeader = ({
@ -48,9 +43,9 @@ const TableHeader = ({
return ( return (
<StyledTableHead> <StyledTableHead>
<StyledTableHeadRow> <tr>
{titles} {titles}
</StyledTableHeadRow> </tr>
</StyledTableHead> </StyledTableHead>
); );
}; };

View File

@ -15,6 +15,10 @@ const StyledRow = styled.tr`
border: solid ${remcalc(1)} #d8d8d8; border: solid ${remcalc(1)} #d8d8d8;
`; `;
const StyledTaleItem = styled.td`
padding: ${remcalc(24)};
`;
const Row = ({ const Row = ({
dataItem = {} dataItem = {}
}) => { }) => {
@ -23,7 +27,7 @@ const Row = ({
const rowItems = Object.keys(_dataItem).map( (item, i) => { const rowItems = Object.keys(_dataItem).map( (item, i) => {
const value = _dataItem[item]; const value = _dataItem[item];
return <td key={i}>{value}</td>; return <StyledTaleItem key={i}>{value}</StyledTaleItem>;
}); });
return ( return (