创建包含圆圈的响应式 table

Question

我用包含数字的圆圈创建了一个 table。我用 Bootstrap 设置了一个解决方案，效果很好，但要使这个 table 响应变得更加复杂。

的确，根据我的 window 的大小，我希望我的 table 始终是一个“正方形”。也就是说，每个圆圈之间的边距必须相等，无论是水平方向还是垂直方向。我的圈子没有固定的大小，它们必须随着 table.

的大小而发展

我的解决方案有几个问题：

我必须使用脚本强制我的 table 在页面加载和每次调整页面大小时响应。
table 在我的页面上没有正确居中

我想知道是否可以通过避免使用 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>

Answer 1

这是我的解决方案 table。

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>

但我可能不希望使用 table，主要是因为有时它们的样式可能有点棘手，而且因为将数字序列组织成十个一组在语义上对我来说似乎是错误的（我认为它应该只是一个连续的序列）。所以这是我使用 div 的解决方案。另外，我使用了 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>

创建包含圆圈的响应式 table

Create a responsive table that contains circles

html

javascript

css

responsive-design