যার উপাদানগুলির প্রদর্শন টেবিল-সেলে সেট করা আছে তাদের জন্য কলস্পান / রাউস্পান

Question

আমার কাছে নিম্নলিখিত কোড রয়েছে:

<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell colspan2">Cell</div>
    </div>
</div>

<style>
    .table {
        display: table;
    }
    .row {
        display: table-row;
    }
    .cell {
        display: table-cell;
    }
    .colspan2 {
        /* What to do here? */
    }
</style>

অনেকটাই অকপট. এর সাথে থাকা উপাদানের জন্য আমি কীভাবে একটি কলস্পান (বা কলস্পানের সমতুল্য) যুক্ত করব display: table-cell?

Comments

আপনি কি কেবল একটি টেবিল ব্যবহার করতে পারবেন না? এটা অনেক সহজ হবে। প্লাস যদি এটি ট্যাবুলার ডেটা হয় তবে এটি আরও সিনেমিক হবে।

— পাঙ্ক্রোকবুদ্ধিহলি

@ ত্রিশটি এটি সম্ভবত এটি করতে পারে, এটি কেবল ব্যথা এবং অপ্রয়োজনীয় হবে। 960 এর মতো গ্রিড সিস্টেমগুলি মূলত এটি অর্জন করে তবে পুরো পৃষ্ঠা বিন্যাসের জন্য।

— পাঙ্ক্রোকবুদ্ধিহলি

@ মিস্টারস্টার: আপনি কী বলছেন তা আমি নিশ্চিত নই। 960.gs ব্যবহার করে না display: table-cell।

— থার্ডডট

@ ত্রিশটি ডট দুঃখিত, ওপি যে নির্দিষ্ট প্রশ্নটি করেছিল তা আমি ভুলে গেছি। আপনি ঠিক বলেছেন, আপনি CSS এর মাধ্যমে কোনও কলস্প্যান যোগ করতে পারবেন না। আমি নির্দেশ করছিলাম যে আপনি ডিভের আচরণটি সারি এবং কলামগুলির মতো করতে পারেন এবং এতে একাধিক কলাম বিস্তৃত ঘরগুলি অন্তর্ভুক্ত রয়েছে।

— পাঙ্ক্রোকবুদ্ধিহলি

আপনার প্রথম স্তরের প্রতিষ্ঠানের জন্য যেমন সিমুলেটেড টেবিল ব্যবহার করেন, তবে উদাহরণস্বরূপ আপনাকে একটি স্টিকি ফুটার তৈরি করার ক্ষমতা দেবে। আপনার কলস্পান অনুকরণের জন্য, আপনি আপনার অনন্য কক্ষে একটি নেস্টেড টেবিল তৈরি করতে পারেন, যেটির একটি একক সারি থাকবে এবং আপনার যতগুলি সেল প্রয়োজন হবে, বা সাধারণ ভাসমান ডিভ ব্যবহার করতে পারেন।

— বার্নার্ড দুসাবলন

Answer 1

আমি যতদূর জানি, কলস্প্যান / সারিস্পানের অভাব সীমাবদ্ধতার মধ্যে একটি মাত্র display:table। এই পোস্টটি দেখুন:

http://www.onenaught.com/posts/201/use-css-displaytable-for-layout

Answer 2

যেহেতু ওপি স্পষ্টভাবে এই রায় দেয় না যে সমাধানটি অবশ্যই খালি সিএসএস হওয়া উচিত, তাই আমি একগুঁয়ে হয়ে যাব এবং আমার আজকের কাজটি বুঝতে পারি, বিশেষত যেহেতু এটি কোনও টেবিলের ভিতরে টেবিলের চেয়ে অনেক বেশি মার্জিত।

উদাহরণটি প্রতি সারি এবং দুটি সারি হিসাবে দুটি কোষের সাথে <টেবিল> এর সমান, যেখানে দ্বিতীয় সারিতে ঘরটি একটি টিডি রয়েছে colspan="2"।

আমি এটি আইসওয়েজেল 20, ফায়ারফক্স 23 এবং আইই 10 দিয়ে পরীক্ষা করেছি।

div.table {
  display: table;
  width: 100px;
  background-color: lightblue;
  border-collapse: collapse;
  border: 1px solid red;
}

div.row {
  display: table-row;
}

div.cell {
  display: table-cell;
  border: 1px solid red;
}

div.colspan,
div.colspan+div.cell {
  border: 0;
}

div.colspan>div {
  width: 1px;
}

div.colspan>div>div {
  position: relative;
  width: 99px;
  overflow: hidden;
}

<div class="table">
    <div class="row">
        <div class="cell">cell 1</div>
        <div class="cell">cell 2</div>
    </div>
    <div class="row">
        <div class="cell colspan">
            <div><div>
                cell 3
            </div></div>
        </div>
        <div class="cell"></div>
    </div>
</div>

লাইভ কর্ম (ডেমো) এখানে ।

সম্পাদনা: আমি কোডটিকে আরও মুদ্রক-বান্ধব হিসাবে ফাইনিনিউন করেছিলাম, কারণ তারা ব্যাকগ্রাউন্ডের রঙগুলি ডিফল্টরূপে ছেড়ে যায়। আমি দেরী উত্তরটি দ্বারা অনুপ্রাণিত সারি স্প্যান-ডেমোও তৈরি করেছি ।

Comments

আমি অনুরূপ সমাধান খুঁজছি তবে পরিবর্তে, আমার উপরের সারিতে 5 টি ঘর রয়েছে। নীচের সারিতে, আমার উপরে শীর্ষ সারির মতো 1 টি আকারের আকার প্রয়োজন। তারপরে একটি কোষ কলস্পান = ২ এবং অন্য কোষে কোলস্পান = ২ রয়েছে যা এটি নীচের সারিতে মোট 5 টি ঘর তৈরি করে। আপনার সমাধানের উপর ভিত্তি করে এখানে jsfiddle সমস্যা। কোন চিন্তা? jsfiddle.net/7wdza4ye/1

— বরুণ ভার্মা

@ ভারুনভির্মা, আপনাকে অবশ্যই 7 থেকে ৮ এর মধ্যে ফাঁকা ঘর যুক্ত করতে হবে। কেবলমাত্র <div class="cell"></div>কাজগুলি অন্তত অন্তত ফায়ারফক্সের সাথে যুক্ত করা উচিত। এই নকশাটি সহ, আপনাকে খালি ঘর (গুলি) দিয়ে প্যাড করতে হবে। উদাহরণস্বরূপ, আপনার যদি এটি ছিল যাতে সেল 7 কলসপান = 3 এবং 8 কোষটি স্বাভাবিক ছিল, তবে আপনার 7 এবং 8 কোষের মধ্যে দুটি খালি কোষের প্রয়োজন হবে যদি না আপনি অন্য কিছু ডিজাইন করেন (মার্জিন? একক কাস্টমাইজড ডিভ?) । এছাড়াও, 100px এবং 5 কোষের প্রস্থ জিনিসগুলিকে জটিল করে তোলে, কারণ শব্দগুলি CSS- কোষগুলিকে প্রসারিত করে, ওভারফ্লো-সেটিংসে কোনও পার্থক্য মনে হয় না। এছাড়াও আপনি পুনঃগণনা প্রয়োজন widthজন্য div.colspan>div>div।

— এফ -3000

এটা কাজ করেছে. ধন্যবাদ। আসলে, আমি সেল 8 এর পরে একটি খালি ঘর যুক্ত করেছি কারণ নীচের সীমানাটি প্রদর্শিত হচ্ছে না। এখানে সর্বশেষ: jsfiddle.net/7wdza4ye/3 । Cell থেকে ৮ এর মধ্যে কীভাবে সীমানা পাবেন তা নিশ্চিত ছিল? কোনও পরামর্শ? আপনার সাহায্যের জন্য ধন্যবাদ.

— বরুণ ভার্মা

@ ভারুনভির্মা, ক্রোমের সাহায্যে বাইরের সীমানাটি 8 এর পরে খালি ঘর ছাড়া অসম্পূর্ণ ছিল, সুতরাং এটি সত্যই প্রয়োজন। কোষ 7 ও 8 এর মধ্যে সীমান্ত যোগ করার জন্য সহজ উপায় এই হতে পারে: div.colspan{border-left:1px solid red}। এটিকে নিয়মের নীচে কোথাও স্থাপন করা দরকার যা Div.colspan সীমান্তহীন সেট করে, বা এটি উপড়ে দেওয়া হবে।

