جدول در css ساختن جدول ها با css

niwanta · آذر 95

سلام به همه دوستان

خسته نباشید

من یک پنل جدول مانند با div طراحی کردم اما یه مشکل دارم

نمی تونم بدون استفاده از جدول سلول ها رو ادغام کنم (نمیخوام از جدول استفاده کنم)

<div class="table">
	<div class="tbody">
        <div class="tr tr-header">
            <div class="td td-header">عکس</div>
            <div class="td td-header">شناسه</div>
            <div class="td td-header">نام آگهی دهنده</div>
            <div class="td td-header">عنوان</div>
            <div class="td td-header">کاربر</div>
            <div class="td td-header">نوع آگهی</div>
            <div class="td td-header">مدت آگهی</div>
            <div class="td td-header">تاریخ درج</div>
            <div class="td td-header">تاریخ بروز رسانی</div>
            <div class="td td-header">عملیات</div>
            <div class="td td-header">وضعیت</div>
        </div>
        <div class="tr">
            <div class="td">عکس</div>
            <div class="td">۴۲۳۴۵۲</div>
            <div class="td">حسن کلهر</div>
            <div class="td">ساخت و طراحی موزیک ویدیو</div>
            <div class="td">kalhor_3dsmax@yahoo.com</div>
            <div class="td">آگهی ویژه هفت ستاره</div>
            <div class="td">شش ماهه</div>
            <div class="td">۱۴/۰۹/۹۵</div>
            <div class="td">-</div>
            <div class="td">نمایش آگهی فعال</div>
            <div class="td">آنلاین</div>
        </div>
        <div class="tr">
            <div class="td">عکس</div>
            <div class="td">۴۲۳۴۵۲</div>
            <div class="td">نیوانتا</div>
            <div class="td">طراحی وب سایت</div>
            <div class="td">bg.tarahi@gmail.com</div>
            <div class="td">آگهی ویژه هفت ستاره</div>
            <div class="td">یک ساله</div>
            <div class="td">۱۰/۰۹/۹۵</div>
            <div class="td">-</div>
            <div class="td">نمایش آگهی فعال</div>
            <div class="td">آفلاین</div>
        </div>
        <div class="tr">
            <div class="td">عکس</div>
            <div class="td">۴۲۳۴۵۲</div>
            <div class="td">حسن کلهر</div>
            <div class="td">ساخت و طراحی موزیک ویدیو</div>
            <div class="td">kalhor_3dsmax@yahoo.com</div>
            <div class="td">آگهی ویژه هفت ستاره</div>
            <div class="td">شش ماهه</div>
            <div class="td">۱۴/۰۹/۹۵</div>
            <div class="td">-</div>
            <div class="td">نمایش آگهی فعال</div>
            <div class="td">آنلاین</div>
        </div>
        <div class="tr">
            <div class="td">عکس</div>
            <div class="td">۴۲۳۴۵۲</div>
            <div class="td">نیوانتا</div>
            <div class="td">طراحی وب سایت</div>
            <div class="td">bg.tarahi@gmail.com</div>
            <div class="td">آگهی ویژه هفت ستاره</div>
            <div class="td">یک ساله</div>
            <div class="td">۱۰/۰۹/۹۵</div>
            <div class="td">-</div>
            <div class="td">نمایش آگهی فعال</div>
            <div class="td">آفلاین</div>
        </div>
        <div class="tr">
            <div class="td">میخواهم این سطر دو ستون داشته باشد شبیه به جدول ها</div>
            <div class="td">میخواهم این سطر دو ستون داشته باشد شبیه به جدول ها</div>
        </div>
    </div>
</div>

.table
{
	display:table;
	width:100%;
}
.tbody
{
	display:table-row-group;
}
.tr-header
{
	background:#9DBEF1 !important;
	font-weight:bold;
}
.td-header
{
	padding:10px 5px !important;
}
.tr
{
	display:table-row;
}
.td
{
	display:table-cell;
	padding:20px 5px;
}
.table .tr:nth-child(odd)
{
	background:#F3F3F3;
}

کد های بالا مربوط به طرح منه

چطور میتونم ستون های سطر آخر رو ادغام کنم به نحوی کنه دو ستون داشته باشه؟

لطفا کمک کنید

majid1889 · آذر 95

اگه از div با کلاس table بیاریش بیرون ردیف میشه

<div class="merge">
    <div class="m" style="float: right;">میخواهم این سطر دو ستون داشته باشد شبیه به جدول ها</div>
    <div class="m" style="">میخواهم این سطر دو ستون داشته باشد شبیه به جدول ها</div>
</div>

با این استایل :

.merge {
    display: flex;
    text-align: right;
}
.m {
    padding: 20px 5px;
    width: 50%;
}

ورود

جدول در css ساختن جدول ها با css

پست های پیشنهاد شده

niwanta 8

لینک به ارسال

majid1889 733

لینک به ارسال

به گفتگو بپیوندید

فهرست بخش ها

فعالیت ها