मैं सीएसएस के साथ "<TABLE RULES>" अनुकरण कैसे कर सकता हूं?

Question

मैं ExtJS का उपयोग कर एक वेब एप्लिकेशन लिख रहा हूं। मैं एक टेबल के अंदर एक टेबल डाल रहा हूं, और विभिन्न कारणों से इसे सभी को रोस्पैन/कोस्पैन आदि के साथ एक बड़ी तालिका में दोबारा असंभव करना असंभव है।

"बाहरी" तालिका में इसकी कोशिकाओं के चारों ओर सीमाएं हैं। मैं अपनी "अंदर" तालिका को के बीच अपनी कोशिकाओं को सीमाओं के साथ रखना चाहता हूं, ताकि मैं मौजूदा ("बाहरी") सेल "विभाजन" के प्रभाव से हवादार हो जाऊं।

यह बातें स्पष्ट करता है, यह मैं क्या के लिए शूटिंग कर रहा हूँ, (गरीब) ascii कला है:

----------------- 
|    | 
|  | |  | 
| ----------- | 
|  | |  | 
| ----------- | 
|  | |  | 
|    | 
----------------- 

("आंतरिक" तालिका एक टिक टीएसी को पैर की अंगुली ग्रिड की तरह लग रहा है, "बाहरी" तालिका के सेल में एक अखंड सीमा है)

मैंने चारों ओर देखा, और विशेषता RULES नामक विशेषता मिली, जो ऐसा लगता है जैसे यह करता है। हालांकि, ऐसा लगता है कि यह खराब रूप से समर्थित है, और वैसे भी मुझे मार्कअप (दाएं?) में शैली डालना नहीं है। मैंने जो दस्तावेज पाया है, वह कहता है "इसके बजाय सीएसएस का उपयोग करें", लेकिन मुझे लगता है कि "सेल के बीच सीमा डालना, लेकिन अगर सेल का किनारा तालिका के बाहर छूता है तो" सीएसएस में मुझे यह कहने का एक आसान तरीका नहीं मिल रहा है । मदद?

Answer 1

यह http://codepen.io/morewry/pen/GnBFu जितना करीब हो सकता है उतना करीब है। मुझे संदेह है कि कुछ समर्थन मुद्दे होंगे और कोशिकाओं का संरेखण border-spacing की मात्रा से बंद है।

table{ 
    table-layout:fixed; 
    border-collapse:separate; 
    border-spacing:0.25em; 
    border:1px solid red; 
} 
    tr{ 
     display:block; 
     border-bottom:1px dashed blue; 
    } 
    tr:last-child{ border:0; } 
     td{ 
      padding-right:0.25em; 
      vertical-align:top; 
      border:1px dotted orange; 
      border-width:0 1px; 
     } 
     td:first-child, 
     td + td{ border-left:0; } 
     td:last-child{ padding-right:0; border-right:0; } 

संपादित

फिर से पढ़ने मुझे एहसास हुआ कि आप एक एकल तालिका में अलग सीमाओं की तलाश नहीं कर रहे थे, लेकिन केवल एक नेस्टेड मेज पर कोशिकाओं के बीच छोड़कर सीमाओं को दबाने के लिए पर। यही कारण है कि बहुत सरल http://codepen.io/morewry/pen/yxvGg है:

table{ 
    table-layout:fixed; 
    border-collapse:collapse; 
    border-spacing:0; 
    border-style:hidden; 
} 
    td{ 
     padding:0.25em; 
     border:1px solid black; 
    } 

सीमा संघर्ष समाधान कहा गया है कि सीमा शैली: छिपा पूर्वता लेता है, इसलिए केवल जो कि ढह मॉडल में प्रदर्शित कोशिकाओं के बीच कर रहे हैं।

यहां एकमात्र मुद्दा यह है कि आईई छुपा समर्थन नहीं करता है, इसलिए IE के लिए आपको वर्कअराउंड की आवश्यकता होगी। छद्म वर्गों को आईई 8 के लिए काम करना चाहिए।मुझे नहीं लगता कि आईई 7 समर्थित है: आखिरी बच्चा, इसलिए इसे कुछ अतिरिक्त मदद की ज़रूरत होगी, और आईई 6 दोनों के लिए कामकाज की आवश्यकता होगी: पहला बच्चा और: आखिरी बच्चा।

IE8 और IE7 के लिए, निम्न border:hidden

table{ border:2px solid transparent; } 

अनुकरण करेगा आप उन ब्राउज़रों में पारदर्शी अंतरिक्ष के 2 अतिरिक्त पिक्सल मिल चाहते हैं, लेकिन इसे और अधिक कुशल है। आईई 6, जैसा कि मुझे याद है, पारदर्शी सीमाओं का सही ढंग से समर्थन नहीं करता है, इसमें अभी भी समस्याएं होंगी। http://codepen.io/morewry/pen/bIvJa देखें।

Answer 2

सरल उदाहरण: http://jsfiddle.net/xixionia/v3eVq/

सरल टेबल (यद्यपि बिना tbody):

