2011-09-10 14 views
11

मुझे आश्चर्य है कि केवल सीएसएस का उपयोग कर HTML तालिका कक्षों को पुनर्व्यवस्थित करना संभव है।क्या एचटीएमएल टेबल कोशिकाओं को सीएसएस के साथ पुनर्व्यवस्थित किया जा सकता है?

------------------------------------------------ 
| C |    A   | B | 
------------------------------------------------ 

या शायद यह भी इस:

उदाहरण के लिए इस

------------------------------------------------ 
|    A   | B | C | 
------------------------------------------------ 

के रूप में प्रदर्शित किया जा सकता

------------------------- 
|   A   | 
------------------------- 
|  B  |  C  | 
------------------------- 

केवल सीएसएस के साथ यह संभव है या यह संशोधित करने के लिए आवश्यक है एचटीएमएल नोड्स?

संपादित करें:

मैं उपयोगकर्ताओं द्वारा रिपोर्ट मुद्दों की एक सूची प्रदर्शित करना चाहते हैं: आप में से कुछ कारण है कि इस सब पर की जरूरत है सोच रहे थे, इसलिए यहाँ वास्तविक जीवन समस्या का सामना करना पड़ रहा हूँ

------------------------------------------------------------------------------ 
| Problem description (A) | Reporting user (B) | Link to affected entity (C) | 
------------------------------------------------------------------------------ 

मैं विभिन्न लेआउट का मूल्यांकन करना चाहता था। पहला लेआउट संस्करण रिपोर्टिंग उपयोगकर्ता पर जोर देगा, दूसरा टेक्स्ट विवरण पर जोर देगा।

मुझे संरचना को बदलने में कोई समस्या नहीं है, और वास्तव में मैंने पहले से ही किया है, लेकिन जैसा कि मैं इसे कोड कर रहा था, मुझे आश्चर्य हुआ कि सीएसएस के साथ ऐसा करना संभव है या नहीं। (बस शुद्ध जिज्ञासा)

+0

ऐसा कुछ है जो केवल आधुनिक ब्राउज़रों में स्वीकार्य है? – thirtydot

+0

क्या आप विशेष रूप से तालिका कक्षों का जिक्र कर रहे हैं, जैसे '

' तत्वों का उपयोग करते हुए, या आप टेबल-कम, टेबल-जैसी डिज़ाइन के बारे में बात कर रहे हैं? आप जो मांग रहे हैं वह वास्तव में एक टेबल-कम डिज़ाइन में बहुत मुश्किल नहीं है। – Wex

+0

आप सीएसएस के साथ ऐसा क्यों कर रहे हैं?यदि आप तालिका के अर्थ/संरचना को बदलना चाहते हैं, तो HTML बदलें। – BoltClock

उत्तर

4

आप कर सकते हैं, लेकिन यह करने के लिए सबसे अच्छी बात नहीं है (अन्य उत्तरों देखें)।
यहाँ मेरी उदाहरण है:

*{margin:0; padding:0} 
 
.type-a .b {width: 50%; float:left;} 
 
.type-a .a {width:100%; float:left;} 
 
.type-a .c {width: 50%; float:left;} 
 

 
.type-b .b {width: 25%; float:left;} 
 
.type-b .a {width: 50%; float:right;} 
 
.type-b .c {width: 25%; float:left;}
<table class="type-a" width="100%" border="0" cellspacing="0" cellpadding="0"> 
 
    <tr> 
 
    <td class="a" style="background-color:#060">A</td> 
 
    <td class="b" style="background-color:#006">B</td> 
 
    <td class="c" style="background-color:#600">C</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="a" style="background-color:#060">A</td> 
 
    <td class="b" style="background-color:#006">B</td> 
 
    <td class="c" style="background-color:#600">C</td> 
 
    </tr> 
 
</table> 
 

 
<br /> 
 
<br /> 
 
<table class="type-b" width="100%" border="0" cellspacing="0" cellpadding="0"> 
 
    <tr> 
 
    <td class="a" style="background-color:#060">A</td> 
 
    <td class="b" style="background-color:#006">B</td> 
 
    <td class="c" style="background-color:#600">C</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="a" style="background-color:#060">A</td> 
 
    <td class="b" style="background-color:#006">B</td> 
 
    <td class="c" style="background-color:#600">C</td> 
 
    </tr> 
 
</table>

View on JSFiddle

+2

तकनीकी रूप से जब आप 'फ्लोट: बाएं | दाएं; 'उन तत्वों के लिए जो' डिस्प्ले: टेबल-सेल 'हैं, आप उन्हें तालिका लेआउट प्रबंधन से पूरी तरह हटा रहे हैं। उदाहरण के लिए यदि आप पंक्ति में कोशिकाओं को एक ही ऊंचाई के लिए बनाना चाहते हैं तो आपका दृष्टिकोण काम नहीं करेगा। देखें: http://jsfiddle.net/ye8Qa/1/ –

+0

@ सी-स्माइल, 100% सही। मैंने कहा कि यह करने के लिए सबसे अच्छी बात नहीं है और आपकी टिप्पणी एक अन्य कारण है। सवाल यह भी नहीं बताता कि उसे टेबल लेआउट प्रबंधन का पालन करना था - हालांकि इसे शायद निहित किया गया था;) –

1

सीएसएस में इस समय ऐसी कोई सुविधा नहीं है।

CSS3 flexbox model एक या दूसरे रूप में प्रदान करेगा (इस पर काम इस समय सक्रिय विकास में डब्ल्यू 3 सी पर है)। यह आपको जो भी करना चाहते हैं उसे करने की अनुमति देनी चाहिए।

0

आप एक गंदा तरह से यह कर सकते हैं, तो आप हमेशा नाव सुविधा का उपयोग करने की कोशिश कर सकते।

लेकिन पिछले डिजाइन है कि आप एक उदाहरण के रूप में प्रदान के लिए, मुझे लगता है कि आप चौड़ाई के साथ चारों ओर खेलने के लिए सक्षम होना चाहिए (ऊपर एक चौड़ाई होना चाहिए: 100%; और अन्य 2 होना चाहिए 50%)

0

आप उचित मार्कअप के साथ सभी तीन कर सकते हैं, हालांकि जोड़ा गया, और सीएसएस का स्पर्श। http://jsfiddle.net/jalbertbowdenii/xvBhF/

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

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