CSS رأس العمود مع img - كيفية قفص الاتهام img/div إلى اليمين ؟

https://stackoverflow.com/questions/467603

19-08-2019
|

سؤال

لدي جدول HTML التي تستخدم ورؤوس الأعمدة إلى عرض الشبكة.بالنقر على رأس العمود بتشغيل جافا سكريبت أن يجعل عرض الشبكة نوعا ما, و أيقونة عرض هذا العمود يتم فرز يظهر بجانب عمود النص ، على غرار أدناه:

|---------------------------------------------------------------------------------|
| <span> Column 1 </span> <div class="sortImgSprite" /> | <span> Column 2 </span> |
|---------------------------------------------------------------------------------|

يحتوي الجدول table-layout:ثابت و تمتد على النص قد تجاوز:خفية, text-overflow:القطع, white-space:nowrap.

عندما يكون النص طويل جدا, أنا لا تحصل على القطع التأثير الذي أريده ، ولكن هذا النوع رمز العفريت (شعبة مع عرض الخلفية) يحصل قص قبالة الجانب الأيمن من خلية الجدول.أي اقتراحات كيفية التأكد من نوع رمز يحصل الأسبقية الفضاء على ellipsizing النص عن طريق CSS ؟ إذا كان عمود "فرز" أريد نوع img أن تكون دائما هناك نص ellipsize بدلا من النص دفع img من مساحة مرئية الخلية:

المحلول

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

نصائح أخرى

لماذا لا يمكنك فقط إضافة "sortImgSprite" فئة إلى <span> الوسم بدلا من ذلك ؟ منذ كنت تفعل الفرز عن طريق جافا سكريبت على أي حال ، يجب أن يكون التعامل مع الجدول عمود ؟

عندما يقوم المستخدم أنواع على عمود ، إضافة "sortImgSprite" الطبقة إلى اليسار أو اليمين (ربما إضافة القليل من الحشو إذا لزم الأمر) وإزالته عند هذا العمود لم يعد فرز.

أو هل فاتني شيء ؟

آه.كنت قد نسيت شيئا.يعتقد النص الذي كان يفيض في الصفوف تحت رؤوس الأعمدة ، وليس في رؤوس أنفسهم.

طيب, ماذا لو كنت لإضافة فئة إلى رأس الجدول?الخاص بك <th> الوسم (إذا كان هذا هو ما كنت تستخدم) يمكن أن يكون صورة الانحياز إلى يمين الخلية ومن ثم <span> العلامة يمكن أن ترث تلك الفئة إضافة التنسيق الأخرى (مثل النص تجاوز ، إلخ) ؟

مرة أخرى, قد تحتاج الحشو على يمين span حتى أن رأس الجدول الخلية صورة الخلفية يمكن رؤيتها بوضوح من وراء أي نص.

وشكرا للتوصيات! هنا ما انتهى به للحصول على ما أردت من خلال CSS:

<html>
<head>
<style type="text/css">
table
{
   table-layout:fixed;
   width: 300px;
}

div.foo
{
   float:right;
   width:25px;
   height:1.2em;
   background-color:green;
}

.bar
{
   margin-right:30px;
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
}
</style>
</head>

<body>
<table border="1">
   <tr>
      <td>
         <div class="foo"></div>
         <div class="bar" title="This is some text. This is some text. This is some text. This is some text.">This is some text. This is some text. This is some text.</div>
      </td>
   </tr>
</table>
</body>  
</html>

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow