Форум Сайтостроение Веб-строительство

Таблица с квадратными ячейками на всю ширину экрана

[Удален]
947

Таблица с квадратными ячейками на всю ширину экрана.

Как?

Как то сразу не смог.

Спасибо

Samail
На сайте с 10.05.2007
Offline
369
Samail
#1 

<table>

<tr><td><div></div></td></tr>

<tr><td><div></div></td></tr>

<tr><td><div></div></td></tr>

</table> 

<style>

  table {

    width: 100%;

}



td {

    position: relative;

    width: 100%;

    padding-bottom: 100%;

}

div {

    position: absolute;

    width: 100%;

    height: 100%;

    background-color: blue;

}

</style>
[Удален]
#2
Samail:
<table>

<tr><td><div></div></td></tr>

<tr><td><div></div></td></tr>

<tr><td><div></div></td></tr>

</table> 

<style>

  table {

    width: 100%;

}



td {

    position: relative;

    width: 100%;

    padding-bottom: 100%;

}

div {

    position: absolute;

    width: 100%;

    height: 100%;

    background-color: blue;

}

</style>

Что то не то. Нужно например чтоб: 

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>table-layout</title>

  <style>

   table {

    table-layout: fixed; /* Фиксированная ширина ячеек */

    width: 100%; /* Ширина таблицы */

   }

   .col1 { width: 160px; }

   .coln { width: 60px; }

  </style>

 </head>

 <body>

  <table border="1">





   <tr>

    <td>&nbsp;</td>

    <td>2012</td><td>2013</td><td>2014</td><td>2015</td>

    <td>2016</td><td>2017</td><td>2018</td><td>2019</td>

    <td>2020</td>

   </tr>

   <tr>

    <td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td>

    <td>3</td><td>34</td><td>62</td><td>74</td><td>57</td>

   </tr>

   <tr>

    <td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td>

    <td>4</td><td>69</td><td>72</td><td>56</td><td>47</td>

   </tr>

   <tr>

    <td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td>

    <td>7</td><td>73</td><td>79</td><td>34</td><td>86</td>

   </tr>

  </table>







 </body>

</html>


---------- Добавлено 25.03.2018 в 22:50 ----------

Ширина ячеек вроде одинаковая.

Теперь нужно чтоб оно было равно высоте ячеек.

S
На сайте с 13.10.2014
Offline
171
silicoid
#3

это можно сделать только на современных браузерах.

если кол-во ячеек известно по-умолчанию, то можно сделать так

td{

width:10vw;

height:10vw;

}

что означает 10% от ViewportWidth /то-есть от ширины экрана/

[Удален]
#4
silicoid:
это можно сделать только на современных браузерах.

если кол-во ячеек известно по-умолчанию, то можно сделать так

td{
width:10vw;
height:10vw;
}

что означает 10% от ViewportWidth /то-есть от ширины экрана/

Работает.

Спасибо вам.

---------- Добавлено 26.03.2018 в 16:32 ----------

Получается что это лучшие единицы измерения для вёрстки?

Или есть в них что плохое?

W
На сайте с 18.09.2006
Offline
86
wanick
#5
miltorg:

Получается что это лучшие единицы измерения для вёрстки?
Или есть в них что плохое?

Для Вашей цели возможно лучшие, но для других может быть не приемлемо.

Плохое разве что , не поддерживается сосем старыми браузерами, хотя в оснавном на них уже все забили.

"оружие" нужно выбирать от целей не бить "из пушки по воробьям"...

и рас уж вас так вдохновили такой "инструмнт" как vw

советую почита о единицах измерения css, там есть еще интересненькие "штучки"

Яндекс Маркет соберет галерею Степан Еремин: принципы привлечения Google Chrome перестанет поддерживать

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий