adding padding to td`s
This commit is contained in:
parent
a315a9cff2
commit
569b3182dd
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -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 (
|
||||||
|
Loading…
Reference in New Issue
Block a user