Создайте адаптивную таблицу, содержащую круги

ProgramBox

Создайте адаптивную таблицу, содержащую круги

Post author:admin
Запись опубликована:5 марта, 2023
Post category:Вопросы по программированию

#javascript #html #css #responsive-design

#javascript #HTML #css #адаптивный дизайн

Вопрос:

Я создал таблицу с кругами, которые содержат числа. Я настроил решение с помощью Bootstrap, которое работает довольно хорошо, но становится сложнее сделать эту таблицу адаптивной.

Действительно, в зависимости от размера моего окна я бы хотел, чтобы моя таблица всегда была «квадратной». То есть расстояние между каждым кругом должно быть равным, как по горизонтали, так и по вертикали. Мои круги не имеют фиксированного размера, они должны меняться в зависимости от размера таблицы.

В моем решении есть несколько проблем :

Я должен использовать скрипт для принудительной адаптации моей таблицы при загрузке страницы и при каждом изменении размера моей страницы.
Таблица неправильно центрирована на моей странице

Интересно, нельзя ли оптимизировать мое решение, избегая использования JS, чтобы сделать мою доску адаптивной. Любое предложение приветствуется. Заранее спасибо.

 $(document).ready(function() {
    resizeTab();

    window.onresize = function(){
        resizeTab();
    };
});

function resizeTab() {
    var mainHeight = $('#main-panel').height();
    var mainWidth = $('#main-panel').width();
    if (mainWidth > mainHeight) {
        $('#my-tab').width($('#main-panel').height());
    } else {
        $('#my-tab').width($('#main-panel').width());
    }
}

 #viewport{
    height: 100vh;
    display: flex;
}

#left-panel, #right-panel {
    height: 100%;
    width: 300px;
    background-color: #000;
}

#main-panel {
    height: 100%;
    padding: 50px;
    flex-grow: 2;
}

#my-tab {
    margin: auto;
    text-align: center;
}

#my-tab td {
    border: 0;
}

#my-tab td .number {
    width: 100%;
    padding-bottom: 100%;
    position: relative;
}

