सीएसएस टीडी चौड़ाई का उपयोग करना निरपेक्ष, स्थिति


103

कृपया इसे JSFIDDLE देखें

td.rhead { width: 300px; }

CSS चौड़ाई काम क्यों नहीं करती है?

<table>
<thead>
<tr>
<td class="rhead">need 300px</td>
<td colspan="7">Week #0</td>
<td colspan="7">Week #1</td>
<!-- etc..-->
</tr>
<tr>
<td class="rhead"></td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<!-- etc... -->
</tr>
<thead>
</table>

इसके अलावा, स्थिति के प्रभाव क्या हैं: निश्चित, निरपेक्ष आदि td चौड़ाई पर हैं यदि कोई हो? मैं एक फिक्स से ज्यादा एक कारण की तलाश में हूं। मैं यह समझने की उम्मीद कर रहा हूं कि यह कैसे काम करता है।

td चौड़ाई 300px इच्छानुसार नहीं है


display: table-cellसम्मान नहीं करता है width(उसी तरह से जिसके लिए यह काम नहीं करेगा display: inline)। मुझे समझ नहीं आ रहा है कि आप किस बारे में पूछ रहे हैंposition fixed|absolute
विस्फोट गोलियां

@ExplosionPills क्योंकि मेरे वास्तविक कोड में, मेरे पास तालिका निर्धारित करने के लिए है। जैसा कि आप अनुमान लगा सकते हैं, मैं पृष्ठ के शीर्ष पर एक समयरेखा प्राप्त करने की कोशिश कर रहा हूं। तो मैं सिर्फ स्थिति स्थिति में बताते हुए चौड़ाई को प्रभावित करता हूं।
जेक

जवाबों:


144

यह वह नहीं हो सकता जो आप सुनना चाहते हैं, लेकिन display: table-cellचौड़ाई का सम्मान नहीं करते हैं और पूरी तालिका की चौड़ाई के आधार पर ढह जाएंगे। आप इसे आसानी display: blockसे टेबल सेल के अंदर एक तत्व होने के द्वारा आसानी से प्राप्त कर सकते हैं, जिसकी चौड़ाई आप निर्दिष्ट करते हैं, जैसे

<td><div style="width: 300px;">wide</div></td>

यह बहुत अंतर नहीं करना चाहिए यदि <table>स्वयं position: fixedया पूर्ण है क्योंकि कोशिकाओं की स्थिति तालिका के सापेक्ष सभी स्थिर हैं।

http://jsfiddle.net/ExplosionPIlls/Mkq8L/4/

संपादित करें: मैं क्रेडिट नहीं ले जा सकते, लेकिन जैसा कि टिप्पणी कहते हैं कि तुम सिर्फ उपयोग कर सकते हैं min-widthके बजाय widthतालिका सेल पर बजाय।


31
+1 - मैंने पहले इस वर्कअराउंड का उपयोग किया है। अजीब तरह से पर्याप्त, min-widthपर TDक्रोम और एफएफ में काम प्रतीत होता है: jsfiddle.net/Mkq8L/7
टिम Medora

2
दरअसल, हमेशा की तरह, प्रश्न पोस्ट करने के बाद, मुझे लगता है कि min-width: 300pxकाम करता है! (@TimMedora आप कुछ सेकंड से तेज़ थे!)
जेक

मुझे लगता है कि सबसे अच्छा जवाब प्रदर्शन का उल्लेख करके है: टेबल-सेल व्यवहार। धन्यवाद!
जेक

यह व्यवहार मेरे लिए समझ में आता है: यदि आप एक ही स्तंभ पर दो कोशिकाओं के लिए दो अलग-अलग चौड़ाई निर्धारित करते हैं तो क्या होना चाहिए? साथ min-widthवहाँ कोई समस्या नहीं है, हालांकि, सबसे बड़ा ले।
सिरो सेंटिल्ली 郝海东 冠状 iro 事件 法轮功 '

3
यह एक हैक है, मैं इसकी सिफारिश नहीं करता हूं। संयुक्त td चौड़ाई तालिका की चौड़ाई से अधिक है। यही समस्या है। आपको अधिक HTML संरचनाएँ जोड़ने के साथ इसे ठीक नहीं करना चाहिए।
डेविड

28

आप बेहतर उपयोग कर रहे हैं table-layout: fixed

ऑटो डिफ़ॉल्ट मान है और बड़े तालिकाओं के साथ क्लाइंट साइड लैग का थोड़ा सा कारण हो सकता है क्योंकि ब्राउज़र इसके माध्यम से सभी आकारों को जांचने के लिए पुनरावृत्त करता है।

फिक्स्ड बेहतर है और पेज को जल्दी प्रस्तुत करता है। तालिका की संरचना समग्र चौड़ाई और स्तंभों में से प्रत्येक की चौड़ाई पर निर्भर है।

यहां इसे मूल उदाहरण पर लागू किया गया है: JSFIDDLE , आप ध्यान देंगे कि शेष कॉलम कुचल दिए गए हैं और उनकी सामग्री को ओवरलैप कर रहे हैं। हम इसे कुछ और CSS के साथ ठीक कर सकते हैं (मुझे बस इतना करना है कि पहली TR में एक क्लास जोड़नी है):

    table {
        width: 100%;
        table-layout: fixed;
    }

    .header-row > td {
        width: 100px;
    }

    td.rhead {
        width: 300px
    }

यहाँ कार्रवाई में देखा गया: JSFIDDLE


11

इसका कारण यह है कि आपके द्वारा दिए गए लिंक में काम नहीं करता है क्योंकि आप 300px कॉलम PLUS 52 कॉलम 7 स्पैन प्रत्येक कॉलम को प्रदर्शित करने की कोशिश कर रहे हैं। कॉलम की संख्या को सिकोड़ें और यह काम करता है। आप स्क्रीन पर कई फिट नहीं कर सकते।

यदि आप स्तंभों को सेटिंग आज़माने के लिए बाध्य करना चाहते हैं:

body {min-width:4150px;}

मेरी jsfiddle देखें: http://jsfiddle.net/Mkq8L/6/ @ माइक मैं अभी तक टिप्पणी नहीं कर सकता।


2
शरीर की चौड़ाई के साथ तालिका की चौड़ाई सीमा बढ़ने के लिए +1।
जेक

8

कारण, है, क्योंकि आपने तालिका की चौड़ाई निर्दिष्ट नहीं की है, और td के आपके पूरे समूह अतिप्रवाहित हैं।

उदाहरण के लिए , मैंने तालिका को 5000px की चौड़ाई दी है, जो मुझे लगा कि आपकी आवश्यकताओं के अनुरूप होगी।

table{
    width:5000px;
}

यह आपके द्वारा प्रदान किया गया सटीक कोड है, जिसे मैंने केवल तालिका की चौड़ाई में जोड़ा है।

मुझे विश्वास है कि क्या हो रहा है, क्योंकि आपका टीडी डिफ़ॉल्ट तालिका की चौड़ाई से अधिक है। जिसे आप देख सकते हैं, यदि आप प्रत्येक ट्राड में अपने लगभग 45 td खींचते हैं, (यानी आपके प्रश्न में दिया गया कोड, jsfiddle नहीं) यह ठीक काम करता है


2
+1 का उल्लेख करने के लिए कि टेबल की चौड़ाई है। समस्या यह है कि कभी-कभी हम हाथ से पहले समग्र चौड़ाई नहीं जानते हैं। डिफ़ॉल्ट तालिका चौड़ाई क्या है?
जेक

मैं वास्तव में नहीं जानता। मुझे सब पता है कि अगर आपके पास बहुत सारे कॉलम हैं, तो टेबल स्क्वैश करेगा, जिससे सभी बच्चे नोड को बेकार कर देंगे। मैंने पहले भी इसका सामना किया है, लेकिन मुझे डिफ़ॉल्ट मूल्य का पता लगाना अभी बाकी है। हो सकता है कि मैं एक प्रश्न के रूप में पूछूं।
वह हुआ

मेरा मानना ​​है कि मैंने इस मुद्दे को हल कर दिया है stackoverflow.com/questions/14767459/…
उसने हुआ

यह उच्च श्रेणी निर्धारण के बजाय वास्तविक उत्तर है। चौड़ाई केवल तभी सेट की जा सकती है, जब सामग्री संपूर्ण तालिका की चौड़ाई से अधिक न हो।
डेविड

5

यह काम करने की कोशिश करो।

<table>
<thead>
<tr>
<td width="300">need 300px</td>

1
वाह! धन्यवाद ♥
ivahidmontazer

कृपया यह स्पष्ट करें कि यह कोड ओपी की मदद क्यों / कैसे करता है। यह एक उत्तर प्रदान करने में मदद करेगा जिससे भविष्य के दर्शक सीख सकते हैं। देखें इस मेटा सवाल और उसके जवाब के बारे में अधिक जानकारी के लिए।
हेरेनेटिक मंकी

1
ध्यान दें कि HTML5 में चौड़ाई की विशेषता को दर्शाया गया है।
सिम्युमिलको

5

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

table {
  table-layout: auto;
}

आप बूटस्ट्रैप उपयोग करते हैं, वर्ग tableहै table-layout: fixed;डिफ़ॉल्ट रूप से।


4

टेबल-लेआउट संपत्ति और अपनी मेज पर "निश्चित" मूल्य का उपयोग करें।

table {
   table-layout: fixed;
   width: 300px; /* your desired width */
}

तालिका की संपूर्ण चौड़ाई सेट करने के बाद, अब आप td की% में चौड़ाई सेट कर सकते हैं।

td:nth-child(1), td:nth-child(2) {
   width: 15%;  
}

आप इस लिंक पर अधिक जानकारी प्राप्त कर सकते हैं: http://www.w3schools.com/cssref/pr_tab_table-layout.asp


3

मेरा पागल समाधान।)

$(document).ready(function() {
    $("td").each(function(index) { 
    var htmlText = "<div style='width:300px;'>" + $(this).text() +"</div>";
    $(this).html(htmlText);
  });
});

2

यदि तालिका की चौड़ाई उदाहरण के लिए 100% है, तो td पर प्रतिशत चौड़ाई जैसे 20% का उपयोग करने का प्रयास करें।


2

Div में पहली सेल से सामग्री लपेटें जैसे:

HTML:

<td><div class="rhead">a little space</div></td>

सीएसएस:

.rhead {
  width: 300px;
}

यहाँ एक jsfiddle है


1

आप भी उपयोग कर सकते हैं:

.rhead {
    width:300px;
}

लेकिन यह केवल कुछ ब्राउज़रों के साथ होगा, अगर मुझे सही ढंग से याद है कि IE8 इसकी अनुमति नहीं देता है। सब से अधिक, यह सिर्फ अपने आप में width=""विशेषता रखने के लिए सुरक्षित <td>है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.