td चौड़ाई, काम नहीं कर रहा है?

Question 1

इसलिए मेरे पास यह कोड है:

<table>
    <tr>
        <td width="200px" valign="top">
            <div class="left_menu">
                <div class="menu_item">
                    <a href="#">Home</a>
                </div>
            </div>
        </td>
        <td width="1000px" valign="top">Content</td>
    </tr>
</table>

सीएसएस के साथ

.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
}

.menu_item {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    border-top: 1px solid #FFFFCC;
    cursor: pointer;
    padding: 5px;
}

यह मेरे ब्राउज़र पर ठीक काम करता है और मैंने इसे मैक और पीसी दोनों में हर ब्राउजर में टेस्ट किया है, लेकिन किसी को शिकायत है कि 200 के tdसाथ widthचौड़ाई बढ़ रही है। मुझे नहीं पता कि वह किस बारे में बात कर रहा है। क्या किसी को पता है कि वह चौड़ाई को क्यों बदल रहा है td?

Question 2

यह होना चाहिए:

<td width="200">

या

<td style="width: 200px">

ध्यान दें कि यदि आपके सेल में कुछ ऐसी सामग्री है जो 200px (जैसे somelongwordwithoutanyspaces) में फिट नहीं होती है , तो सेल तब तक खिंचेगी, जब तक कि आपके सीएसएस में table-layout: fixedतालिका नहीं होगी।

संपादित करें

जैसा कि क्रिस्तिना चिल्ड्स ने उनके उत्तर पर ध्यान दिया है, आपको widthएनेलिटी और इनलाइन सीएसएस ( styleविशेषता के साथ ) का उपयोग करने से बचना चाहिए । शैली और संरचना को यथासंभव अलग करना एक अच्छा अभ्यास है।

Question 3

तालिकाओं में चौड़ाई और / या ऊंचाई अब मानक नहीं हैं; जैसा कि इअनज़ कहते हैं, वे पदावनत हैं। इसके बजाय सबसे अच्छा तरीका यह है कि आपके टेबल सेल के अंदर एक ब्लॉक एलिमेंट है जो सेल को आपके इच्छित आकार के लिए खुला रखेगा:

<table>
    <tr>
        <td valign="top">
            <div class="left_menu">
                <div class="menu_item">
                    <a href="#">Home</a>
                </div>
            </div>
        </td>
        <td valign="top" class="content">Content</td>
    </tr>
</table>

सीएसएस

.content {
    width: 1000px;
}

.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    width: 200px;
}

.menu_item {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    border-top: 1px solid #FFFFCC;
    cursor: pointer;
    padding: 5px;
}

Question 4

 <table style="table-layout:fixed;">

यह स्टाइल की चौड़ाई को मजबूर करेगा <td>। यदि पाठ इसे ओवरफिल करता है, तो यह अन्य <td>पाठ को ओवरलैप करेगा । इसलिए मीडिया के प्रश्नों का उपयोग करके देखें।

Question 5

आप तालिका की width/ heightविशेषताओं में इकाइयों को निर्दिष्ट नहीं कर सकते ; ये हमेशा पिक्सेल में होते हैं, लेकिन आपको इनका उपयोग नहीं करना चाहिए क्योंकि ये पदावनत हैं।

Question 6

आप "टेबल-लेआउट: निश्चित" की कोशिश कर सकते हैं; अपनी मेज पर

table-layout: fixed;
width: 150px;

150px या अपनी इच्छित चौड़ाई।

संदर्भ: https://css-tricks.com/fixing-tables-long-strings/

Question 7

आप <td>टैग सीएसएस के भीतर उपयोग कर सकते हैं :display:inline-block

पसंद: <td style="display:inline-block">

Question 8

उपयोग करने का प्रयास करें

word-wrap: break-word;

उममीद है कि इससे मदद मिलेगी

Question 9

इसे इस्तेमाल करे:

word-break: break-all;

Question 10

मैं उपयोग करता हूं

<td nowrap="nowrap">

स्निपेट का विस्तार करें

रैप को रोकने के लिए संदर्भ: https://www.w3schools.com/tags/att_td_nowrap.asp

Question 11

ध्यान दें कि थ्रेड में एक कॉलम की चौड़ाई को समायोजित करने से पूरी तालिका प्रभावित होगी

<table>
    <thead>
        <tr width="25">
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tr>
        <td>Joe</td>
        <td>joe@email.com</td>
    </tr>
</table>

