CSS четная ширина ячейки в таблице - PullRequest
Новая
       3

CSS четная ширина ячейки в таблице

0 голосов
/ 28 мая 2020

Я пытаюсь показать календарь, в котором дни имеют одинаковую ширину. Однако день с меньшим содержанием имеет меньшую ширину, чем дни с большим содержанием ..

Вот код для календаря 

 import _ from 'lodash'
 import React from 'react'
 import moment from 'moment'

 import {View, Text} from 'react-native'
 // import App2 from './App2'

 const weeks = [...Array(4).keys()]
 const days = [...Array(7).keys()]

 const App = (props) => {
   return (
     <View>
       {/* <App2 /> */}
       <View className="DayPicker-Months">
         <View className="DayPicker-Month">
           <View className="DayPicker-Body">
             {weeks.map((week) => {
               return (
                 <View className="DayPicker-Week">
                   {days.map((day) => {
                     const items = [...Array(day).keys()]
                     return (
                       <View className="DayPicker-Day">
                         <Text>{week}</Text>
                         <Text>{day}</Text>

                         {_.chunk(
                           items.map((item) => {
                             return (
                               <Text>
                                 {moment(item, 'HH').format('HH') + ':00'}
                               </Text>
                             )
                           }),
                           2,
                         ).map((node) => {
                           return (
                             <View style={{flexDirection: 'row'}}>{node}</View>
                           )
                         })}
                       </View>
                     )
                   })}
                 </View>
               )
             })}
           </View>
         </View>
       </View>
     </View>
   )
 }

 export default App

Вот стили. 

 .DayPicker-Months {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
 }

 .DayPicker-Month {
     display: table;
     width: 100%;
   margin: 0 1em;
   margin-top: 1em;
   border-spacing: 0;
   border-collapse: collapse;

   -webkit-user-select: none;
      -moz-user-select: none;    
       -ms-user-select: none;    
           user-select: none;
 }


 .DayPicker-Weekday {
   display: table-cell;
   padding: 0.5em;
   color: #8B9898;
   text-align: center;
   font-size: 0.875em;
 }

 .DayPicker-Body {
     display: table-row-group;
 }

 .DayPicker-Week {
     display: table-row;
 }

 .DayPicker-Day {
   display: table-cell;
   padding: 0.5em;
   border-radius: 50%;
   vertical-align: middle;
   text-align: center;
   cursor: pointer;

 }
...