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

View File

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