ওভাররাইড এবং পুনরায় সেট করুন CSS স্টাইল: স্বয়ংক্রিয় বা কোনওটিই কাজ করে না

Question

আমি সমস্ত টেবিলের জন্য নিম্নলিখিত সিএসএস স্টাইলিং সংজ্ঞায়িত করতে চাই:

table {
        font-size: 12px;
        width: 100%;
        min-width: 400px;
        display:inline-table;
    }

ক্লাস নামে আমার নির্দিষ্ট সারণি রয়েছে 'other'।
শেষ অবধি টেবিল সজ্জা দেখতে হবে:

table.other {
    font-size: 12px;
}

তাই আমি 3 বৈশিষ্ট্যাবলী অপসারণ প্রয়োজন: width, min-widthএবংdisplay

আমি পুনরায় সেট করতে চেষ্টা noneবা auto, কিন্তু সাহায্য করেনি, আমি এই ক্ষেত্রে বলতে চাইছেন:

table.other {
    width: auto;
    min-width: auto;
    display:auto;
}
table.other {
    width: none;
    min-width: none;
    display:none;
}

Answer 1

আমি বিশ্বাস করি যে সম্পত্তিগুলির প্রথম সেট কেন কাজ করবে না কারণ এর কোনও autoমূল্য নেই কারণ displayসম্পত্তিটি উপেক্ষা করা উচিত। সেই ক্ষেত্রে, inline-tableএখনও কার্যকর হবে, এবং widthক্ষেত্রে প্রযোজ্য হবে না inlineউপাদান, বৈশিষ্ট্য সেট কিছু করতে হবে না।

বৈশিষ্ট্যগুলির দ্বিতীয় সেটটি কেবল টেবিলটি আড়াল করে দেবে, যা সেটির display: noneজন্য।

tableপরিবর্তে এটিকে পুনরায় সেট করার চেষ্টা করুন :

table.other {
    width: auto;
    min-width: 0;
    display: table;
}

সম্পাদনা: এর জন্য min-width ডিফল্ট 0, নাauto

Comments

আশ্চর্যজনক, আমি ফায়ারব্যাগের সাথে দেখছি - ন্যূনতম প্রস্থটি অটো দ্বারা

— ওভাররেড

@ সার্জিওননি ওহ হ্যাঁ, আমি ভুলে গেছি - min-widthএর একটি ডিফল্ট মান রয়েছে 0- রেফারেন্স.সেটপয়েন্ট

— ই জিয়াং

আমি ফায়ারব্যাগের দিকে আবার তাকালাম, সমস্যাও আছে, ওঁরা টেবিলে বাসা বেঁধেছে, তাই ওভাররাইডিংটি সমস্ত শ্রেণিবদ্ধের জন্য প্রয়োগ করা উচিত

— সার্জিওনি

@ সার্জিওনি আপনি table.other tableপুনরায় সেট করার বৈশিষ্ট্যগুলির জন্য নির্বাচককে যুক্ত করে এটি করতে পারেন

— ই জিয়াং

width: autoআমি যখন ওভাররাইড করতে চেয়েছিলাম তখন সমস্ত ছিল width: 100%- ধন্যবাদ

— মেরিডেথ

Answer 2

"কেউই" আপনি যা অনুমান করেন তা করে না। কোনও সিএসএস বৈশিষ্ট্য "সাফ" করতে আপনাকে অবশ্যই এটির ডিফল্টতে সেট করতে হবে, যা সিএসএস স্ট্যান্ডার্ড দ্বারা সংজ্ঞায়িত হয়েছে। সুতরাং আপনার পছন্দসই রেফারেন্সে আপনার ডিফল্টগুলি সন্ধান করা উচিত।

table.other {
    width: auto;
    min-width: 0;
    display:table;
}

Answer 3

Set min-width: inherit /* Reset the min-width */

এটা চেষ্টা কর. এটা কাজ করবে।

Comments

এটি একটি স্বীকৃত উত্তর হওয়া উচিত। min-width: 0একই জিনিসটি করবেন না

— v010dya

ঠিক আছে, তবে যদি কোনও বাবা-মা থাকে তবে min-width? আপনি এটি একটি বাস্তব ডিফল্ট পরিবর্তে পেতে যাচ্ছেন।

— adi518

Answer 4

ডিফল্ট displayএকটি টেবিল জন্য সম্পত্তি display:table;। শুধুমাত্র অন্যান্য দরকারী মান হয় inline-table। অন্যান্য সমস্ত displayমান টেবিল উপাদানগুলির জন্য অবৈধ।

একটা নয় auto, এটি পুনরায় সেট করতে ডিফল্টে আপনি জাভাস্ক্রিপ্ট এ কাজ করছেন, আপনি এটি একটি খালি স্ট্রিং, যা কৌতুক করতে হবে সেট করতে পারেন যদিও বিকল্প।

width:auto;বৈধ, তবে ডিফল্ট নয়। একটি সারণীর জন্য ডিফল্ট প্রস্থ হয় 100%, যেখানে width:auto;উপাদানটি যতটা প্রস্থের প্রয়োজন ততই গ্রহণ করবে।

min-width:auto;অনুমোদিত নয় আপনি যদি সেট করেন min-width, অবশ্যই এটির একটি মান থাকতে হবে, তবে এটি শূন্যে সেট করা সম্ভবত এটি ডিফল্টরূপে পুনরায় সেট করার মতোই দুর্দান্ত।

Comments

জেএস সম্পর্কে আকর্ষণীয় ধারণা। আমার যা দরকার তা দেখে মনে হচ্ছে nd এবং আমি প্রথমে সিএসএস দিয়ে চেষ্টা করব।

— সার্জিওনি

Answer 5

ঠিক আছে, display: none;টেবিলটি মোটেও প্রদর্শন করবে না, display: inline-block;প্রস্থ এবং ন্যূনতম প্রস্থের ঘোষণাগুলি 'অটো' রেখে চেষ্টা করুন।

Answer 6

আমি সবকিছু নিখুঁত করতে জাভাস্ক্রিপ্ট ব্যবহার করে শেষ করেছি।

আমার জেএস ফিডাল: https://jsfiddle.net/QEpJH/612/

এইচটিএমএল:

<div class="container">
    <img src="http://placekitten.com/240/300">
</div>

<h3 style="clear: both;">Full Size Image - For Reference</h3>
<img src="http://placekitten.com/240/300">

সিএসএস:

.container {
    background-color:#000;
    width:100px;
    height:200px;

    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;

}

জাতীয়:

$(".container").each(function(){
    var divH = $(this).height()
    var divW = $(this).width()
    var imgH = $(this).children("img").height();
    var imgW = $(this).children("img").width();

    if ( (imgW/imgH) < (divW/divH)) { 
        $(this).addClass("1");
        var newW = $(this).width();
        var newH = (newW/imgW) * imgH;
        $(this).children("img").width(newW); 
        $(this).children("img").height(newH); 
    } else {
        $(this).addClass("2");
        var newH = $(this).height();
        var newW = (newH/imgH) * imgW;
        $(this).children("img").width(newW); 
        $(this).children("img").height(newH); 
    }
})

Answer 7

আমি সর্বনিম্ন প্রস্থের সেটিংটি ফিরিয়ে আনতে সবচেয়ে ভাল উপায়টি হ'ল:

min-width: 0;
min-width: unset;

আনসেটটি বিশেষায়িত হয় তবে কয়েকটি ব্রাউজার (আইই 10) এটি সম্মান করে না, তাই 0 বেশিরভাগ ক্ষেত্রেই ভাল ফলব্যাক । সর্বনিম্ন প্রস্থ: 0;