কিভাবে এইচটিএমএল টেবিল থেকে সীমানা সম্পূর্ণরূপে মুছে ফেলা যায়

Question

আমার লক্ষ্য হ'ল এইচটিএমএল পৃষ্ঠা তৈরি করা যা কোনও "ফটো ফ্রেমের" অনুরূপ। অন্য কথায়, আমি একটি ফাঁকা পৃষ্ঠা তৈরি করতে চাই যা চারটি ছবি ঘিরে রয়েছে।

এটি আমার কোড:

<table>
    <tr>
        <td class="bTop" colspan="3">
        </td>
    </tr>
    <tr>
        <td class="bLeft">
        </td>
        <td class="middle">
        </td>
        <td class="bRight">
        </td>
    </tr>
    <tr>
        <td class="bBottom" colspan="3">
        </td>
    </tr>                                                    
</table>

এবং সিএসএসের ক্লাসগুলি নিম্নলিখিত:

.bTop
{
    width: 960px;
    height: 111px;
    background-image: url('../Images/BackTop.jpg');
}
.bLeft
{
    width: 212px;
    height: 280px;
    background-image: url('../Images/BackLeft.jpg');    

}

.middle
{
    width: 536px;
    height: 280px;
}

.bRight
{
    width: 212px;
    height: 280px;
    background-image: url('../Images/BackRight.jpg');    
}

.bBottom
{        
    width: 960px;
    height: 111px;
    background-image: url('../Images/BackBottom.jpg');       
}

আমার সমস্যাটি হ'ল আমি টেবিলের কোষগুলির মধ্যে পাতলা সাদা লাইন পাচ্ছি, আমি বোঝাতে চাই যে ছবিগুলির সীমানা অবিচ্ছিন্ন নয়। আমি কীভাবে এই সাদা স্থানগুলি এড়াতে পারি?

Answer 1

<table cellspacing="0" cellpadding="0">

এবং সিএসএসে:

table {border: none;}

সম্পাদনা: আইজিইএল হিসাবে উল্লেখ করা হয়েছে যে, এই সমাধানটি আনুষ্ঠানিকভাবে হ্রাস পেয়েছে (এখনও কাজ করে), তাই আপনি যদি স্ক্র্যাচ থেকে শুরু করে থাকেন, আপনার জেএনপিএলসিএল-এর সীমান্ত-পতন সমাধানটি নিয়ে যাওয়া উচিত।

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

আমি এটি পছন্দ করেছি:

<table cellspacing="0" cellpadding="0">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>

----------

.first {border-bottom:1px solid #EEE;}
.second {border-top:1px solid #CCC;}

এখন, সীমান্ত ধসের সাথে, এটি কার্যকর হবে না কারণ সর্বদা একটি সীমান্ত সরানো থাকে। আমাকে এটি অন্য কোনও উপায়ে করতে হবে (আরও সমাধানের সমাধান রয়েছে)। একটি সম্ভাবনা CSS3 ব্যবহার করে বাক্স-ছায়া সহ:

<table class="tab">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>​​​

<style>
.tab {border-collapse:collapse;}
.tab .first {border-bottom:1px solid #EEE;}
.tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}​
</style>

আপনি কেবল একটি একক সীমানা সহ "খাঁজ | রিজ | ইনসেট | আউটসেট" বর্ডার স্টাইলের মতো কিছু ব্যবহার করতে পারেন। তবে আমার জন্য এটি সর্বোত্তম নয়, কারণ আমি উভয় রঙই নিয়ন্ত্রণ করতে পারি না।

সীমানা ভাঙ্গার জন্য হয়ত কিছু সহজ এবং দুর্দান্ত সমাধান রয়েছে, তবে আমি এখনও এটি দেখিনি এবং আমি সত্যই এটিতে খুব বেশি সময় ব্যয় করি নি। সম্ভবত এখানে কেউ আমাকে / আমাদের দেখিয়ে দিতে সক্ষম হবে;)

Comments

সেলস্পেসিং এবং সেলপ্যাডিং 1999 সাল থেকে অবহেলা করা হয়েছে, দেখুন ডেভেলপার.মোজিলা.আর.ইন- ইউএস / ডকস / এইচটিএমএল / উপাদান / টেবিল - আপনার @jnpcl সমাধানের সাথে যাওয়া উচিত।

— আইজেল

আইগেল ঠিক আছে, আমি আমার উত্তর সম্পাদনা করেছি। সত্যিই, আমি অবাক হয়েছিলাম যে এটি এত দীর্ঘ সময়ের জন্য

— অবনমিত হয়েছে

Answer 2

table {
    border-collapse: collapse;
}

Comments

পুরোপুরি ধন্যবাদ কাজ করেছেন

— বিকাশ কান্ডারী

Answer 3

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

table, tr, td {
    border: none;
}

Comments

এখানে অবধি প্রতিটি পরামর্শ দিয়ে চেষ্টা করেছেন, এবং অবশেষে সীমান্তহীন টেবিল তৈরির জন্য জেকিলকে বোঝানোর border: noneজন্য আবেদন করেছিলেন td:<td markdown="span" style="padding: 0.5vw; border: none; max-width:100%; max-height:10%; background: transparent;">

— অ্যাভিও

Answer 4

বুটস্ট্র্যাপ পরিবেশে শীর্ষের উত্তরগুলির সাহায্যে কেউই সহায়তা করেনি, তবে নীচে প্রয়োগ করে সমস্ত সীমানা মুছে ফেলা হয়েছে:

.noBorder {
    border:none !important;
}

হিসাবে প্রয়োগ করা:

<td class="noBorder">

Comments

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

— রবপ্রাইস্টলি

Answer 5

একটি বুটস্ট্র্যাপ পরিবেশে এখানে আমার সমাধান:

    <table style="border-collapse: collapse; border: none;">
        <tr style="border: none;">
            <td style="border: none;">
            </td>
        </tr>
    </table>    

Answer 6

এটিই আমার সমস্যার সমাধান করেছে:

আপনার এইচটিএমএল টিআর ট্যাগে এটি যুক্ত করুন:

style="border-collapse: collapse; border: none;"

এটি টেবিলে সারিগুলিতে প্রদর্শিত সমস্ত সীমানা সরিয়ে ফেলল।