Material-ui: [तालिका] सेट तालिका स्तंभ चौड़ाई

+1

इस बारे में कुछ खास नहीं:

const colWidth {
    width: '2rem'
};

<TableRowColumn style={ colWidth }>
    ...
</TableRowColumn>

<TableRowColumn style={{ width: 100 }}>

TableHeaderColumn साथ बहुत अच्छा व्यवहार नहीं करता है

क्या सामग्री के आधार पर कोल की चौड़ाई को गतिशील रूप से असाइन करने का कोई तरीका है?

मेरे वेनिला HTML तालिका में, कॉलम की चौड़ाई स्वचालित रूप से सामग्री के आधार पर निर्धारित की जाती है। सामग्री-यूआई सभी स्तंभों पर समान चौड़ाई लागू करने के लिए लगता है। क्या वैनिला एचटीएमएल टेबल की तरह गतिशील होने के लिए स्तंभ की चौड़ाई निर्धारित करने का एक तरीका है?

@sanfilippopablo , <Table> table-layout: 'fixed' css प्रोप का उपयोग करता है, जिससे सभी कॉलम एक ही चौड़ाई वाले होते हैं, जो ओवरफ्लो को संभालने के लिए प्रत्येक टेबल सेल पर white-space: 'nowrap' के साथ संयुक्त होते हैं।

आप सुरक्षित रूप से तालिका में table-layout: 'auto' लिए स्विच नहीं कर सकते, तब तक इसकी सामग्री के साथ असीम रूप से बढ़ता है जब तक कि आप उपर्युक्त श्वेत-स्थान सीएसएस प्रोप को नहीं हटाते हैं। और अगर आप ऐसा करते हैं,
अब आप fixedHeader={true} प्रोप का उपयोग नहीं कर सकते क्योंकि हेडर फिर एक अलग तालिका में निहित हैं: रो।

कुछ प्रतिक्रिया की सराहना की जाएगी।

कॉलम की चौड़ाई निर्धारित करने के लिए मैं जो कर रहा हूं वह है

आप टेबल-लेआउट पर सुरक्षित रूप से स्विच नहीं कर सकते: टेबल के बाद से 'ऑटो' अपनी सामग्री के साथ असीम रूप से बढ़ता है

तालिका शीर्षलेख चौड़ाई को समायोजित करने के बारे में क्या है जब tableRowColumn चौड़ाई सामग्री के साथ बदलती है?
मैं इसे सेट करने के लिए प्रतीत नहीं कर सकता, इसलिए उन 2 को संरेखित किया गया है।

मुझे लगता है कि आप या तो fixedHeader={true} का उपयोग करते हैं और एक कस्टम चौड़ाई सेट नहीं कर सकते हैं या आपको अपने हेडर को अपने <TableBody> अंदर नहीं रखना है।

ठीक है, t काम करता है में हैडर डाल! अब मुझे यह पता लगाने की ज़रूरत है कि मल्टी-लाइन हेडर कॉलम कैसे करें। कोई सुझाव?

आप की तरह कुछ प्राप्त करने के लिए कोशिश कर रहे हैं इस ? (यदि नहीं, तो आप शायद इस वेबसाइट में सही उदाहरण पा सकते हैं)

मुझे लगता है कि आप colSpan TableHeaderColumn और TableRowColumn और rowSpan के साथ TableRow की विशेषताओं के साथ बहुत कुछ कर सकते हैं।

मुझे समझ नहीं आया - यह बंद क्यों है?

टेबलबॉडी को टेबलबॉडी में डालना मेरे लिए काम नहीं करता है।

@ tvtri96
हमने जो सुझाव दिया था, वह टेबलरोड के रूप में अभिनय कर रहा था।
लेकिन यह मुझे लगता है कि यह अब ठीक काम कर रहा है।

यह मेरे कोड में अब कैसा दिखता है:

<Table fixedHeader={true}>
          <TableHeader>
            <TableHeaderComponent schema={schema}/>
          </TableHeader>
          <TableBody displayRowCheckbox={false} showRowHover={true}>
            {this.props.data.map((item, index) => (
              <TableRowComponent key={index} schema={this.props.schema}
                item={item} onRemoveClick={this.handleRemoveItem}
                onEditClick={this.handleEditItem}
              />
            ))}
          </TableBody>