— এফ -3000

ধন্যবাদ @ এফ -3000 এটা সহায়ক ছিল। বিশ্রামের জন্য, এখানে এফ -3000 এর সমাধানের ভিত্তিতে সর্বশেষতম লিঙ্কটি দেওয়া হয়েছে: jsfiddle.net/7wdza4ye/4

— বরুণ ভার্মা

Answer 3

একটি সহজ সমাধান যা ক্রোম 30 এ আমার জন্য কাজ করে:

কলসপান সারিগুলির display: tableপরিবর্তে ব্যবহার করে অনুকরণ করা display: table-rowযায়:

.table {
    display: block;
}
.row {
    display: table;
    width: 100%;
}
.cell {
    display: table-cell;
}
.row.colspan2 {/* You'll have to add the 'colspan2' class to the row, and remove the unused <div class=cell> inside it */
    display: block;
}

একমাত্র ক্ষতি হ'ল সজ্জিত সারিগুলির ঘরগুলি বিভিন্ন টেবিল থেকে আসা অবস্থায় উল্লম্বভাবে সারিবদ্ধ হবে না।

Answer 4

আপনি যদি কোনও কলস্প্যান অনুকরণের জন্য সরাসরি কোনও সিএসএস উপায় সন্ধান করছেন তবে আপনি এটি ব্যবহার করতে পারেন display: table-caption।

.table {
  display: table;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  border: 1px solid #000;
}
.colspan2 {
  /* What to do here? */
  display: table-caption;
}

<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell colspan2">Cell</div>
    </div>
</div>

Comments

তুই আশ্চর্যরকম!

— রাজ কমল

প্রদর্শন ব্যবহার করে: টেবিল-ক্যাপশনটি সমস্ত কলাম বিস্তৃত হবে এবং এইচটিএমএল টেবিলের ক্যাপশন উপাদানটির মতো সারণীটির শীর্ষে সারিটি রাখবে, সুতরাং এটি সত্যিই কাজ করে না। আপনি যদি প্রথম বা শেষ সারিতে সমস্ত কলাম বিস্তৃত করতে চান তবেই।

— মিচিয়েল

Answer 5

সহজভাবে ব্যবহার করুন ক table।

টেবিলগুলি কেবলমাত্র যখন বিন্যাসের উদ্দেশ্যে ব্যবহৃত হয় তখন তা বোঝা যায়।

এটি ট্যাবুলার ডেটার মতো (ডাটাগুলির সারি / কলাম) বলে মনে হচ্ছে। অতএব আমি একটি ব্যবহারের পরামর্শ দেব table।

আরও তথ্যের জন্য এই প্রশ্নের আমার উত্তর দেখুন :

টেবিল হিসাবে ডিভগুলি দিয়ে একই জিনিস তৈরি করা

Comments

বিষয়টি হ'ল এটি ট্যাবুলার ডেটার জন্য নয়, তাই আমি কোনও টেবিল ব্যবহার করতে চাই না :)

— মাদারার ঘোস্ট

টেবিলের মতো হুবহু আচরণ করার জন্য সিএসএসিং কেন কেবল কোনও টেবিল ব্যবহারের চেয়ে পছন্দনীয় তা আমি পাই না। স্বীকার করা tr/ tdস্প্যাম সবচেয়ে সুন্দর এইচটিএমএল নয় তবে এটিই কি একমাত্র কারণ? প্রত্যেকেই বলেছেন যে টেবিলগুলি বিন্যাসকরণের জন্য ব্যবহার করার জন্য "বোঝানো" ছিল না, তবে ওয়েব অ্যাপ্লিকেশন সহ আজকের মানদণ্ডগুলির দ্বারা আমরা গ্রহণযোগ্য বিবেচনা করি এমন অর্ধেক জিনিসগুলি এইচটিএমএল নিজেই "বোঝানো" ছিল না।

— একটু