<table> 
    <tr> 
     <td>00</td> 
     <td>01</td> 
     <td>02</td> 
    </tr> 
    <tr> 
     <td>10</td> 
     <td>11</td> 
     <td>12</td> 
    </tr> 
    <tr> 
     <td>20</td> 
     <td>21</td> 
     <td>22</td> 
    </tr> 
</table> 

सरल सीएसएस (यद्यपि पूरी तरह से सभी ब्राउज़रों के साथ संगत नहीं):

/* outline */ 
table 
{ 
    border: 2px solid red; 
} 

/* rows */ 
tr 
{ 
    border-top: 2px solid black; 
    border-bottom: 2px solid black; 
} 

/* columns */ 
td 
{ 
    padding: 10px; 
    border-left: 2px solid black; 
    border-right: 2px solid black; 
} 

/* resets */ 
tr:first-child 
{ 
    border-top: none; 
} 

tr:last-child 
{ 
    border-bottom: none; 
} 

td:first-child 
{ 
    border-left: none; 
} 

td:last-child 
{ 
    border-right: none; 
} 

डब्ल्यू 3 स्कूलों पर छद्म-चयनकर्ता संदर्भ: http://www.w3schools.com/css/css_pseudo_classes.asp

इसके बजाय छद्म-चयनकर्ताओं का उपयोग करने का :

आप प्रत्येक पहले बच्चे और सबसे अंत में बच्चे के लिए एक वर्ग सेट कर सकते हैं, और अपने चयनकर्ता के रूप में उस वर्ग का उपयोग ।

Answer 3

आप rules विशेषता है, जो सीएसएस में पूरी तरह से है की मोज़िला कार्यान्वयन उठा सकता है:

http://hg.mozilla.org/mozilla-central/file/3fd770ef6a65/layout/style/html.css#l289 और http://hg.mozilla.org/mozilla-central/file/3fd770ef6a65/layout/style/html.css#l337, शैली हैं लाइन के माध्यम से चल रहा 410.

Answer 4

एचटीएमएल 5 कल्पना सीएसएस नियम है इसके खंड में "Rendering"। बस rule वैल्यू चुनें जिसे आप ढूंढ रहे हैं और संबंधित सीएसएस प्राप्त करें। मुझे <table rules=...> के लिए नियमों की प्रतिलिपि बनाने और पेस्ट करने दें:

नोट: विशेषता चयनकर्ता में "i" CSS4 है और मामले को अनदेखा करता है। अर्थात। rules=ROWSrules=rows जितना अच्छा है।

table { 
    box-sizing: border-box; 
    border-spacing: 2px; 
    border-collapse: separate; 
    text-indent: initial; 
} 

table, td, th { border-color: gray; } 
thead, tbody, tfoot, tr { border-color: inherit; } 
table[rules=none i], table[rules=groups i], table[rules=rows i], 
... and many more selectors in this fashion ... 
table[rules=all i] > tfoot > tr > td, table[rules=all i] > tfoot > tr > th { 
    border-color: black; 
} 

table[rules=none i], table[rules=groups i], table[rules=rows i], 
table[rules=cols i], table[rules=all i] { 
    border-style: hidden; 
    border-collapse: collapse; 
} 

table[rules=none i] > tr > td, table[rules=none i] > tr > th, 
table[rules=groups i] > tr > td, table[rules=groups i] > tr > th, 
table[rules=rows i] > tr > td, table[rules=rows i] > tr > th 
    ... more selectors for none/groups/rows ... 
{ 
    border-width: 1px; 
    border-style: none; 
} 
table[rules=cols i] > tr > td, table[rules=cols i] > tr > th, 
table[rules=cols i] > thead > tr > td, table[rules=cols i] > thead > tr > th, 
table[rules=cols i] > tbody > tr > td, table[rules=cols i] > tbody > tr > th, 
table[rules=cols i] > tfoot > tr > td, table[rules=cols i] > tfoot > tr > th { 
    border-width: 1px; 
    border-style: none solid; 
} 
table[rules=all i] > tr > td, table[rules=all i] > tr > th, 
table[rules=all i] > thead > tr > td, table[rules=all i] > thead > tr > th, 
table[rules=all i] > tbody > tr > td, table[rules=all i] > tbody > tr > th, 
table[rules=all i] > tfoot > tr > td, table[rules=all i] > tfoot > tr > th { 
    border-width: 1px; 
    border-style: solid; 
} 

table[rules=groups i] > colgroup { 
    border-left-width: 1px; 
    border-left-style: solid; 
    border-right-width: 1px; 
    border-right-style: solid; 
} 
table[rules=groups i] > thead, 
table[rules=groups i] > tbody, 
table[rules=groups i] > tfoot { 
    border-top-width: 1px; 
    border-top-style: solid; 
    border-bottom-width: 1px; 
    border-bottom-style: solid; 
} 

table[rules=rows i] > tr, table[rules=rows i] > thead > tr, 
table[rules=rows i] > tbody > tr, table[rules=rows i] > tfoot > tr { 
    border-top-width: 1px; 
    border-top-style: solid; 
    border-bottom-width: 1px; 
    border-bottom-style: solid; 
}