2016-04-29 8 views
0

Мне нужен стиль стола, например this, и он должен быть отзывчивым, возможно ли это?CSS - стиль стола

enter image description here

  • Пограничные пространства являются важными, они должны быть 4px/640px
+0

@Rahul Tripathi Thx для редактирования! –

+0

Нужно ли быть столом? Вы можете использовать Canvas? – CR41G14

+0

@ CR41G14 нет, это не только форма, ячейки будут содержать изображения, и пользователи нажмут на них –

ответ

0

window.onresize = function() { 
 
    var x = document.getElementsByClassName("cell"); 
 
    var _size = document.getElementById("myTable").offsetWidth/160 + "px"; 
 
    for(var i = 0; i < x.length; i++) { 
 
    x[i].style.borderWidth = _size; 
 
    x[i].style.height = x[i].offsetWidth + "px"; 
 
    } 
 
};
table { 
 
\t width: 100%; 
 
\t border-collapse: collapse; 
 
} 
 
table td { 
 
\t width: 25%; 
 
\t border: 1px solid black; 
 
} 
 
table tr:first-child td { 
 
\t border-top: 0; 
 
} 
 
table tr:last-child td { 
 
\t border-bottom: 0; 
 
} 
 
table tr td:first-child { 
 
\t border-left: 0; 
 
} 
 
table tr td:last-child { 
 
\t border-right: 0; 
 
}
<table id="myTable"> 
 
    <tr> 
 
    <td class="cell">1</td> 
 
    <td class="cell">2</td> 
 
    <td class="cell">3</td> 
 
    <td class="cell">4</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="cell">5</td> 
 
    <td class="cell">6</td> 
 
    <td class="cell">7</td> 
 
    <td class="cell">8</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="cell">9</td> 
 
    <td class="cell">10</td> 
 
    <td class="cell">11</td> 
 
    <td class="cell">12</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="cell">13</td> 
 
    <td class="cell">14</td> 
 
    <td class="cell">15</td> 
 
    <td class="cell">16</td> 
 
    </tr> 
 
</table>

-1

найти этот путь, чтобы получить все знания на столе CSS

https://css-tricks.com/complete-guide-table-element/ 
+0

Я не мог найти там –

+0

Просьба указать код, а не деталь. –

Смежные вопросы