প্রায় এক বছর পরে, তবে - হালকা, আমি "টেবিলগুলি স্টাইলের বাইরে আছি" ব্যতীত কোনও কারণ ছাড়াই টেবিলগুলি এড়ানো লোকজনের সাথে আপনার জ্বালা ভাগ করে নিই। তবে আমি কয়েকটি প্রতিক্রিয়াশীল ডিজাইনে চলে আসছি যেখানে টেবিলটি টেবিল না হয়ে থাকা দরকারী, তাই এটি নিম্ন প্রস্থে পুনরায় সাজানো যেতে পারে। ডিভসের জন্য আমার কাছে কলস্পান নেই তা শেখার বিষয়টি হতাশাজনক।

— স্পিন

Answer 6

সিএসএসে কলামগুলি স্প্যান করার একটি উপায় এখানে আমি নিজের অবস্থার জন্য ব্যবহার করেছি।

https://jsfiddle.net/mb8npttu/

<div class='table'>
    <div class='row'>
        <div class='cell colspan'>
            spanning
        </div>
        <div class='cell'></div>
        <div class='cell'></div>
    </div>

    <div class='row'>
        <div class='cell'>1</div>
        <div class='cell'>2</div>
        <div class='cell'>3</div>
    </div>
</div>

<style>
    .table { display:table; }
    .row { display:table-row; }
    .cell { display:table-cell; }
    .colspan { max-width:1px; overflow:visible; }
</style>

Comments

আমি যে ফলাফল চেয়েছিলাম তা পেতে আমাকে বাড়িয়ে তুলতে .colspanহয়েছিল white-space: nowrap;, তবে এটি দুর্দান্ত কাজ করেছে।

— ক্ষেত্রলাইন

Answer 7

কলসপানটিকে পুরো টেবিলের প্রশস্ত করতে একটি সমাধান রয়েছে। আপনি এই কৌশলটি টেবিলের একটি অংশ কলস্প্যান করতে ব্যবহার করতে পারবেন না।

কোড:

    *{
      box-sizing: border-box;
    }
    .table {
        display: table;
        position: relative;
    }
    .row {
        display: table-row;
    }
    .cell {
        display: table-cell;
        border: 1px solid red;
        padding: 5px;
        text-align: center;
    }
    .colspan {
        position: absolute;
        left: 0;
        width: 100%;
    }
    .dummycell {
        border-color: transparent;
    }

<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell dummycell">&nbsp;</div>
        <div class="cell colspan">Cell</div>
    </div>
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
</div>

ব্যাখ্যা:

আমরা টেবিলের সম্পূর্ণ প্রস্থ তৈরি করতে কলস্পানে অবস্থান পরম ব্যবহার করি। টেবিলে নিজেই অবস্থানের তুলনামূলক প্রয়োজন। সারিগুলির উচ্চতা বজায় রাখার জন্য আমরা একটি ডমিসিল ব্যবহার করি, অবস্থান নিখুঁত নথির প্রবাহকে অনুসরণ করে না।

অবশ্যই আপনি এই দিনগুলি মোকাবেলা করতে ফ্লেক্সবক্স এবং গ্রিড ব্যবহার করতে পারেন।

Answer 8

সিএসএস

.tablewrapper {
  position: relative;
}
.table {
  display: table;
  position: relative
}
.row {
  display: table-row;
}
.cell {
  border: 1px solid red;
  display: table-cell;
}
.cell.empty
{
  border: none;
  width: 100px;
}
.cell.rowspanned {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
}
.cell.colspan {
  position: absolute;
  left: 0;
  right: 0;
}

এইচটিএমএল

<div class="tablewrapper">
  <div class="table">
    <div class="row">
      <div class="cell rowspanned">
        Center
      </div>
      <div class="cell">
        Top right
      </div>
    </div>
    <div class="row">
      <div class="cell empty"></div>
      <div class="cell colspan">
        Bottom right
      </div>
    </div>
  </div>
</div>

কোড

Answer 9

এটি কেবল খাঁটি সিএসএস এবং পাঠ্যটিকে "নকল" কলস্প্যান জুড়ে কেন্দ্র করে করা যেতে পারে।

