عرض CSS: العمود الأول على نطاق واسع جدًا

Question

لدي إعداد جدول CSS مثل هذا:

<div class='table'>
 <div>
  <span>name</span>
  <span>details</span>
 </div>
</div>

CSS للجدول هو:

.table{
 display:table;
 width:100%;
}
.table div{
 text-align:right;
 display:table-row;
 border-collapse: separate;
 border-spacing: 0px;
}
.table div span:first-child {
 text-align:right;
}
.table div span {
 vertical-align:top;
 text-align:left;
 display:table-cell;
 padding:2px 10px;
}

كما يقف ، يتم تقسيم العمودين بالتساوي بين المساحة التي يشغلها عرض الجدول. أحاول الحصول على العمود الأول فقط ليكون واسعًا كما هو مطلوب من قبل النص الذي يشغل خلاياه

الجدول هو عرض غير معروف ، وكذلك الأعمدة/الخلايا.

Answer 1

فقط أعطها أي عرض صغير مثل 1px. تتوسع خلايا الجدول دائمًا إلى أصغر حجم ممكن لتناسب محتواه.

Answer 2

حاول -> table-layout: fixed

Answer 3

يمكنك استخدام المحدد الأول للطفل للعثور على DIV الأول داخل الطاولة ومنحه منفصلة.

.table div:first-child
{
    width:30%;
}

Answer 4

لا أعرف أنه يمكنك أن تكون حجم النص إذا كان ذلك يختلف حسب الصف ولكن يمكنك محاولة إعداد عرض = "تلقائي" أو عرض مئوي للأعمدة.

Answer 5

يجب عليك تغيير اسم الفصل "جدول" إلى بعضها الآخر. "الجدول" يشير إلى أنه فئة من بعض الجدول من div.

حاول المتابعة

<div class='table'>
 <div>
  <span style="width:30%">name</span>
  <span>details</span>
 </div>
</div>