table { overflow: hidden; } td, th { padding: 10px; position: relat."/> table { overflow: hidden; } td, th { padding: 10px; position: relat."/> table { overflow: hidden; } td, th { padding: 10px; position: relat"/>
خرید بک لینک

درباره سایت

آخرین مطالب

امکانات وب

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

صفحه بندی

آرشیو مطالب

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

لینک دوستان

خبرنامه