table { overflow: hidden; } td, th { padding: 10px; position:"/> table { overflow: hidden; } td, th { padding: 10px; position:"/> table { overflow: hidden; } td, th { padding: 10px; position:"/>

ترفندهای حرفه ای و پیشرفته 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,ترفندهای حرفه ای اکسل,ترفندهای حرفه ای لاین,ترفندهای حرفه ای واتس اپ,ترفندهای حرفه ای ورد,ترفندهای حرفه ای پاورپوینت, نویسنده: استخدام کار بازدید: 403 تاريخ: پنجشنبه 15 مهر 1395 ساعت: 0:47

صفحه بندی

آرشیو مطالب

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

لینک دوستان

خبرنامه