2012-02-25 10 views
5

के लंबवत सीमाओं के बीच अंतर को खत्म करना मुझे फिर से शुरू करना है कि मैं आसान रखरखाव और साझाकरण के लिए एमएस वर्ड से एचटीएमएल और सीएसएस में अनुवाद करने की कोशिश कर रहा हूं। मुझे फिर से शुरू करने की शैली पसंद है, और इसे रखना पसंद करेंगे। इसमें बोल्ड कॉलम है, जिसमें "एजुकेशन", "एक्सपीरियंस" आदि जैसे शीर्षक बोल्ड में हैं, और एक लंबवत विभाजक के खिलाफ दाएं-गठबंधन हैं।तालिका <td> s

शब्द में यह एक तालिका द्वारा हासिल किया जाता है, केंद्रीय सीमा की शैली ठोस पर सेट होती है, और अन्य सीमाएं खाली हो जाती हैं। यह अनुभाग शीर्षक को संबंधित सामग्री के साथ लंबवत रूप से गठबंधन करने की अनुमति देता है।

मैंने इस तकनीक को केवल डुप्लिकेट करने की कोशिश की, लेकिन फ़ायरफ़ॉक्स और क्रोम में, यदि मैंने टीडीएस सीमा-दाएं गुणों के कॉलम को ठोस पर सेट किया है, तो तालिका के ऊर्ध्वाधर डिवीजनों पर अंतराल हैं। इस प्रकार के खंडहर प्रभाव।

मैंने दो divs का उपयोग करने के बारे में सोचा, एक शीर्षक के साथ और एक सामग्री के साथ, लेकिन हार्ड-कोडिंग पिक्सेल हाइट्स (जिसमें समस्याओं का अपना स्पष्ट सेट है) के अलावा, मैं यह नहीं समझ सकता कि उन्हें कैसे रखा जाए लंबवत इन-सिंक।

क्या शीर्षक और उनकी संबंधित सामग्री को लंबवत रूप से गठबंधन रखने की क्षमता खोने के बिना ऐसा करने का कोई तरीका है?

तालिका कोड लग रहा है

की तरह कुछ
<table> 
<tr><td style="border-right:1px solid black;">Education</td><td> [Name of School, etc.]</td></tr> 
<tr><td style="border-right:1px solid black;">Experience</td><td>[Work experience]</td></tr> 
. 
. 
. 
</table> 

`

+1

कृपया बताएं कि "तालिका के ऊर्ध्वाधर डिवीजनों पर अंतराल" का अर्थ क्या है, और कृपया कुछ कोड पोस्ट करें। –

+0

क्या आप एक स्क्रीनशॉट जोड़ सकते हैं या जो कुछ भी हम वास्तव में देख सकते हैं कि आप क्या चाहते हैं? –

+0

क्या आप अब तक जो कुछ भी आजमा चुके हैं, उसके कुछ कोड साझा कर सकते हैं, और शायद आप जो कुछ हासिल करने की कोशिश कर रहे हैं उसकी एक छवि साझा कर सकते हैं। यह बहुत मदद की होगी। उदाहरण के लिए आप कोड को [JSFiddle] (http://jsfiddle.net) के साथ साझा कर सकते हैं। –

उत्तर

17

मैं के साथ जाना चाहते हैं:

table { border-collapse: collapse; } 

यह अंतराल को खत्म करने और मेज सीमाओं की अनुमति होगी।

+0

यह वास्तव में ओपी प्रश्न का उत्तर देता है ... – mmcrae

5

तालिका पर, border-spacing: 0; सेट करें जो बच्चे TD तत्वों की सीमाओं के बीच रिक्त स्थान हटा देता है।

+0

lifesaver !, स्नीकी टेबल शैलियों –

+0

'सीमा-पतन का उपयोग करना: पतन; 'मेरी तालिका में छोटे अंतर को छोड़ दिया, लेकिन इससे उन्हें समाप्त कर दिया गया। ठीक वही जो मेरे द्वारा खोजा जा रहा था! – Jez

0

क्यों अपने जीवन जटिल जब आप निम्न कर सकते हैं: एक pdf & मेजबान यह एचटीएमएल embed या object टैग का उपयोग में

परिवर्तित word फ़ाइल!

संपादित करें:http://jsfiddle.net/uday99/WzGeX/2/

+0

बिंदु का एक हिस्सा यह है कि मैं अपनी .docx फ़ाइलों को खोना जारी रखता हूं और उन्हें एक अभेद्य पीडीएफ से पुन: बनाने के लिए मजबूर होना पड़ता है। साथ ही, यह संभावना है कि मेरे दर्शकों के पास उनके ब्राउज़र में एक पीडीएफ प्लगइन नहीं होगा। मैं बस एक सिंगल, विम-संपादन योग्य फ़ाइल रखूंगा जो कि जब भी मैं टाइपो या लाभ अनुभव देखता हूं, तब मैं पूरी प्रक्रिया के माध्यम से जल्दी से सर्वर पर धक्का दे सकता हूं। –

+0

इस उदाहरण को देखें: आप कहने का मतलब है कि आप इसे कुछ चाहते हैं? Http: //jsfiddle.net/uday99/WzGeX/2/ – uday

+0

वास्तव में, http://jsfiddle.net/kFGmC/ लगभग वही है जो मैं उम्मीद कर रहा था। मैंने अभी तक ब्लॉक तत्वों के रूप में '' टैग का इलाज नहीं किया था। –

5

तालिका के साथ डिस्पेंसिंग बेहतर विचार है। आप शीर्षलेखों को <h2> तत्वों (या <h> के स्तर जो भी उचित है) में बदल सकते हैं और इसे बाईं ओर फ़्लोट कर सकते हैं और टेक्स्ट को पर्याप्त बाएं मार्जिन दे सकते हैं।

कुछ this jsfiddle की तरह कुछ, या यह आप नहीं चाहते हैं?

+0

बढ़िया, धन्यवाद! सही बात कहने के बाद, यह हमेशा इतना स्पष्ट लगता है। –