استایل جدول

    • 1403/05/04 10:39
    حدیثه زنگنه
    حدیثه زنگنه
    کاربر
    0

    سلام استاد روزتون بخیر

    من یه جدول درست کردم می خوام بیارمش  وسط صفحه باید چقدر بهش margin بدم؟ و اینکه چطوری باید بیارمش وسط که توی همه صفحه نمایش ها وسط باشه؟عرضش رو با درصد دادم که اوکی شه.

    سوال بعدیمم اینه که نمی خوام border کامل داشته باشه فقط می خوام زیرش یه خط باشه،میشه؟

     <style>
            table {
                border-collapse: collapse;
                width: 50%;
            }

            th,
            td {
                padding: 10px;
                text-align: center;
                border: 1px solid #ddd;
            }

            tr:hover {
                background-color: coral;
            }
     
        </style>
     
     
     <table>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>mahdi</td>
                <td>amani</td>
                <td>20</td>
            </tr>
            <tr>
                <td>ziba</td>
                <td>sharifi</td>
                <td>10</td>
            </tr>
            <tr>
                <td>reza</td>
                <td>asadi</td>
                <td>21</td>
            </tr>
            <tr>
                <td>sima</td>
                <td>gholami</td>
                <td>16</td>
            </tr>
        </table>

    • 1403/05/04 12:08
    ایران باینری
    ایران باینری
    استاد
    0

    سلام خانم زنگنه

    برای وسط صفحه قرار دادن عناصر بلاکی می تونین از margin استفاده کنین.اگه بهش margin چپ و راست autoبدید میاد دقیقا وسط صفحه.اگر هم می خوایید با عناصر بالا و پایین هم فاصله داشته باشه می تونین margin-top و margin-bottomبدید استایلتون رو ادیت می کنم به اینصورت

        table {
                border-collapse: collapse;
                width: 50%;
    margin:100px auto;
            }
     
    برای ایجاد یه خط ساده پایین هر سلول جدول باید از border-bottom استفاده کنید به اینصورت ادیت کنید
     
       th,
            td {
                padding: 10px;
                text-align: center;
                border-bottom: 1px solid #ddd;
            }