Stworzyłem stół z okręgami zawierającymi liczby. Skonfigurowałem rozwiązanie z bootstrapem, który działa całkiem dobrze, ale staje się bardziej złożone, aby sprawić, że ta tabela responuje.

Rzeczywiście, w zależności od rozmiaru mojego okna, chciałbym, żeby mój stół zawsze był "placem". Oznacza to, że margines między każdym krążem musi być równy, poziomo, czy pionowo. Moje kółka nie mają stałego rozmiaru, muszą ewoluować z wielkością tabeli.

Moje rozwiązanie ma kilka problemów:

  • Muszę użyć skryptu, aby zmusić responansowanie mojego stołu na obciążeniu strony i na każdą zmianę rozmiaru mojej strony.
  • Tabela nie jest poprawnie skierowana na mojej stronie

Zastanawiam się, czy moje rozwiązanie nie może być zoptymalizowane, unikając użycia JS, aby uczynić moją planszową. Każda sugestia jest mile widziana. Z góry dziękuję.

$(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
Ngb_01 10 październik 2020, 13:24

1 odpowiedź

Najlepsza odpowiedź

Oto moje rozwiązanie ze stołem.

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>

Ale prawdopodobnie wolę nie używać stolika, głównie dlatego, że czasami mogą być trochę trudne do stylu, a ponieważ organizowanie sekwencji liczby na grupy od dziesięciu wydaje się źle semantycznie dla mnie (myślę, że powinno być tylko jedną ciągłą sekwencją ). Oto moje rozwiązanie tylko przy użyciu divs. Użyłem również licznika CSS, aby wygenerować liczby.

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>
1
Richard Hunter 10 październik 2020, 11:46