সিএসএসে এইচটিএমএল কলস্প্যান

Question

আমি নিম্নলিখিতগুলির মতো লেআউটটি নির্মাণের চেষ্টা করছি:

+---+---+---+
|   |   |   |
+---+---+---+
|           |
+-----------+

যেখানে নীচের অংশটি উপরের সারির স্থানটি পূরণ করছে।

এটি যদি প্রকৃত টেবিল হয় তবে আমি সহজেই এটিকে সম্পাদন করতে পারতাম <td colspan="3">, তবে আমি কেবল একটি টেবিলের মতো লেআউট তৈরি করছি , আমি <table>ট্যাগ ব্যবহার করতে পারি না । সিএসএস ব্যবহার করে এটি কি সম্ভব?

Comments

সর্বোত্তম সমাধানটি টেবিলে কী চলছে তার উপর নির্ভর করে। যদি এটি ডেটা (কোনও টেবিলে অন্তর্ভুক্ত এমন কিছু) থাকে তবে একটি সারণী ব্যবহার করুন। আপনি যদি পৃষ্ঠার বিন্যাস নিয়ন্ত্রণ করতে কোনও সারণী ব্যবহার করে থাকেন তবে নীচের HTML + সিএসএস সমাধানগুলির মধ্যে একটি ভাল।

— mwcz

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

— ডিজিটাল ডিজাইনডিজে

সিএসএস সম্পর্কে ভুলে যান আপনি যদি টেবুলার ডেটা প্রদর্শন করেন তবে এটি অবশ্যই জানতে পারে যে এটি কয়টি কলাম বিস্তৃত হবে। colspanবৈশিষ্ট্যটি ব্যবহার করুন

— তিহোমির মিটকভ

বুটস্ট্র্যাপ থেকে বুটস্ট্র্যাপ বা কাস্টমাইজড গ্রিড দিয়ে আমি এটি করব

— অরুণ প্রসাদ ES

আপনি যদি CSS3 ব্যবহার করছেন তবে আপনি কলামস্প্যান ব্যবহার করতে পারেন। <টিডি কলস্পান = "#"> এর বিপরীতে, আপনার কাছে কলামগুলির সংখ্যা নির্ধারণ করার বিকল্প নেই তবে আপনি সমস্ত কলামগুলি স্প্যান করতে পারবেন। w3schools.com/cssref/css3_pr_column-span.asp

— মিস্টিডন

Answer 1

এর জন্য কোনও সহজ, মার্জিত সিএসএস অ্যানালগ নেই colspan।

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

Comments

টেবিলগুলি কাঠামোগত উপাদান এবং কেবল কলস্পান ব্যবহার করে এর উপস্থিতি পরিবর্তিত হয় তার অর্থ এটি নয়। CSS স্টাইল এলিমেন্টের জন্য ব্যবহৃত হয় এবং স্ট্রাকচার পরিবর্তন না করে। ডাব্লু

— রব

রব, আপনার অবস্থানটি বুঝুন, তবে ডাব্লু 3 সি সুপারিশগুলি দেখুন - বিশেষ করে পুরো টেবিলের দৃষ্টান্তের সাথে সম্পর্কিত - এবং আপনি দেখতে পাবেন যে তাদের বিবেচনার অংশটি ছিল অবশ্যই টেবিলগুলির উপস্থাপনা । এই ধারণাটি যে টেবিলগুলি বিশুদ্ধরূপে কাঠামো হিসাবে ধারণা করা হয়েছিল এমন একটি সমসাময়িক কল্পকাহিনী যা আমি মনে করি আমরা ছড়িয়ে পড়া বন্ধ করতে আরও ভালভাবে পরিবেশন করব। মুল বক্তব্যটি হ'ল আমাদের টেবিলগুলি সম্পর্কে গোপনীয় হওয়া বন্ধ করা উচিত। তারা সর্বদা উপস্থাপনা বলে আমার পক্ষে ভুল হবে এবং তারা সবসময় কাঠামো বলে আপনার পক্ষে ঠিক ততটাই ভুল । বাস্তবতা কেবল কাটা-শুকনো নয়।

— ডেভিড

আপনার উত্তর দেখে মনে হচ্ছে হয় জনপ্রিয় উত্তর। :) অ্যান্টি-টেবিল ডগমা (যা আমি কিনেছি) খুব কঠোর তা জানতে পেরে আমি আনন্দিত। আমি আমার উত্তরটি কেবল অনর্থক হয়ে দাঁড়িয়েছি কারণ আমি এখনও মনে করি colspanযে কাজের জন্য সঠিক সরঞ্জাম। আমার উত্তরটি ছিল 75% সঠিক এবং আপনার 100% সঠিক। আপনার আবার ফিরে আসা উচিত।

— mwcz

2 বছর পরে, আমি এটি গুগল করেছিলাম এবং লেখককে ভোট দিতে চেয়েছিলাম কিন্তু এটি "আপনার নিজের পোস্টের জন্য ভোট দিতে পারে না" এবং আমি বুঝতে পেরেছিলাম যে এটিই আমি, হ্যাঁ। আমি এটির জন্য গ্রহণযোগ্য সমাধানটি পরিবর্তন করার সিদ্ধান্ত নিয়েছি কারণ আমার কাছে মনে হয় এটির আরও ভাল তথ্য রয়েছে।

— টাওয়ার

এটি অন্য কিছু (অনির্দিষ্ট) উত্তর সম্পর্কে একটি ছোট্ট রচনা, জিজ্ঞাসিত প্রশ্নের উত্তর নয়।

— Jukka K. Korpela

Answer 2

আমি যতদূর জানি সিএসএসে কোনও কলস্পান নেই, তবে column-spanঅদূর ভবিষ্যতে মাল্টি কলাম লেআউট থাকবে তবে এটি সিএসএস 3 এ কেবল একটি খসড়া হওয়ায় আপনি এটি এখানে দেখতে পারেন । যাইহোক আপনি টেবিলের মতো প্রদর্শন ব্যবহার করে divএবং spanএকসাথে কাজ করতে পারেন ।

এটি এইচটিএমএল হবে:

<div class="table">
  <div class="row">
    <span class="cell red first"></span>
    <span class="cell blue fill"></span>
    <span class="cell green last"></span>
  </div>
</div>
<div class="table">
  <div class="row">
    <span class="cell black"></span>
  </div>
</div>

এবং এটি সিএসএস হবে:

  /* this is to reproduce table-like structure
     for the sake of table-less layout. */
  .table { display:table; table-layout:fixed; width:100px; }
  .row { display:table-row; height:10px; }
  .cell { display:table-cell; }

  /* this is where the colspan tricks works. */
  span { width:100%; }

  /* below is for visual recognition test purposes only. */
  .red { background:red; }
  .blue { background:blue; }
  .green { background:green; }
  .black { background:black; }

  /* this is the benefit of using table display, it is able 
     to set the width of it's child object to fill the rest of 
     the parent width as in table */
  .first { width: 20px; }
  .last { width: 30px; }
  .fill { width: 100%; }

এই কৌশলটি ব্যবহারের একমাত্র কারণ হ'ল table-layoutআচরণের সুবিধা অর্জন করা , আমি কেবলমাত্র ডিভ এবং স্পেন প্রস্থকে নির্দিষ্ট শতাংশে সেট করে আমাদের ডিজাইনের প্রয়োজনীয়তা পুরোপুরি পূরণ না করে তবে আমি এটি ব্যবহার করি।

তবে যদি আপনার table-layoutআচরণ থেকে কোনও উপকারের প্রয়োজন না হয় , তবে দুরাইলাইয়ের উত্তরটি আপনার পক্ষে যথেষ্ট suit

Comments

হ্যাঁ, তবে কিছুটা ঠিক করুন: পরিবর্তে .span { ...এটি হওয়া উচিত span { ...।

— স্লাভিক মেল্টসার

divট্যাবুলার ডেটা প্রদর্শন করতে ট্যাগ ব্যবহার করা tableপৃষ্ঠার লেআউট নিয়ন্ত্রণ করতে যেমন ব্যবহার করা খারাপ

— তিহোমির মিতকভ

@ টিচোমিরমিটকভ নির্ভর করে আপনি লেআউট পরিবর্তন করতে প্রতিক্রিয়াশীল ডিজাইন ব্যবহার করছেন কিনা - যে ক্ষেত্রে কখনও কখনও এটি বেশ ভালভাবে কাজ করতে পারে।

— সাইমন_উইভার

এটি যে প্রশ্নের উত্তর দিয়েছে তাতে একে অপরের পরে মূলত দুটি টেবিল রয়েছে বলে এটি সত্যই প্রশ্নের উত্তর দেয় না। ("টেবিল" ক্লাসের সাথে Ietwo ডিভস)

— শীতকাল

Answer 3

আর একটি পরামর্শ হ'ল সম্পূর্ণ টেবিলের পরিবর্তে ফ্লেক্সবক্স ব্যবহার করা। এটি অবশ্যই একটি "আধুনিক ব্রাউজার" বিষয়, তবে আসুন, এটি 2016;)

মূল পোস্টটি ২০১০ সাল থেকে, আজকাল এটির উত্তর খুঁজছেন তাদের পক্ষে অন্তত এটি বিকল্প সমাধান হতে পারে।

এখানে দুর্দান্ত গাইড: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.table {
  border: 1px solid red;
  padding: 2px;
  max-width: 300px;
  display: flex;
  flex-flow: row wrap;
}
.table-cell {
  border: 1px solid blue;
  flex: 1 30%;
}
.colspan-3 {
  border: 1px solid green;
  flex: 1 100%;
}

<div class="table">
  <div class="table-cell">
    row 1 - cell 1
  </div>
  <div class="table-cell">
    row 1 - cell 2
  </div>
  <div class="table-cell">
    row 1 - cell 3
  </div>
  <div class="table-cell colspan-3">
    row 2 - cell 1 (spans 3 columns)
  </div>
</div>

Answer 4

<div style="width: 100%;">
    <div style="float: left; width: 33%;">Row 1 - Cell 1</div>
    <div style="float: left; width: 34%;">Row 1 - Cell 2</div>
    <div style="float: left; width: 33%;">Row 1 - Cell 3</div>
</div>
<div style="clear: left; width: 100%;">
Row 2 - Cell 1
</div>

Comments

আমি কোষগুলির প্রস্থ জানতে পারি না।

— টাওয়ার

তারপরে প্রস্থ রাখবেন না। এটা কোন ব্যাপার না। তবে আপনি যদি তাদের একই প্রস্থে ছড়িয়ে দিতে চান তবে দুটি প্রধান ডিভগুলির একই প্রস্থ থাকা দরকার।

— ডাস্টিন লাইন

আপনি প্রস্থটি ব্যবহার করতে পারেন: ক্যালক (100% / 3) যা মাঝারি 1% আরও দেওয়ার চেয়ে কিছুটা আরও ভাল করবে

— ii iml0sto1

Answer 5

এটি সিএসএসের পরিধির অংশ নয়। colspanপৃষ্ঠার সামগ্রীর কাঠামো বর্ণনা করে বা টেবিলের ডেটাতে কিছু অর্থ দেয় যা এইচটিএমএল এর কাজ।

Comments

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

— কোলস্পান

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

— mwcz

Answer 6

একটি আপ-টু-ডেট উত্তর সরবরাহ করার জন্য: আজ এটি করার সর্বোত্তম উপায় হ'ল সিএসএস গ্রিড লেআউটটি এর মতো ব্যবহার করা:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "top-left top-middle top-right"
    "bottom bottom bottom"
}

.item-a {
  grid-area: top-left;
}
.item-b {
  grid-area: top-middle;
}
.item-c {
  grid-area: top-right;
}
.item-d {
  grid-area: bottom;
}

এবং এইচটিএমএল

<div class="item-a">1</div>
<div class="item-b">2</div>
<div class="item-c">3</div>
<div class="item-d">123</div>

Answer 7

আপনি http://960.gs/ এর মতো গ্রিড সিস্টেম ব্যবহার করার চেষ্টা করতে পারেন

আপনার কোডটি এই জাতীয় কিছু হবে, ধরে নিয়ে আপনি "12 কলাম" লেআউটটি ব্যবহার করছেন:

<div class="container_12">
<div class="grid_4">1</div><div class="grid_4">2</div><div class="grid_4">3</div>
<div class="clear"></div>
<div class="grid_12">123</div>
</div>

Answer 8

display: table-cell; width: 1%;আপনার টেবিল ঘর উপাদান যুক্ত করার চেষ্টা করুন ।

.table-cell {
  display: table-cell;
  width: 1%;
  padding: 4px;
  border: 1px solid #efefef;
}

<div class="table">
  <div class="table-cell">one</div>
  <div class="table-cell">two</div>
  <div class="table-cell">three</div>
  <div class="table-cell">four</div>
</div>
<div class="table">
  <div class="table-cell">one</div>
  <div class="table-cell">two</div>
  <div class="table-cell">three</div>
  <div class="table-cell">four</div>
</div>
<div class="table">
  <div class="table-cell">one</div>
</div>

Comments

কিভাবে এটি সাহায্য করতে যাচ্ছে? সারণীর মূল ধারণাটি হ'ল প্রতিটি সারিতে অভিন্ন কক্ষ রয়েছে। যদি সারিগুলির একটিতে একটি ঘর থাকে যা সফলভাবে "প্রস্থ: 1%" প্রয়োগ করে, তবে সমস্ত সারিটিতে সেই কলামটি "প্রস্থ: 1%" হিসাবে থাকবে। "কলস্পান" এর মূলটি হ'ল স্থির প্রস্থের কলামগুলির 2 (বা আরও) নেওয়া এবং তাদের একত্রিত করে একটি সংযুক্ত প্রস্থ পান।

— আইএএম_এল_এক্স

Answer 9

আমি কিছু সাফল্য পেয়েছি, যদিও এটি কাজ করার জন্য কয়েকটি বৈশিষ্ট্যের উপর নির্ভর করে:

table-layout: fixed border-collapse: separate

এবং ঘর 'প্রস্থগুলি' যা সহজেই বিভক্ত / স্প্যান হয়, অর্থাত্ 25% প্রস্থের 4 x কোষ:

.div-table-cell,
* {
  box-sizing: border-box;
}

.div-table {
  display: table;
  border: solid 1px #ccc;
  border-left: none;
  border-bottom: none;
  table-layout: fixed;
  margin: 10px auto;
  width: 50%;
  border-collapse: separate;
  background: #eee;
}

.div-table-row {
  display: table-row;
}

.div-table-cell {
  display: table-cell;
  padding: 15px;
  border-left: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  text-align: center;
  background: #ddd;
}

.colspan-3 {
  width: 300%;
  display: table;
  background: #eee;
}

.row-1 .div-table-cell:before {
  content: "row 1: ";
}

.row-2 .div-table-cell:before {
  content: "row 2: ";
}

.row-3 .div-table-cell:before {
  content: "row 3: ";
  font-weight: bold;
}

.div-table-row-at-the-top {
  display: table-header-group;
}

<div class="div-table">

  <div class="div-table-row row-1">

    <div class="div-table-cell">Cell 1</div>
    <div class="div-table-cell">Cell 2</div>
    <div class="div-table-cell">Cell 3</div>

  </div>

  <div class="div-table-row row-2">

    <div class="div-table-cell colspan-3">
      Cor blimey he's only gone and done it.
    </div>

  </div>

  <div class="div-table-row row-3">

    <div class="div-table-cell">Cell 1</div>
    <div class="div-table-cell">Cell 2</div>
    <div class="div-table-cell">Cell 3</div>

  </div>

</div>

https://jsfiddle.net/sfjw26rb/2/

এছাড়াও, প্রদর্শন প্রয়োগ করা: টেবিল-শিরোলেখ-গোষ্ঠী বা টেবিল-পাদচরণ-গোষ্ঠী 'সারণী'র উপরে / নীচে' সারি 'উপাদানগুলিকে জাম্প করার একটি সহজ উপায়।

Answer 10

আপনি যদি ডিভ এবং স্প্যান ব্যবহার করেন তবে ডেটাগ্রিড-টেবিল সারিতে ভলিউম বেশি হলে এটি আরও কোড আকার ধারণ করবে। নীচের এই কোডটি সমস্ত ব্রাউজারে চেক করা আছে

এইচটিএমএল:

<div id="gridheading">
<h4>Sl.No</h4><h4 class="big">Name</h4><h4>Location</h4><h4>column</h4><h4>column</h4><h4>column</h4><h4>Amount(Rs)</h4><h4>View</h4><h4>Edit</h4><h4>Delete</h4> 
</div>
<div class="data"> 
<h4>01</h4><h4 class="big">test</h4><h4>TVM</h4><h4>A</h4><h4>I</h4><h4>4575</h4><h4>4575</h4></div>
<div class="data"> 
<h4>01</h4><h4 class="big">test</h4><h4>TVM</h4><h4>A</h4><h4>I</h4><h4>4575</h4><h4>4575</h4></div>

সিএসএস:

#gridheading {
    background: #ccc;
    border-bottom: 1px dotted #BBBBBB;
    font-size: 12px;
    line-height: 30px;
    text-transform: capitalize;
}
.data {
    border-bottom: 1px dotted #BBBBBB;
    display: block;
    font-weight: normal;
    line-height: 20px;
    text-align: left;
    word-wrap: break-word;
}
 h4 {
    border-right: thin dotted #000000;
    display: table-cell;
    margin-right: 100px;
    text-align: center;
    width: 100px;
    word-wrap: break-word;
}
.data .big {
    margin-right: 150px;
    width: 200px;
}