मेरे मामले में, थ्रेड> tr पर चौड़ाई सीधे टेबल> tr> td पर चौड़ाई को ओवरराइड कर रही थी।

Question 12

उपयोग

<table style="table-layout:fixed;">

यह तालिका को 100% चौड़ाई पर सेट करने के लिए बाध्य करेगा। फिर इस कोड का उपयोग करें

$('#dataTable').dataTable( {
        bAutoWidth: false, 
        aoColumns : [
          { sWidth: '45%' },
          { sWidth: '45%' },
          { sWidth: '10%' },
              ]
      });

(टेबल आईडी डेटाटेबल है और प्रत्येक सेल की लंबाई निर्दिष्ट करने के लिए 3 कॉलम है)

Question 13

मैंने कई समाधानों के साथ कोशिश की, लेकिन यह मेरे लिए काम नहीं कर रहा था इसलिए मैंने मेज के साथ फ्लेक्स की कोशिश की और इसने मेरे लिए सीमा-पतन जैसी सभी तालिका कार्यात्मकताओं के साथ ठीक काम किया और इसलिए केवल परिवर्तन प्रदर्शन संपत्ति है

यह मेरी HTML आवश्यकता थी

<table>
  <thead>
    <tr>
      <th>1</th>
      <th colspan="3">2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td colspan="3">2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td colspan="2">3</td>
    </tr>
  </tbody>
</table>

मेरा सीएसएस

table{
    display: flex;
  flex-direction: column;
}
table tr{
    display: flex;
  width: 100%;
}
table > thead > tr > th:first-child{
    width: 20%;
}
table > thead > tr > th:last-child{
    width: 80%;
}
table > tbody tr > td:first-child{
    width: 10%;
}
table > tbody tr > td{
    width: 30%;
}
table > tbody tr > td[colspan="2"]{
    width: 60%;
}
table > tbody tr > td[colspan="3"]{
    width: 90%;
}
/*This is to remove border making 1px space on right*/
table > tbody tr > td:last-child{
    border-right: 0;
}

Question 14

यह समस्या एक सीएसएस नियम का उपयोग करके min-widthऔर आसानी से हल हो max-widthजाती है।

एचटीएमएल

<table>
  <tr>
    <td class="name">Peter</td>
    <td class="hobby">Photography</td>
    <td class="comment">A long comment about something...</td>
  </td>
</table>

सीएसएस

.name {
  max-width: 80px;
  min-width: 80px;
}

यह पहला कॉलम 80px चौड़ा होने के लिए मजबूर करेगा। आमतौर पर मैं केवल पाठ में शासन करने के लिए न्यूनतम चौड़ाई के बिना अधिकतम-चौड़ाई का उपयोग करता हूं जो कि कभी-कभी एक तालिका बनाने से बहुत लंबा होता है जिसमें एक सुपर चौड़ा स्तंभ होता है जो ज्यादातर खाली होता है। हालांकि, ओपी का सवाल एक निश्चित चौड़ाई पर सेट करने के बारे में था, इसलिए दोनों नियम एक साथ थे। कई ब्राउज़रों परwidth:80px;सीएसएस में को टेबल कॉलम के लिए अनदेखा किया जाता है। HTML के भीतर चौड़ाई सेट करना काम करता है, लेकिन ऐसा नहीं है जो आपको चीजों को करना चाहिए।

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

यदि मैं पाठ को एक पंक्ति की ऊंचाई से लपेटकर और बढ़ाकर रखना चाहता हूं - लेकिन फिर भी उपयोगकर्ता के लिए यह संभव है कि वह पूरा पाठ देख सके, मैं white-space: nowrap;मुख्य नियम का उपयोग करता हूं , फिर एक होवर नियम लागू करें जो चौड़ाई और अब के नियमों को हटा देता है ताकि उपयोगकर्ता अपने माउस पर पूरी सामग्री देख सकें। कुछ इस तरह:

सीएसएस

.name {
  max-width: 80px;
  white-space: nowrap;
  overflow: hidden;
}
.name:hover {
  max-width: none;
  white-space: normal;
  overflow:auto;
}

यह सिर्फ इस बात पर निर्भर करता है कि आप क्या हासिल करना चाहते हैं। मुझे उम्मीद है इससे किसी को सहायता मिलेगी। PS एक तरफ के रूप में, आईओएस के लिए काम नहीं करने वाले हॉवर के लिए एक फिक्स है - आईओएस सफारी और क्रोम पर सीएसएस होवर नॉट वर्किंग देखें