কৌশলটি হ'ল সারিগুলিকে সেট করা position:relative, তারপরে আপনি "ফাঁকা ডিভগুলি" রাখতে rowযেখানে আপনি তৈরি করতে চান colspan(তাদের heightকাজ করার জন্য অবশ্যই তাদের অবশ্যই থাকতে হবে ), cellসামগ্রীটি যেখানে রয়েছে সেটিকে সেট করুন display:gridএবং শেষ পর্যন্ত position:absoluteউপাদানটিতে প্রয়োগ করুন কক্ষের অভ্যন্তরে (এবং এটি কেন্দ্র হিসাবে আপনি অন্য কোনও পরম উপাদানকে কেন্দ্র করতে পারেন)।

 .table {
        display: table;
  }
  .row {
      display: table-row;
      position: relative;
  }
  .cell {
      display: table-cell;
      background-color: blue;
      color: white;
      height: 26px;
      padding: 0 8px;
  } 
  .colspan2 {
      display: grid;
  }
  .colspan2 p {
    position:absolute;
    left: 50%;
    transform:translateX(-50%);
    margin: 0;
  }

<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell colspan2"><p>Cell</p></div>
        <div class="cell"></div>
    </div>
</div>

Answer 10

উপযুক্ত ডিভি ক্লাস এবং সিএসএস অ্যাট্রিবিউট ব্যবহার করে, আপনি কলস্প্যান এবং সারিস্প্যানের পছন্দসই প্রভাবগুলি নকল করতে পারেন।

সিএসএস এখানে

.table {
    display:table;
}

.row {
    display:table-row;
}

.cell {
    display:table-cell;
    padding: 5px;
    vertical-align: middle;
}

এখানে নমুনা এইচটিএমএল

<div class="table">
    <div class="row">
        <div class="cell">
            <div class="table">
                <div class="row">
                    <div class="cell">X</div>
                    <div class="cell">Y</div>
                    <div class="cell">Z</div>
                </div>
                <div class="row">
                    <div class="cell">2</div>
                    <div class="cell">4</div>
                    <div class="cell">6</div>
                </div>
            </div>
        </div>
        <div class="cell">
            <div class="table">
                <div class="row">
                    <div class="cell">
                        <div class="table">
                            <div class="row">
                                <div class="cell">A</div>
                            </div>
                            <div class="row">
                                <div class="cell">B</div>
                            </div>
                        </div>
                    </div>
                    <div class="cell">
                        ROW SPAN
                    </div>    
                </div>
            </div>
        </div>
    </div>
</div>    

আমি উভয় প্রশ্নের এবং বেশিরভাগ প্রতিক্রিয়াগুলিতে যা দেখছি তা থেকে লোকেরা কি ভুলে গেছে বলে মনে হচ্ছে যে কোনও প্রদত্ত ডিভের মধ্যে "টেবিল-সেল" হিসাবে অভিনয় করা আপনি একটি এম্বেডেড টেবিলের মতো অভিনয় করে এমন একটি অন্য ডিভ sertোকাতে পারেন, এবং প্রক্রিয়াটি শুরু করতে পারেন ওভার।

*** এটি চটকদার নয়, তবে যারা এই ধরণের ফর্ম্যাটিংয়ের সন্ধান করছেন তাদের পক্ষে এটি কাজ করে এবং তারা ট্যাবলেটগুলি এড়াতে চান। এটি যদি ডেটা বিন্যাসের জন্য হয় তবে টেবলগুলি এখনও HTML5 এ কাজ করে।

আশা করি, এটি কাউকে সাহায্য করবে।

Comments

প্রথমত, এইচটিএমএল 5 এর সম্পূর্ণ সমর্থন রয়েছে <table>- এটি ঠিক যে লোকেরা ভিজ্যুয়াল বিন্যাসের জন্য এটি ব্যবহার করা এড়ানো উচিত । কাঠামোগত ডেটা প্রদর্শনের জন্য এটি ব্যবহার করা যেখানে এটি ব্যবহার করা উচিত , অন্যথায় ( যেমন নিছক উদাহরণ হিসাবে) কোনও কাজের জন্য আরও ভাল ফিট না করে। দ্বিতীয়ত, বাবু, 4 টেবিল। আপনি টেবিলের উপর আকর্ষণীয় প্রশ্ন আনলেন (রোউস্প্যান), তবে আপনার উত্তর পরিবর্তে ব্যবহারের জন্য কাঁদে । আমি দেখতে চাই যে আমার সমাধান এখানে কীভাবে কাজ করে ...<ul><table>

