ترفندهای حرفه ای و پیشرفته Front End (جلسه 2) : Highlight کردن ردیف و ستون جدول - قسمت 2

ساخت وبلاگ

آخرین مطالب

امکانات وب

ترفندهای حرفه ای و پیشرفته Front End (جلسه 2) : Highlight کردن ردیف و ستون جدول - قسمت 2

<!DOCTYPE html>

<html>

<head>

<title>table</title>

<style type="text/css">

table {

  overflow: hidden;

}

td, th {

  padding: 10px;

  position: relative;

  outline: 0;

}

body:not(.nohover) tbody tr:hover {

  background-color: #ffa;

}

td:hover::after,

thead th:not(:empty):hover::after,

td:focus::after,

thead th:not(:empty):focus::after {

  content: '';  

  height: 10000px;

  left: 0;

  position: absolute;  

  top: -5000px;

  width: 100%;

  z-index: -1;

}

td:hover::after,

th:hover::after {

  background-color: #ffa;

}

td:focus::after,

th:focus::after {

  background-color: lightblue;

}

/* Focus stuff for mobile */

td:focus::before,

tbody th:focus::before {

  background-color: lightblue;

  content: '';  

  height: 100%;

  top: 0;

  left: -5000px;

  position: absolute;  

  width: 10000px;

  z-index: -1;

}

</style>

</head>

<body>

<table>

    <thead>

        <tr>

            <th></th>

            <th class="col">50kg</th>

            <th class="col">55kg</th>

            <th class="col">60kg</th>

            <th class="col">65kg</th>

            <th class="col">70kg</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <th>160cm</th>

            <td>20</td>

            <td>21</td>

            <td>23</td>

            <td>25</td>

            <td>27</td>

        </tr>

        <tr>

            <th>165cm</th>

            <td>18</td>

            <td>20</td>

            <td>22</td>

            <td>24</td>

            <td>26</td>

        </tr>

        <tr>

            <th>170cm</th>

            <td>17</td>

            <td>19</td>

            <td>21</td>

            <td>23</td>

            <td>25</td>

        </tr>

        <tr>

            <th>175cm</th>

            <td>16</td>

            <td>18</td>

            <td>20</td>

            <td>22</td>

            <td>24</td>

        </tr>

    </tbody>

</table>

</body>

</html>

سون لرن • آموزش...
ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : ترفندهای حرفه ای تلگرام,ترفندهای حرفه ای فیسبوک,ترفندهای حرفه ای فتوشاپ,ترفندهای حرفه ای کامپیوتر,ترفندهای حرفه ای ویندوز 7,ترفندهای حرفه ای اکسل,ترفندهای حرفه ای لاین,ترفندهای حرفه ای واتس اپ,ترفندهای حرفه ای ورد,ترفندهای حرفه ای پاورپوینت, نویسنده : استخدام کار 7learn بازدید : 360 تاريخ : پنجشنبه 15 مهر 1395 ساعت: 0:47

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه