نحوه طراحی یک جدول با عنوان یا فیلد مخصوص با نام طولانی و جستجو
با سلام خدمت برنامه نویسیان محترم ، در یک پروژه وب که در حال طراحی آن هستم نیاز به طراحی یک جدول دارم که عنوان ستون(سر ستون) های آن شامل یک نام طولانی و یک textbox برای عملیات searching و علامت sorting که از طریق class sorting ایجاد شده است می باشد در ضمن textbox ها در ابتدای load صفحه نمایش داده نمی شوند و کاربر با کلیک بر روی یک دکمه در صورت نیاز به عملیات searching آن ها را در زیر عنوان هر ستون (در همان خانه <th>) مشاهده خواهد کرد.
به علاوه به علت تعداد زیاد ستون ها جدول به صورت افقی scroll می شود.مشکل من این است چگونه می توانم با css یا bootstrap به این جدول style ی بدهم تا عنوان های طولانی و فارسی ستون ها و علامت sorting در یک خط در کنار هم قرار بگیرند و textbox ها در هنگام نمایش در زیر عنواین به شکل مرتب و یکنواخت نمایش داده شوند.*به عنوان نمونه یک تگ <th> جدول مورد نظر را در زیر قرار می دهم.
<th class="sorting fit" rowspan="1" colspan="1">عنوان برنامه پیشنهادی<input class="form-control searching_input_asd" placeholder="جستجو..." type="text"></th>
باتشکر_سخایی
1 پاسخ
سلام، شما داخل CSS برای اینکه عناوین طولانی چند خط نشن میتونید از text-overflow استفاده کنید. برای مثال:
th.fit {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
این لینک رو برای توضیحات بیشتر یه نگاهی بندازید.