— F-3000

আমি আমার আগের মন্তব্যটি সম্পাদনা করব, তবে সময়সীমার হিট। এটি নিজে দেখুন ।

— এফ -3000

আপনার প্রতিক্রিয়ার জন্য ধন্যবাদ। আমি কখনও বলিনি যে এইচটিএমএল 5 টেবিলগুলি সমর্থন করে না। অনেক লোক কেবল এড়াতে চাইছেন। কখনও কখনও, ওয়েব-অ্যাপ লেখার সময় (কেবলমাত্র কোনও বিজ্ঞাপন-ধরণের পৃষ্ঠার বিপরীতে), আপনার বোতাম এবং / অথবা নিয়ন্ত্রণের জন্য নিয়মিত লেআউট প্রয়োজন need

— জেআরসি

Answer 11

আপনি কলস্পান সামগ্রীর অবস্থানটিকে "আপেক্ষিক" এবং সারিটিকে "পরম" হিসাবে সেট করতে পারেন:

.table {
    display: table;
}
.row {
    display: table-row;
    position: relative;
}
.cell {
    display: table-cell;
}
.colspan2 {
    position: absolute;
    width: 100%;
}

Answer 12

আপনি বর্তমানে এটি অর্জন করতে পারবেন না।

এএফআইকে এটি সিএসএস টেবিলগুলি আচ্ছাদিত করবে , একটি স্পেসিফিকেশন যা বর্তমানে "কাজ চলছে" অবস্থায় রয়েছে বলে মনে হচ্ছে।

Answer 13

আপনি এই সমাধানটি চেষ্টা করতে পারেন, যেখানে আপনি ডিভ https://codepen.io/pkachhia/pen/JyWMxY ব্যবহার করে কলস্পান প্রয়োগ করতে পারেন

এইচটিএমএল:

<div class="div_format">
            <div class="divTable">
                <div class="divTableBody">
                    <div class="divTableRow">
                        <div class="divTableCell cell_lable">Project Name</div>
                        <div class="divTableCell cell_value">: Testing Project</div>
                        <div class="divTableCell cell_lable">Project Type</div>
                        <div class="divTableCell cell_value">: Web application</div>
                    </div>
                    <div class="divTableRow">
                        <div class="divTableCell cell_lable">Version</div>
                        <div class="divTableCell cell_value">: 1.0.0</div>
                        <div class="divTableCell cell_lable">Start Time</div>
                        <div class="divTableCell cell_value">: 2016-07-10 11:00:21</div>
                    </div>
                    <div class="divTableRow">
                        <div class="divTableCell cell_lable">Document Version</div>
                        <div class="divTableCell cell_value">: 2.0.0</div>
                        <div class="divTableCell cell_lable">End Time</div>
                        <div class="divTableCell cell_value">: 2017-07-10 11:00:23</div>
                    </div>
                    <div class="divTableRow">
                        <div class="divTableCell cell_lable">Document Revision</div>
                        <div class="divTableCell cell_value">: 3</div>
                        <div class="divTableCell cell_lable">Overall Result</div>
                        <div class="divTableCell cell_value txt_bold txt_success">: Passed</div>
                    </div>                          
                </div>
                <div class="divCaptionRow">
                    <div class="divCaptionlabel">Description</div>
                    <div class="divCaptionValue">: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</div>
                </div>
            </div>
        </div>

সিএসএস:

body {
                font-family: arial
            }
            * {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box
            }
            .div_format {
                width: 100%;
                display: inline-block;
                position: relative
            }           
            .divTable {
                display: table;
                width: 100%;            
            }
            .divTableRow {
                display: table-row
            }
            .divTableHeading {
                background-color: #EEE;
                display: table-header-group
            }
            .divTableCell,
            .divTableHead {
                display: table-cell;
                padding: 10px
            }
            .divTableHeading {
                background-color: #EEE;
                display: table-header-group;
                font-weight: bold
            }
            .divTableFoot {
                background-color: #EEE;
                display: table-footer-group;
                font-weight: bold
            }
            .divTableBody {
                display: table-row-group
            }
            .divCaptionRow{
                display: table-caption;
                caption-side: bottom;
                width: 100%;
            }
            .divCaptionlabel{
                caption-side: bottom;
                display: inline-block;
                background: #ccc;
                padding: 10px;
                width: 15.6%;
                margin-left: 10px;
                color: #727272;
            }
            .divCaptionValue{
                float: right;
                width: 83%;
                padding: 10px 1px;
                border-bottom: 1px solid #dddddd;
                border-right: 10px solid #fff;
                color: #5f5f5f;
                text-align: left;
            }

            .cell_lable {
                background: #d0d0d0;
                border-bottom: 1px solid #ffffff;
                border-left: 10px solid #ffffff;
                border-right: 10px solid #fff;
                width: 15%;
                color: #727272;
            }
            .cell_value {
                border-bottom: 1px solid #dddddd;
                width: 30%;
                border-right: 10px solid #fff;   
                color: #5f5f5f;
            }

Answer 14

এটি যদি কোনও পুরানো প্রশ্ন হয় তবে আমি এই সমস্যার সমাধানটি আমার সাথে ভাগ করে নিতে চাই।

<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell colspan">
            <div class="spanned-content">Cell</div>
        </div>
    </div>
</div>

<style>
    .table {
        display: table;
    }
    .row {
        display: table-row;
    }
    .cell {
        display: table-cell;
    }
    .colspan:after {
        /* What to do here? */
        content: "c";
        display: inline;
        visibility: hidden;
    }
    .spanned-content {
        position: absolute;
    }
</style>

এখানে একটি ঝাঁকুনি । এটি আসলে একটি স্প্যান নয়, এবং সমাধানটি কিছুটা হ্যাকি, তবে এটি কিছু পরিস্থিতিতে কার্যকর। ক্রোম 46, ফায়ারফক্স 31 এবং আইই 11 তে পরীক্ষিত।

আমার ক্ষেত্রে, কলামগুলির প্রস্থ রেখে ডেটা উপ-বিভাগগুলিকে শিরোনাম প্রদান করে আমাকে কিছু নন-সারণী তথ্য একটি সারণী উপায়ে উপস্থাপন করতে হয়েছিল।

Comments

অবশ্যই, আপনি সর্বদা বুটস্ট্র্যাপের মতো গ্রিড সমাধানের উপর নির্ভর করতে পারেন। এই বিশেষ ক্ষেত্রে, আমার সত্যিকারের অটো-প্রস্থের দরকার ছিল যা প্রদর্শন: টেবিলটি সরবরাহ করে।

— গ্যাব্রিয়েল

এছাড়াও, আপনি যদি ছড়িয়ে পড়া সামগ্রীটিকে কিছু ব্যাকগ্রাউন্ড রঙ দিতে চান তবে আপনাকে নিজের টিআর পূর্ণ পরিমাণ টিডিএস দিয়ে পূরণ করতে হবে :(

— গ্যাব্রিয়েল

আমি একটি টেবিল তৈরি করে শেষ করেছি এবং "ট্যাবুলার ডেটা" of

— গ্যাব্রিয়েল

Answer 15

নীড় কলাম স্প্যান করতে নেস্টেড টেবিল ব্যবহার করুন ...

<div class="table">
  <div class="row">
    <div class="cell">
      <div class="table">
        <div class="row">
          <div class="cell">Cell</div>
          <div class="cell">Cell</div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="cell">Cell</div>
  </div>
</div>

অথবা 2 টি সারণী ব্যবহার করুন যেখানে কলাম স্প্যানটি পুরো সারিটিকে কভার করে ...

<div class="table">
  <div class="row">
    <div class="cell">Cell</div>
    <div class="cell">Cell</div>
  </div>
</div>

<div class="table">
  <div class="row">
    <div class="cell">Cell</div>
  </div>
</div>

Comments

প্রশ্ন ছিল, সিএসএস ব্যবহার করে এটি কীভাবে করা যায়।

— এন্নো গ্রেপার

আমি দুঃখিত, তবে এটি সত্যিই খারাপ ধারণা বলে মনে হচ্ছে।

— মাদারার ঘোস্ট