Answer 11

column-span: all; /* W3C */
-webkit-column-span: all; /* Safari & Chrome */
-moz-column-span: all; /* Firefox */
-ms-column-span: all; /* Internet Explorer */
-o-column-span: all; /* Opera */

http://www.quackit.com/css/css3/properties/css_column-span.cfm

Comments

পর্যাপ্ত সমর্থন নেই ...

— আইই 8

ওপি একটি table-cellস্প্যান একাধিক টেবিল কলাম রাখতে চায় । column-spanকলাম-লেআউট নিয়ন্ত্রণ করার জন্য। যা আপনাকে বিভিন্ন কলামে পাঠ্য প্রবাহিত করতে দেয়, সংবাদপত্রগুলি যেভাবে করে।

— ক্রিস ওয়েসলিং

প্রকৃতপক্ষে - যদিও এটি প্রদর্শনে ব্যবহার করা সত্যিই ভাল হবে: টেবিল-সেল; : উপাদান, এটি শুধুমাত্র CSS-কলামকে প্রযোজ্য jsfiddle.net/mk0rrLc3/1

— মার্ক

@ মার্ক-- কলাম-স্প্যান পিতামাতার উপর সংজ্ঞায়িত কলাম-গণনা সম্পত্তি সহ ব্যবহৃত হয়। এটি প্রদর্শন ধরণের পরিবর্তন করার প্রয়োজন হয় না। এছাড়াও, কলাম-স্প্যানটি কেবল 1 বা সমস্তকে মান হিসাবে গ্রহণ করতে পারে, এটি ভগ্নাংশের অনুমতি দেয় না, সুতরাং "কলাম-স্প্যান: 2", যেমন আপনার ফিডলে দেখা যায়, সম্পত্তিটির বৈধ ব্যবহার নয়।

— মিস্টিডন

Answer 12

আপনি যদি এখানে এসে থাকেন কারণ আপনাকে colspanঅ্যাট্রিবিউটটি চালু বা বন্ধ করতে হবে (মোবাইল বিন্যাসের জন্য বলুন):

গুলিটির সদৃশ করুন <td>এবং কেবল পছন্দসইগুলির সাথে এটি দেখান colspan:

table.colspan--on td.single {
  display: none;
}

table.colspan--off td.both {
  display: none;
}

<!-- simple table -->
<table class="colspan--on">
  <thead>
    <th>col 1</th>
    <th>col 2</th>
  </thead>
  <tbody>
    <tr>
      <!-- normal row -->
      <td>a</td>
      <td>b</td>
    </tr>
    <tr>
      <!-- the <td> spanning both columns -->
      <td class="both" colspan="2">both</td>

      <!-- the two single-column <td>s -->
      <td class="single">A</td>
      <td class="single">B</td>
    </tr>
    <tr>
      <!-- normal row -->
      <td>a</td>
      <td>b</td>
    </tr>
  </tbody>
</table>
<!--
that's all
-->

 

<!--
stuff only needed for making this interactive example looking good:
-->
<br><br>
<button onclick="toggle()">Toggle colspan</button>
<script>/*toggle classes*/var tableClasses = document.querySelector('table').classList;
function toggle() {
  tableClasses.toggle('colspan--on');
  tableClasses.toggle('colspan--off');
}
</script>
<style>/* some not-needed styles to make this example more appealing */
td {text-align: center;}
table, td, th {border-collapse: collapse; border: 1px solid black;}</style>