#my-tab td .number span {
    color: rgb(44, 68, 84);
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    left: 0%;
    font-family: "RobotCondensed";
    font-weight: 100;
    font-size: 3vh;
    font-weight: 500;
    border: 2px solid rgba(96, 139, 168, .4);
    background-color: rgba(96, 139, 168, .2);
    border-radius: 5px;
    border-radius: 50%;
}

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- Styles -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
        <link rel="stylesheet" href="./style.css" />
        <title>Test</title>
    </head>
    <body>
        <div id="viewport">
            <div id="left-panel"></div>
            <div id="main-panel">
                <table id="my-tab" class="table">
                    <tbody>
                        <tr>
                            <td><div class="number"><span>1</span></div></td>
                            <td><div class="number"><span>2</span></div></td>
                            <td><div class="number"><span>3</span></div></td>
                            <td><div class="number"><span>4</span></div></td>
                            <td><div class="number"><span>5</span></div></td>
                            <td><div class="number"><span>6</span></div></td>
                            <td><div class="number"><span>7</span></div></td>
                            <td><div class="number"><span>8</span></div></td>
                            <td><div class="number"><span>9</span></div></td>
                            <td><div class="number"><span>10</span></div></td>
                        </tr>
                        <tr>
                            <td><div class="number"><span>11</span></div></td>
                            <td><div class="number"><span>12</span></div></td>
                            <td><div class="number"><span>13</span></div></td>
                            <td><div class="number"><span>14</span></div></td>
                            <td><div class="number"><span>15</span></div></td>
                            <td><div class="number"><span>16</span></div></td>
                            <td><div class="number"><span>17</span></div></td>
                            <td><div class="number"><span>18</span></div></td>
                            <td><div class="number"><span>19</span></div></td>
                            <td><div class="number"><span>20</span></div></td>
                        </tr>
                        <tr>
                            <td><div class="number"><span>21</span></div></td>
                            <td><div class="number"><span>22</span></div></td>
                            <td><div class="number"><span>23</span></div></td>
                            <td><div class="number"><span>24</span></div></td>
                            <td><div class="number"><span>25</span></div></td>
                            <td><div class="number"><span>26</span></div></td>
                            <td><div class="number"><span>27</span></div></td>
                            <td><div class="number"><span>28</span></div></td>
                            <td><div class="number"><span>29</span></div></td>
                            <td><div class="number"><span>30</span></div></td>
                        </tr>
                        <tr>
                            <td><div class="number"><span>31</span></div></td>
                            <td><div class="number"><span>32</span></div></td>
                            <td><div class="number"><span>33</span></div></td>
                            <td><div class="number"><span>34</span></div></td>
                            <td><div class="number"><span>35</span></div></td>
                            <td><div class="number"><span>36</span></div></td>
                            <td><div class="number"><span>37</span></div></td>
                            <td><div class="number"><span>38</span></div></td>
                            <td><div class="number"><span>39</span></div></td>
                            <td><div class="number"><span>40</span></div></td>
                        </tr>
                        <tr>
                            <td><div class="number"><span>41</span></div></td>
                            <td><div class="number"><span>42</span></div></td>
                            <td><div class="number"><span>43</span></div></td>
                            <td><div class="number"><span>44</span></div></td>
                            <td><div class="number"><span>45</span></div></td>
                            <td><div class="number"><span>46</span></div></td>
                            <td><div class="number"><span>47</span></div></td>
                            <td><div class="number"><span>48</span></div></td>
                            <td><div class="number"><span>49</span></div></td>
                            <td><div class="number"><span>50</span></div></td>
                        </tr>
                        <tr>
                            <td><div class="number"><span>51</span></div></td>
                            <td><div class="number"><span>52</span></div></td>
                            <td><div class="number"><span>53</span></div></td>
                            <td><div class="number"><span>54</span></div></td>
                            <td><div class="number"><span>55</span></div></td>
                            <td><div class="number"><span>56</span></div></td>
                            <td><div class="number"><span>57</span></div></td>
                            <td><div class="number"><span>58</span></div></td>
                            <td><div class="number"><span>59</span></div></td>
                            <td><div class="number"><span>60</span></div></td>
                        </tr>
                        <tr>
                            <td><div class="number"><span>61</span></div></td>
                            <td><div class="number"><span>62</span></div></td>
                            <td><div class="number"><span>63</span></div></td>
                            <td><div class="number"><span>64</span></div></td>
                            <td><div class="number"><span>65</span></div></td>
                            <td><div class="number"><span>66</span></div></td>
                            <td><div class="number"><span>67</span></div></td>
                            <td><div class="number"><span>68</span></div></td>
                            <td><div class="number"><span>69</span></div></td>
                            <td><div class="number"><span>70</span></div></td>
                        </tr>
                        <tr>
                            <td><div class="number"><span>71</span></div></td>
                            <td><div class="number"><span>72</span></div></td>
                            <td><div class="number"><span>73</span></div></td>
                            <td><div class="number"><span>74</span></div></td>
                            <td><div class="number"><span>75</span></div></td>
                            <td><div class="number"><span>76</span></div></td>
                            <td><div class="number"><span>77</span></div></td>
                            <td><div class="number"><span>78</span></div></td>
                            <td><div class="number"><span>79</span></div></td>
                            <td><div class="number"><span>80</span></div></td>
                        </tr>
                        <tr>
                            <td><div class="number"><span>81</span></div></td>
                            <td><div class="number"><span>82</span></div></td>
                            <td><div class="number"><span>83</span></div></td>
                            <td><div class="number"><span>84</span></div></td>
                            <td><div class="number"><span>85</span></div></td>
                            <td><div class="number"><span>86</span></div></td>
                            <td><div class="number"><span>87</span></div></td>
                            <td><div class="number"><span>88</span></div></td>
                            <td><div class="number"><span>89</span></div></td>
                            <td><div class="number"><span>90</span></div></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div id="right-panel"></div>
        </div>
    </body>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4 XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="./app.js"></script>
