এইচটিএমএল টেবিলের কক্ষের জন্য সরঞ্জামদণ্ড (জাভাস্ক্রিপ্ট নেই)

Question

কোনও জাভাস্ক্রিপ্ট না থাকলে টেবিল কক্ষগুলির জন্য কি সরঞ্জামদণ্ডগুলি পাওয়া সম্ভব? এটি ব্যবহার করতে পারবেন না।

Answer 1

আপনি চেষ্টা করেছেন?

<td title="This is Title">

ফায়ারফক্স ভি 18 (অররা), ইন্টারনেট এক্সপ্লোরার 8 এবং গুগল ক্রোম বনাম 23x এ এটি কার্যকর কাজ করছে

Comments

এটি হ'ল তবে এটি সত্যিই ধীর :(

Answer 2

হ্যাঁ. আপনি titleদুর্বল ব্যবহারযোগ্যতার সাথে কক্ষের উপাদানগুলিতে বৈশিষ্ট্যটি ব্যবহার করতে পারেন বা আপনি CSS টুলটিপস ব্যবহার করতে পারেন (বেশ কয়েকটি বিদ্যমান প্রশ্ন, সম্ভবত এটির সদৃশ)।

Answer 3

"শিরোনাম" বৈশিষ্ট্যটি ব্যবহার করে মুদাসার বশিরের সর্বাধিক স্থান প্রাপ্ত উত্তর এটি করার সহজতম উপায় বলে মনে হয় তবে মন্তব্য / সরঞ্জামদণ্ড কীভাবে প্রদর্শিত হয় তার উপর এটি আপনাকে কম নিয়ন্ত্রণ দেয়।

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

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

#MyTable{
  border-style:solid;
  border-color:black;
  border-width:2px
}

#MyTable td{
  border-style:solid;
  border-color:black;
  border-width:1px;
  padding:3px;
}

.CellWithComment{
  position:relative;
}

.CellComment{
  display:none;
  position:absolute; 
  z-index:100;
  border:1px;
  background-color:white;
  border-style:solid;
  border-width:1px;
  border-color:red;
  padding:3px;
  color:red; 
  top:20px; 
  left:20px;
}

.CellWithComment:hover span.CellComment{
  display:block;
}

<table id="MyTable">
  <caption>Cell 1,2 Has a Comment</caption>
  <thead>
    <tr>
      <td>Heading 1</td>
      <td>Heading 2</td>
      <td>Heading 3</td>
    </tr>
  </thead>
  <tbody>
    <tr></tr>
      <td>Cell 1,1</td>
      <td class="CellWithComment">Cell 1,2
        <span class="CellComment">Here is a comment</span>
      </td>
      <td>Cell 1,3</td>
    <tr>
      <td>Cell 2,1</td>
      <td>Cell 2,2</td>
      <td>Cell 2,3</td>
    </tr>
  </tbody>
</table>

Answer 4

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

a span.tooltip {display:none;}
a:hover span.tooltip {position:absolute;top:30px;left:20px;display:inline;border:2px solid green;}

নোট করুন যে পুরানো ব্রাউজারগুলির জন্য সীমিত সমর্থন রয়েছে: হোভার।

Answer 5

বায়োডাটা 41 কী যুক্ত করেছে তার একটি বিবর্তন ...

সিএসএস শৈলীতে যা অনুসরণ করে তা রাখুন

     <style>

        .CellWithComment{position:relative;}

        .CellComment
        {
            visibility: hidden;
            width: auto;
            position:absolute; 
            z-index:100;
            text-align: Left;
            opacity: 0.4;
            transition: opacity 2s;
            border-radius: 6px;
            background-color: #555;
            padding:3px;
            top:-30px; 
            left:0px;
        }   
        .CellWithComment:hover span.CellComment {visibility: visible;opacity: 1;}
</style>

তারপরে, এটি এর মতো ব্যবহার করুন:

        <table>
            <tr>
                <th class="CellWithComment">Category<span class="CellComment">"Ciaooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo"</span></th>
                <th class="CellWithComment">Code<span class="CellComment">"Ciaooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo"</span></th>
                <th>Opened</th>
                <th>Event</th>
                <th>Severity</th>           
                <th>Id</th>
                <th>Component Name</th>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
        </table>

Comments

পার্থক্য কি?

— ড্যানিয়েল সি সোব্রাল

Answer 6

if (data[j] =='B'){
    row.cells[j].title="Basic";
}

জাভা স্ক্রিপ্টে শর্ত সাপেক্ষে ডেটার মান তুলনা করে শিরোনাম যুক্ত। সারণীটি জাভা স্ক্রিপ্ট দ্বারা গতিশীলভাবে তৈরি করা হয়।