Answer 13

সিএসএসের বৈশিষ্ট্যগুলি "কলাম-গণনা", "কলাম-ফাঁক", এবং "কলাম-স্প্যান" এটি এমনভাবে করতে পারে যা সিউডো-টেবিলের সমস্ত কলামকে একই মোড়কের ভিতরে রাখে (এইচটিএমএল সুন্দর এবং ঝরঝরে থাকে)।

কেবলমাত্র সতর্কতা হ'ল আপনি কেবল 1 টি কলাম বা সমস্ত কলাম সংজ্ঞায়িত করতে পারেন এবং কলাম-স্প্যানটি ফায়ারফক্সে এখনও কাজ করে না, তাই এটি সঠিকভাবে প্রদর্শিত হবে তা নিশ্চিত করার জন্য কিছু অতিরিক্ত সিএসএস প্রয়োজনীয় necessary https://www.w3schools.com/css/css3_multiple_columns.asp

.split-me {
  -webkit-column-count: 3;
  -webkit-column-gap: 0;
  -moz-column-count: 3;
  -moz-column-gap: 0;
  column-count: 3;
  column-gap: 0;
}

.cols {
  /* column-span is 1 by default */
  column-span: 1;
}

div.three-span {
  column-span: all !important;
}

/* alternate style for column-span in Firefox */
@-moz-document url-prefix(){
  .three-span {
    position: absolute;
    left: 8px;
    right: 8px;
    top: auto;
    width: auto;
  }
}


    

<p>The column width stays fully dynamic, just like flex-box, evenly scaling on resize.</p>

<div class='split-me'>
  <div class='col-1 cols'>Text inside Column 1 div.</div>
  <div class='col-2 cols'>Text inside Column 2 div.</div>
  <div class='col-3 cols'>Text inside Column 3 div.</div>
  <div class='three-span'>Text div spanning 3 columns.</div>
</div>



  <style>
/* Non-Essential Visual Styles */

html * { font-size: 12pt; font-family: Arial; text-align: center; }
.split-me>* { padding: 5px; } 
.cols { border: 2px dashed black; border-left: none; }
.col-1 { background-color: #ddffff; border-left: 2px dashed black; }
.col-2 { background-color: #ffddff; }
.col-3 { background-color: #ffffdd; }
.three-span {
  border: 2px dashed black; border-top: none;
  text-align: center; background-color: #ddffdd;
}
  </style>

Answer 14

আমি এখানে এসেছি কারণ বর্তমানে ওয়ার্ডপ্রেস টেবিল ব্লকটি কলস্প্যান প্যারামিটার সমর্থন করে না এবং আমি ভেবেছিলাম যে সিএসএস ব্যবহার করে আমি এটি প্রতিস্থাপন করব। কলামগুলি একই প্রস্থের সমান বলে ধরে নিয়ে এটি আমার সমাধান ছিল:

table {
  width: 100%;
}

table td {
  width: 50%;
  background: #dbdbdb;
  text-align: center;
}

table tr:nth-child(2n+1) {
  position:relative;
  display:block;
  height:20px;
  background:green;
}

table tr:nth-child(2n+1) td {
  position:absolute;
  left:0;
  right:-100%;
  width: auto;
  top:0;
  bottom:0;
  background:red;
  text-align:center;
}

<table>
    <tr>
        <td>row</td>
    </tr>
    <tr>
        <td>cell</td>
        <td>cell</td>
    </tr>
    <tr>
        <td>row</td>
    </tr>
    <tr>
        <td>cell</td>
        <td>cell</td>
    </tr>
</table>

Answer 15

আপনি সর্বদা position:absolute;জিনিস এবং প্রস্থ নির্দিষ্ট করতে পারে । এটি করার খুব তরল উপায় নয়, তবে এটি কার্যকর হবে।

Comments

খারাপ মার্কআপ ব্যবহার না করে এটি অর্জনের আরও অনেক উপায় রয়েছে। কোনও লেআউটকে বাধ্য করার জন্য নিরঙ্কুশ অবস্থানটি সর্বদা দুর্বল অনুশীলন হিসাবে বিবেচিত হয়েছে।

— মিস্টিডন

Answer 16

আমি এই ঝাঁকুনি তৈরি করেছি:

http://jsfiddle.net/wo40ev18/3/

এইচটিএমএল

<div id="table">
<div class="caption">
    Center Caption
</div>
<div class="group">
      <div class="row">
            <div class="cell">Link 1t</div>
            <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell ">Link 2</div>
      </div>
</div>

সিএসএস

   #table {
    display:table;
}

.group {display: table-row-group; }

.row {
    display:table-row;
    height: 80px;
    line-height: 80px;
}

.cell {
    display:table-cell;
    width:1%;
    text-align: center;
    border:1px solid grey;
    height: 80px
        line-height: 80px;
}

.caption {
    border:1px solid red; caption-side: top; display: table-caption; text-align: center; 
    position: relative;
    top: 80px;
    height: 80px;
      height: 80px;
    line-height: 80px;

}

Comments

তবে আমি মনে করি বুটস্ট্র্যাপ গ্রিড এটি খুব সহজেই তৈরি করতে পারে

— অরুণ প্রসাদ ইএস

এটি প্রশ্নটি যে সন্ধান করছে তার সমাধান সরবরাহ করে না। এটি কেবলমাত্র কক্ষগুলির একটি ইনলাইন সারি তৈরি করে।

— মিস্টিডন

Answer 17

মিডিয়া ক্যোয়ারী ক্লাসগুলি সদৃশ মার্কআপের মাধ্যমে পাসযোগ্য কিছু অর্জন করতে ব্যবহার করা যেতে পারে। বুটস্ট্র্যাপের সাথে আমার এই পদ্ধতিটি এখানে:

  <tr class="total">
    <td colspan="1" class="visible-xs"></td>
    <td colspan="5" class="hidden-xs"></td>
    <td class="focus">Total</td>
    <td class="focus" colspan="2"><%= number_to_currency @cart.total %></td>
  </tr>

মোবাইলের জন্য কলস্পান 1, সিএসএস সহ অন্যদের জন্য কলস্পান 5 করুন।

Comments

প্রশ্নকারী স্পষ্টভাবে বলেছিলেন যে তিনি HTML <table> উপাদান ব্যবহার করতে পারবেন না। তিনি যদি পারতেন তবে এটি সমাধান করা সহজ সমস্যা হবে।

— মিস্টিডন