</html>

1. Вы абсолютно привержены идее использования таблицы?

2. @RichardHunter Не обязательно. Это казалось наиболее логичной структурой, но я готов измениться, если мои условия будут выполнены.

Ответ №1:

Вот мое решение с таблицей.

 body {
  min-height: 100vh;
  display: flex;
}

table {
  table-layout: fixed;
  margin: auto;
  width: 50vw;
  font-size: 10vw;
}

td {
  padding: 0 !important;
}

.number {
  padding-bottom: 100%;
  position: relative;
  width: 100%;
}

.number span {
  display: inline-block;
  color: rgb(44, 68, 84);
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80%;
  height: 80%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: "RobotCondensed";
  font-size: 10%;
  font-weight: 500;
  border: 2px solid rgba(96, 139, 168, .4);
  background-color: rgba(96, 139, 168, .2);
  border-radius: 50%;
}

 <head>
  <meta charset="UTF-8">
  <!-- Styles -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
  <link rel="stylesheet" href="./style.css" />
  <title>Test</title>
</head>

<body>

  <table>
    <tbody>
      <tr>
        <td>
          <div class="number"><span>1</span></div>
        </td>
        <td>
          <div class="number"><span>2</span></div>
        </td>
        <td>
          <div class="number"><span>3</span></div>
        </td>
        <td>
          <div class="number"><span>4</span></div>
        </td>
        <td>
          <div class="number"><span>5</span></div>
        </td>
        <td>
          <div class="number"><span>6</span></div>
        </td>
        <td>
          <div class="number"><span>7</span></div>
        </td>
        <td>
          <div class="number"><span>8</span></div>
        </td>
        <td>
          <div class="number"><span>9</span></div>
        </td>
        <td>
          <div class="number"><span>10</span></div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="number"><span>11</span></div>
        </td>
        <td>
          <div class="number"><span>12</span></div>
        </td>
        <td>
          <div class="number"><span>13</span></div>
        </td>
        <td>
          <div class="number"><span>14</span></div>
        </td>
        <td>
          <div class="number"><span>15</span></div>
        </td>
        <td>
          <div class="number"><span>16</span></div>
        </td>
        <td>
          <div class="number"><span>17</span></div>
        </td>
        <td>
          <div class="number"><span>18</span></div>
        </td>
        <td>
          <div class="number"><span>19</span></div>
        </td>
        <td>
          <div class="number"><span>20</span></div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="number"><span>21</span></div>
        </td>
        <td>
          <div class="number"><span>22</span></div>
        </td>
        <td>
          <div class="number"><span>23</span></div>
        </td>
        <td>
          <div class="number"><span>24</span></div>
        </td>
        <td>
          <div class="number"><span>25</span></div>
        </td>
        <td>
          <div class="number"><span>26</span></div>
        </td>
        <td>
          <div class="number"><span>27</span></div>
        </td>
        <td>
          <div class="number"><span>28</span></div>
        </td>
        <td>
          <div class="number"><span>29</span></div>
        </td>
        <td>
          <div class="number"><span>30</span></div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="number"><span>31</span></div>
        </td>
        <td>
          <div class="number"><span>32</span></div>
        </td>
        <td>
          <div class="number"><span>33</span></div>
        </td>
        <td>
          <div class="number"><span>34</span></div>
        </td>
        <td>
          <div class="number"><span>35</span></div>
        </td>
        <td>
          <div class="number"><span>36</span></div>
        </td>
        <td>
          <div class="number"><span>37</span></div>
        </td>
        <td>
          <div class="number"><span>38</span></div>
        </td>
        <td>
          <div class="number"><span>39</span></div>
        </td>
        <td>
          <div class="number"><span>40</span></div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="number"><span>41</span></div>
        </td>
        <td>
          <div class="number"><span>42</span></div>
        </td>
        <td>
          <div class="number"><span>43</span></div>
        </td>
        <td>
          <div class="number"><span>44</span></div>
        </td>
        <td>
          <div class="number"><span>45</span></div>
        </td>
        <td>
          <div class="number"><span>46</span></div>
        </td>
        <td>
          <div class="number"><span>47</span></div>
        </td>
        <td>
          <div class="number"><span>48</span></div>
        </td>
        <td>
          <div class="number"><span>49</span></div>
        </td>
        <td>
          <div class="number"><span>50</span></div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="number"><span>51</span></div>
        </td>
        <td>
          <div class="number"><span>52</span></div>
        </td>
        <td>
          <div class="number"><span>53</span></div>
        </td>
        <td>
          <div class="number"><span>54</span></div>
        </td>
        <td>
          <div class="number"><span>55</span></div>
        </td>
        <td>
          <div class="number"><span>56</span></div>
        </td>
        <td>
          <div class="number"><span>57</span></div>
        </td>
        <td>
          <div class="number"><span>58</span></div>
        </td>
        <td>
          <div class="number"><span>59</span></div>
        </td>
        <td>
          <div class="number"><span>60</span></div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="number"><span>61</span></div>
        </td>
        <td>
          <div class="number"><span>62</span></div>
        </td>
        <td>
          <div class="number"><span>63</span></div>
        </td>
        <td>
          <div class="number"><span>64</span></div>
        </td>
        <td>
          <div class="number"><span>65</span></div>
        </td>
        <td>
          <div class="number"><span>66</span></div>
        </td>
        <td>
          <div class="number"><span>67</span></div>
        </td>
        <td>
          <div class="number"><span>68</span></div>
        </td>
        <td>
          <div class="number"><span>69</span></div>
        </td>
        <td>
          <div class="number"><span>70</span></div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="number"><span>71</span></div>
        </td>
        <td>
          <div class="number"><span>72</span></div>
        </td>
        <td>
          <div class="number"><span>73</span></div>
        </td>
        <td>
          <div class="number"><span>74</span></div>
        </td>
        <td>
          <div class="number"><span>75</span></div>
        </td>
        <td>
          <div class="number"><span>76</span></div>
        </td>
        <td>
          <div class="number"><span>77</span></div>
        </td>
        <td>
          <div class="number"><span>78</span></div>
        </td>
        <td>
          <div class="number"><span>79</span></div>
        </td>
        <td>
          <div class="number"><span>80</span></div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="number"><span>81</span></div>
        </td>
        <td>
          <div class="number"><span>82</span></div>
        </td>
        <td>
          <div class="number"><span>83</span></div>
        </td>
        <td>
          <div class="number"><span>84</span></div>
        </td>
        <td>
          <div class="number"><span>85</span></div>
        </td>
        <td>
          <div class="number"><span>86</span></div>
        </td>
        <td>
          <div class="number"><span>87</span></div>
        </td>
        <td>
          <div class="number"><span>88</span></div>
        </td>
        <td>
          <div class="number"><span>89</span></div>
        </td>
        <td>
          <div class="number"><span>90</span></div>
        </td>
      </tr>
    </tbody>
  </table>

</body>

Но я бы, вероятно, предпочел не использовать таблицу, главным образом потому, что иногда их может быть немного сложно стилизовать, и потому, что организация последовательности чисел в группы по десять кажется мне неправильной семантически (я думаю, это должна быть просто одна непрерывная последовательность). Итак, вот мое решение, просто использующее divs. Кроме того, я использовал счетчик CSS для генерации чисел.

 html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  display: flex;
}

.table {
  margin: auto;
  counter-reset: tableCounter;
  width: 50vw;
  font-size: 1vw;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}

.table>div {
  counter-increment: tableCounter;
  position: relative;
  padding: 0;
  padding-bottom: 100%;
}

.table>div:before,
.table>div:after {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.table>div:before {
  content: '';
  padding: 30%;
  border-radius: 50%;
  background: rgba(96, 139, 168, .2);
  box-shadow: 0 0 0px 0.3vw rgba(96, 139, 168, .4);
}

.table>div:after {
  position: absolute;
  display: inline-block;
  color: rgb(44, 68, 84);
  content: counter(tableCounter);
}

 <div class="table">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>