2013-07-10 6 views
7

मेरे पास एक सारणी है जो किसी ईवेंट के समय के बारे में कुछ जानकारी प्रदर्शित करती है, और वह विशिष्ट जानकारी घोंसला वाली तालिका में होती है।<td> `चौड़ाई` या` अधिकतम-चौड़ाई` विशेषता का पालन नहीं करते?

Nested Table

यहाँ <td> कि नेस्टेड तालिका में शामिल है (कृपया ध्यान न दें उस्तरा तर्क):

यहाँ एक स्क्रीनशॉट

<td> 
    <table class="centered" style="width: 100%; table-layout: fixed; white-space: nowrap;"> 
     <tbody> 
      <tr> 
       <td class="left-text" style="max-width: 81px; width: 81px;"><b>All Day?</b></td> 
       <td id="[email protected]" style="width: 160px;">@(item.AllDay.HasValue && item.AllDay.Value == true ? "Yes" : "No")</td> 
      </tr> 
      @*Should display StartTime & EndTime if AllDay == true??*@ 
      <tr id="[email protected]" style="display: @(item.AllDay.HasValue && item.AllDay.Value == true ? "none" : "block")"> 
       <td class="left-text" style="max-width: 81px; width: 81px;"><b>Start Time</b></td> 
       <td id="[email protected]" style="width: 160px;">@item.StartTime</td> 
      </tr> 
      <tr id="[email protected]" style="display: @(item.AllDay.HasValue && item.AllDay.Value == true ? "none" : "block")"> 
       <td class="left-text" style="max-width: 81px; width: 81px;"><b>End Time</b></td> 
       <td id="[email protected]" style="width: 160px;">@item.EndTime</td> 
      </tr> 
     </tbody> 
    </table> 
</td> 

नेस्टेड तालिका में, मैं निम्नलिखित है शैली:

style="width: 100%; table-layout: fixed; white-space: nowrap;" 

प्रत्येक पर बाएं हाथ के सेल (यानी।

style="max-width: 81px; width: 81px;" 

यदि यह स्पष्ट नहीं है, नेस्टेड तालिका की कोशिकाओं में से कोई भी मेरी शैली का अनुसरण कर रहे: "पूरे दिन", "प्रारंभ समय", "समाप्ति समय") मैं निम्नलिखित शैली है। यह थोड़ा निराशाजनक है, क्योंकि मुझे यह भी पता नहीं था कि टेबल इतनी हास्यास्पद गंदी गड़बड़ी में बदल सकता है।

मैं बल सही ढंग से संरेखित करने के लिए नेस्टेड तालिका में सभी तालिका डेटा कक्ष कैसे कर सकता हूं?

उत्तर

22

आपको अपने <tr> टैग पर display:block; के बजाय display:table-row; का उपयोग करने की आवश्यकता है।

वैकल्पिक रूप से, आप display मान को टॉगल करने के बजाय display:none; के साथ कक्षा को टॉगल कर सकते हैं।

संबंधित मुद्दे