</Table>

और हेडर कॉलम को बॉडी कॉलम के साथ सही तरीके से संरेखित किया जाता है।

मुझे जवाब देने के लिए धन्यवाद। TableHeaderComponent के अंदर क्या है? मुझे लगता है कि यह एक सामान्य टेबलहेडर की तरह नहीं है?
`` `

समय-चिह्न

हाँ, इसकी सिर्फ कारणों के लिए लिपटे।

इस पर कोई भी समाचार? मैं कॉलम को सामग्री पर ऑटो-समायोजित कैसे कर सकता हूं?

यह मेरे लिए काम करता है, स्वतः-आकार:

      <Table style={{tableLayout: 'auto'}}>

@arjan

 <Table style={{tableLayout: 'auto'}}>

इससे हेडर पर कोई प्रभाव नहीं पड़ता है।

<Table fixedHeader={false} style={{ tableLayout: 'auto' }}> कार्य (सामग्री के आधार पर गतिशील आकार)।

मुझे width: "auto" जोड़ने की आवश्यकता थी, जिसके परिणामस्वरूप:

<Table fixedHeader={false} style={{ width: "auto", tableLayout: "auto" }}>

@nathanmark , कृपया फिर से खोलें।

Table पास अंतर्निर्मित संपत्ति होनी चाहिए ताकि वह सामग्री को स्वतः-आकार दे सके, और इसके लिए fixedHeader को अक्षम करने की आवश्यकता न हो। मैं आगे जाऊंगा और कहूंगा कि ऑटो-साइज़ टू कंटेंट डिफ़ॉल्ट व्यवहार होना चाहिए।

@devuxer क्षमा करें, लेकिन हम लगातार v0.x शाखा में सुविधाएँ नहीं जोड़ रहे हैं।

@mbrookes , हमें बताने के लिए धन्यवाद। क्या आप कह रहे हैं कि v1.x में तालिका इस मुद्दे को हल करती है?

@ देवेगौसर मैं ऐसा कर रहा था, यह जमीन से फिर से लिखा गया था।

https://material-ui-next.com/demos/tables/

मेरे पास तीन स्तंभों वाली एक तालिका थी, जहां पहले और तीसरे स्तंभ में हमेशा पाठ की एक छोटी मात्रा होती थी। मैं चाहता था कि दूसरा कॉलम अंतरिक्ष के थोक को ले जाए इसलिए पहले और तीसरे कॉलम को क्रमशः टेबल के बाएं और दाएं किनारों पर धकेल दिया जाएगा। इसने मेरे लिए काम किया ( style यहाँ className brevity के विरोध के रूप में):

<Table style={{ tableLayout: "auto" }} />
<TableRowColumn style={{ width: "10%" }}>{text}</TableRowColumn>
<TableRowColumn style={{ width: "80%" }}>{text}</TableRowColumn>
<TableRowColumn style={{ width: "10%" }}>{text</TableRowColumn>

मुझे एक बेहतर समाधान मिला ... इसलिए, हर कॉलम की चौड़ाई समान है।
मान लें कि मेरे पास तीन कॉलम्स हैं, और मैं चाहता हूं कि पहला समग्र चौड़ाई का आधा हिस्सा ले, और तीसरा पंक्ति का एक तिहाई होना चाहिए; बीच में एक सबसे छोटा हो:

  <TableRowColumn colSpan='3'>twice as big!</TableRowColumn>
  <TableRowColumn> I'm small</TableRowColumn>
  <TableRowColumn colSpan='2'>I'm in between</TableRowColumn>

असल में, मेरे पास 7 कॉलम हैं, लेकिन मेरे कोलस्पैन का योग 20 के बराबर है - अंतिम एक केवल विलोपन के लिए एक आइकन रखता है, अन्य में से अधिकांश कोलस्पैन 3 हैं - बड़ा टेक्स्ट फ़ील्ड कॉलस्पान 6 है, और एक चयन फ़ील्ड और एक डेटपिकर हैं कोल्स्पन 2 पर ...

एक जादू की तरह काम करता है!

यह v1.4.3 में जाने के लिए अच्छा है

const styles = { 
    narrowCell: {
        'width': '150px',
    }
};

<Table>
    <TableHead>
        <TableRow>
            <TableCell>Company Name</TableCell>
            <TableCell className={classes.narrowCell} numeric>Amount</TableCell>
        </TableRow>
    </TableHead>
    <TableBody>
    <TableRow>
        <TableCell> name 1 </TableCell>
        <TableCell className={classes.narrowCell}> $100 </TableCell>
    </TableRow>
    </TableBody>
</Table>

प्रतिशत चौड़ाई भी दे सकते हैं, बाकी कोशिकाएं समान रूप से फैलती हैं

यदि मैं एक TableHead पंक्ति में colspan={2} का उपयोग करना है तो मैं इस समाधान का उपयोग कैसे कर सकता हूं?

यदि मैं colspan={2} जोड़ूंगा तो सभी कॉलनों की चौड़ाई समान होगी। कुछ इस तरह:

const styles = { 
    narrowCell: {
        'width': '150px',
    },
    miniCell: {
        'width': '75px',
    },
};

<Table>
    <TableHead>
        <TableRow>
            <TableCell>Company Name</TableCell>
            <TableCell className={classes.narrowCell} numeric colspan={2}>Amounts</TableCell>
        </TableRow>
    </TableHead>
    <TableBody>
    <TableRow>
        <TableCell> name 1 </TableCell>
        <TableCell className={classes.miniCell}> $100 </TableCell>
        <TableCell className={classes.miniCell}> $100 </TableCell>
    </TableRow>
    </TableBody>
</Table>

@ बोफ़िश यदि आप

इस शैली को लागू करने से मुझे किसी तरह मदद मिली:
मैं अभी पंक्ति में अलग-अलग cels के लिए maxWidth बैठा हूं, लेकिन प्रत्येक कॉलम में इनलाइन शैलियों का उपयोग कर रहा हूं।

const styles = (theme) => ({
  tableCell: {
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    maxWidth: '40px',
  },
});

कोई भी समाधान कार्य के ऊपर पोस्ट नहीं किया गया है। यह हासिल करना इतना मुश्किल क्यों है?

  <Table fixedHeader={false} style={{tableLayout: "auto" }}>
        <colgroup>
            <col width="250px" />
            <col />
            <col width="40px" />
            <col width="40px" />
        </colgroup>
        <TableHead>
          <TableRow>

दूसरा कॉलम फ्लेक्स है

यकीन नहीं होता कि किसी को अभी भी इस के साथ एक मुद्दा है, लेकिन मैं withStyles का उपयोग कर समाप्त हो गया और यह यहाँ छद्म काम किया है:

import {withStyles} from '@material-ui/core/styles';  

const styles = theme => ({
    cell: {
        width:'20%'
    },
    cellLarge: {
        width:'60%'
    } 
});

<Table >
       <TableHead>
               <TableRow>
                        <TableCell className={this.props.classes.cell}>header 1</TableCell>
                         <TableCell className={this.props.classes.cell}>header 2</TableCell>
                         <TableCell className={this.props.classes.cellLarge}>header 3</TableCell>
                </TableRow>
          </TableHead>
                <TableBody>
                        <TableRow>
                            <TableCell>value 1</TableCell>
                            <TableCell>value 2</TableCell>
                            <TableCell>value 3</TableCell>
                        </TableRow>
               </TableBody>
   </Table>

export default withStyles(styles)({ComponentName})

कोई भी समाधान कार्य के ऊपर पोस्ट नहीं किया गया है। यह हासिल करना इतना मुश्किल क्यों है?

किसी तरह मैं पहचानता हूँ कि यह काम क्यों नहीं कर रहा है, क्योंकि हम केवल width केवल TableHead या TableBody ! इसे काम करने के लिए, हमें minWidth और maxWidth bot को TableCell TableHead और TableBody पर परिभाषित करना चाहिए, यहाँ उदाहरण है

<Table>
    <TableHead>
        <TableRow>
            <TableCell column='data1' style={{minWidth:100, maxWidth:100}}>{content}</TableCell>
            <TableCell column='data2' style={{minWidth:'200px', maxWidth:'200px'}}>{content}</TableCell>
        </TableRow>
    </TableHead>
    <TableBody>
            <TableRow>
            <TableCell column='data1' style={{minWidth:100, maxWidth:100}}>{content}</TableCell>
            <TableCell column='data2' style={{minWidth:200, maxWidth:200}}>{content}</TableCell>
            </TableRow>
    </TableBody>
</Table>

जैसा कि आप देख सकते हैं, हम पूर्णांक और स्ट्रिंग द्वारा शैली के लिए दोनों मान का उपयोग कर सकते हैं। लेकिन स्ट्रिंग के लिए, यह केवल तभी काम है जब आपने इसे px परिभाषित किया है, यदि आप प्रतिशत का उपयोग करते हैं, जैसे minWidth:'25%' , तो यह काम नहीं करने वाला है , मैं पहले से ही इसे

मैं दोनों minWidth और maxWidth उपयोग क्यों करूं? width ? क्योंकि मैं पहले से ही यह प्रयास करने पर आपको निश्चित चौड़ाई के साथ अपने स्तंभ बनाना चाहते हैं, तो आप का उपयोग करना चाहिए minWidth और maxWidth के बजाय width । मुझे पता नहीं क्यों, लेकिन width लगता है कि इस समस्या को हल करने के लिए काम नहीं कर रहा है।

नोट: _Both TableCell TableHead और TableBody जिसमें एक ही डेटा हो , एक ही स्टाइल होना चाहिए! _!

मुझे उम्मीद है कि यह कोड आप लोगों की मदद करेगा, चीयर्स

मैंने शाब्दिक रूप से चौड़ाई निर्धारित की है: 10%, न्यूनतम: 10% और अधिकतम: 10% हर एक टेबलसेल में टेबल हेडर के नीचे वाले शामिल हैं। मैंने तब <colgroup>..etc तत्व बनाए और आगे भी उन्हीं शैलियों को लागू किया। मैं टेबल तत्व को टेबल सेट भी करता हूं: ऑटो और चौड़ाई: ऑटो। मैं इस धागे में हर एक समाधान की कोशिश की और उन सभी को इस एक अंतिम आउटपुट में मिला दिया। इसके अलावा, मैंने क्रोम में "निरीक्षण तत्व" टूल का भी उपयोग किया और चौड़ाई का उपयोग करने के लिए मेज पर हर एक तत्व को हैक किया: 10% न्यूनतम-चौड़ाई: 10% और अधिकतम-चौड़ाई: 10%। यह रिएक्ट इंस्पेक्टर में भक्तों में भी परिलक्षित होता था। यह शाब्दिक रूप से मुझे दिखाता है कि सभी तत्व ive "चौड़ाई 10%" आदि के रूप में बदल गए हैं।

परिणाम: अभी भी कॉलम की चौड़ाई को समायोजित नहीं करता है

मुझे लगता है कि अब यह मान लेना सुरक्षित है कि वास्तव में एक असंभव है जो मौजूद है। और यह इस बहुत धागे में है

संपादित करें:

मैंने वास्तव में कुछ ऐसा किया जो इस धागे में मौजूद लोगों के सुझाव के खिलाफ था ... मैंने ऑटोलैट सेट किया: मेरी तालिका में तय किया गया और इसने काम करना शुरू कर दिया। दुनिया में क्या है यह काला जादू

साथ ही चौड़ाई सेट करने के लिए एक बुरा समय है। चुनिंदा चेकबॉक्स चौड़ाई सेट करना था: 0.01% इसके लिए एक उचित चौड़ाई पर रहने के लिए, और कुछ नहीं काम करता है

इस के पुराने संस्करण पर चिपके हुए और पाद लेख के साथ संघर्ष करने वालों के लिए, मेरे लिए जोड़ना काम करता है।

@nathanmark क्या आप कम से कम यह स्पष्ट कर सकते हैं कि आपने इसे क्यों बंद किया?
यह एक बहुत ही आवर्तक आवश्यक विशेषता होनी चाहिए।

@pbassut सही है। यह तालिका घटक के लिए एक बहुत ही बुनियादी विशेषता है ... क्या कोई अद्यतन है?
या स्पष्टीकरण क्यों लागू करने के लिए इतना समस्याग्रस्त है ...

इसके बजाय @devenovil maxWidth , आप उपयोग करना चाहते हैं % , आप उपयोग कर सकते हैं width की तरह:

<TableCell style={{ width: '35%' }}>
  Table Data
</TableCell>
<TableCell>
  Another Table Data
</TableCell>

मेरे लिए इसने केवल हेडर में कोशिकाओं के लिए चौड़ाई निर्धारित करने के लिए काम किया: <TableCell width={props.colWidths[index] + '%'}> , यह पूरी तालिका के लिए कॉलम में अपेक्षित परिणाम देता है।

मैं स्तंभ की चौड़ाई प्रतिशत के साथ सेट करता हूं और यह काम करता है, लेकिन किसी कारण से, यह दाईं ओर एक प्रेत स्तंभ जोड़ता है। तत्व का निरीक्षण करते हुए, यह तालिका में "TableStubCell" तत्व जोड़ना प्रतीत होता है। मुझे नहीं पता कि यह कहां से आया है।

मेरे पास अन्य MUI तालिकाओं के साथ समान समस्याएं हैं, और मेरे काम के आसपास कभी भी यह महान नहीं है। अच्छा होगा यदि y'all ने इस मुद्दे को खोला और इसे ठीक किया ... स्पष्ट रूप से अन्य लोग भी इससे जूझ रहे हैं।

संपादित करें: TableStubCell dx-react-grid-material-ui npm पैकेज से आया है, इसलिए उंगलियों को इंगित करने के लिए खेद है!

मेरा समाधान करना है

<Table>
  <TableHeader>
    <TableRow>
      <TableCell>
        <Box width="200px">
          User Fullname
        </Box>
      </TableCell>
      {/* ...rest of the columns */}
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>
        April Mintac Pineda
      </TableCell>
      {/* ...rest of the columns */}
    </TableRow>
    {/* ...rest of the rows */}
  </TableBody>
</Table>

लेकिन अच्छा होगा अगर हम बस कर सकें

<Table>
  <TableHeader>
    <TableRow>
      <TableCell width="200px">
        User Fullname
      </TableCell>
      {/* ...rest of the columns */}
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>
        April Mintac Pineda
      </TableCell>
      {/* ...rest of the columns */}
    </TableRow>
    {/* ...rest of the rows */}
  </TableBody>
</Table>

यह "@material-ui/core": "4.9.0" संस्करण के साथ मेरे लिए काम करता है

<TableContainer className={classes.container}>
          <Table className={classes.table} stickyHeader size="small">
            <TableHead>
              <TableRow>
                <TableCell width="30%">User Name</TableCell>
                <TableCell width="20%">Designation</TableCell>
                <TableCell width="10%">Nid</TableCell>
                <TableCell width="20%">Email</TableCell>
                <TableCell width="10%">Mobile</TableCell>
                <TableCell width="10%">Gender</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {props.isGridLoading && (
                <TableRow>
                  <TableCell colSpan={6}>
                    <LoadingGridSpinner open={props.isGridLoading} />
                  </TableCell>
                </TableRow>
              )}

              {props.profileObj.lists &&
                props.profileObj.lists.map(row => (
                  <TableRow key={row.userProfileId} hover={true}>
                    <TableCell width="30%">
                      {row.userName}
                    </TableCell>
                    <TableCell width="20%">{row.designation}</TableCell>
                    <TableCell width="10%">{row.nid}</TableCell>
                    <TableCell width="20%">{row.email}</TableCell>
                    <TableCell width="10%">{row.mobile}</TableCell>
                    <TableCell width="10%">{row.gender}</TableCell>
                  </TableRow>
                ))}
            </TableBody>
          </Table>

@Nazrulcsebd और @crizant द्वारा उपयोग किए जाने वाले दृष्टिकोण ने मेरे लिए काम किया। यहाँ मेरा कोड है:

<TableContainer component={Paper} style={{ marginTop: 10 }}>
          <Table style={{ width: 'auto', tableLayout: 'auto' }}>
          <TableHead>
            <TableRow>
              <TableCell>Team Member</TableCell>
              <TableCell align="left">Level</TableCell>
              <TableCell align="left">Last Login</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            { tableArray.map(({ id, name, accessLevel, login }) => (
              <TableRow key={id}>
                <TableCell component="th" scope="row" style={{ width: '35%' }}>
                  {name}
                </TableCell>
                <TableCell align="left">{accessLevel}</TableCell>
                <TableCell align="left">{login}</TableCell>
              </TableRow>
            ))
          }
          </TableBody>
        </Table>
      </TableContainer>

मेरे मामले में मैं चाहता था कि तालिका के अंत में "एक्शन" बटन रखने के लिए सबसे छोटा कॉलम संभव हो। TableHead में TableCell में style={{ width: 1 }} जोड़कर चाल चली।

        <TableContainer component={Paper}>
            <Table className={classes.table} aria-label="simple table">
                <TableHead>
                    <TableRow>
                        {header.map((th, i) => (
                            <TableCell key={i}>{th}</TableCell>
                        ))}
                        <TableCell style={{ width: 1 }}>actions</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {data.map((row, i) => (
                        <TableRow key={i} hover>
                            {header.map((h, i) => (
                                <TableCell key={i} align="left">{row[h]}</TableCell>
                            ))}
                            <TableCell>
                                <IconButton aria-label="edit">
                                    <MoreHorizIcon fontSize="small" />
                                </IconButton>
                            </TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </TableContainer>

const useStyles = makeStyles(theme => ({
  table: {
    "& tr:nth-child(2), & td:nth-child(2) {
      width: '32px',
    }
  }
}));

और फिर, तालिका की जड़ में शैली का उपयोग करें

 <Table
     ....
     className={classes.table}
>

अभी तक परीक्षण नहीं किया गया है (फिक्स्ड हेडर, आदि)

यह बहुत बेहतर होगा यदि हम उदाहरण के लिए तालिकाओं को समान 12 कॉलम सिस्टम दे सकते हैं:

   <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
            <TableCell align="right">Protein&nbsp;(g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.name}>
              <TableCell component="th" scope="row" xs={4}>
                {row.name}
              </TableCell>
              <TableCell align="right" xs={2}>{row.calories}</TableCell>
              <TableCell align="right" xs={2}>{row.fat}</TableCell>
              <TableCell align="right" xs={2}>{row.carbs}</TableCell>
              <TableCell align="right" xs={2}>{row.protein}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>

क्या किसी को टेबल को x दिशा में स्क्रॉल करने का एक तरीका पता है अगर बहुत अधिक कॉलम हैं? मैं केवल मिनिडीड = कुछ हार्डकोड देकर ऐसा करने में सक्षम हूं (जो अज्ञात संख्या में कॉलम के लिए महान नहीं है)

ऐसा लगता है कि नवीनतम संस्करण में fixedHeader={false} style={{width: "auto", tableLayout: "auto"}} को अनदेखा किया गया है।

कोई विचार?

मैंने तालिका के अंदर एक सूची तत्व का उपयोग करके एक वर्कअराउंड के साथ समाप्त किया, और सूची आइटम की चौड़ाई को परिभाषित किया ...
कुछ इस तरह:

<TableCell>
  <ul style={{ width: "150px" }}>
    <li>{row.whatever}</li>
    <li>{row.whatever1}</li>
    <li>{row.whatever2}</li>
  </ul>
</TableCell>

2020 और अभी भी प्राप्त करने के लिए कठिन है, सबसे अजीब हिस्सा यह है कि मैं एक कॉलम की चौड़ाई निर्धारित करने की कोशिश करता हूं, दूसरे कॉलम स्वचालित रूप से खुद को समायोजित करते हैं जब मैंने उनके लिए चौड़ाई भी परिभाषित की! क्या देता है? यह ऐसा है कि तालिका यह सुनिश्चित कर रही है कि पूरी तालिका की चौड़ाई 100% से अधिक न हो, इससे मुझे कठिन समय मिल रहा है। अगर मैं सामग्री-यूआई की तालिका का उपयोग नहीं कर रहा था, तो यह बहुत आसान होगा, लगता है कि सामग्री यूआई ने केवल इसे कठिन बना दिया है?

@aprilmintacpineda क्या आपने मूल <table> तत्वों के साथ प्रयास किया?

@oliviertassinari मैंने मौजूदा कोड को मूल <table> तत्व में परिवर्तित नहीं किया।

यह उदाहरण सभी स्तंभों की चौड़ाई निर्धारित करके काम करता है
https://codesandbox.io/s/fragrant-framework-oy6uz?file=/src/App.js