Question

我目前使用以下CSS：

table {
  border: 0px solid black;
}
th, td {
  font-family: monospace;
  text-align: center;
  border: 1px solid black;
  width: 36px;
  height: 36px;
}

目前，如果单元格的内容不占用所有36px，则当浏览器窗口宽度不允许显示整个表格时，列宽会减小。

我想修改这个CSS，这样，无论单元格的文本内容如何，无论浏览器窗口大小如何，单元格总是36 * 36px，表格固定大小基本上只取决于数量行和列。

如何实现这一目标？

在以下示例中，如果我调整浏览器窗口的大小，则会影响表格大小（更确切地说是列宽）。

<!doctype html>
<html lang=en>
  <head>
    <meta charset=utf-8>
    <style>
      table {
        border: 0px solid black;
      }
      th, td {
        font-family: monospace;
        text-align: center;
        border: 1px solid black;
        width: 36px;
        height: 36px;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>00</th>
        <th>01</th>
        <th>02</th>
        <th>03</th>
        <th>04</th>
        <th>05</th>
        <th>06</th>
        <th>07</th>
        <th>08</th>
        <th>09</th>
        <th>10</th>
        <th>11</th>
        <th>12</th>
        <th>13</th>
        <th>14</th>
        <th>15</th>
        <th>16</th>
        <th>17</th>
        <th>18</th>
        <th>19</th>
        <th>20</th>
        <th>21</th>
        <th>22</th>
        <th>23</th>
        <th>24</th>
        <th>25</th>
        <th>26</th>
        <th>27</th>
        <th>28</th>
        <th>29</th>
        <th>30</th>
        <th>31</th>
        <th>32</th>
        <th>33</th>
        <th>34</th>
        <th>35</th>
        <th>36</th>
        <th>37</th>
        <th>38</th>
        <th>39</th>
        <th>40</th>
        <th>41</th>
        <th>42</th>
        <th>43</th>
        <th>44</th>
        <th>45</th>
        <th>46</th>
        <th>47</th>
        <th>48</th>
        <th>49</th>
      </tr>
    </table>
  </body>
</html>

Answer 1

您还需要为表格提供固定宽度。我为属性添加了一些值，以便我们知道单元格的宽度，而不是猜测默认值。

table {
  border: 0px solid black;
  width:2002px; /* = (# of columns)*(width of td + borders + border spacing) */
  table-layout:fixed; /* to avoid column widening by too wide content */
  border-spacing:2px; /* because we don't want to rely on defaults */
}

th, td {
  font-family: monospace;
  text-align: center;
  border: 1px solid black;
  width: 36px;
  height: 36px;
  padding:0; /* because we don't want to rely on defaults */
}

<table>
  <tr>
    <th>00</th>
    <th>01</th>
    <th>02</th>
    <th>03</th>
    <th>04</th>
    <th>05</th>
    <th>06</th>
    <th>07</th>
    <th>08</th>
    <th>09</th>
    <th>10</th>
    <th>11</th>
    <th>12</th>
    <th>13</th>
    <th>14</th>
    <th>15</th>
    <th>16</th>
    <th>17</th>
    <th>18</th>
    <th>19</th>
    <th>20</th>
    <th>21</th>
    <th>22</th>
    <th>23</th>
    <th>24</th>
    <th>25</th>
    <th>26</th>
    <th>27</th>
    <th>28</th>
    <th>29</th>
    <th>30</th>
    <th>31</th>
    <th>32</th>
    <th>33</th>
    <th>34</th>
    <th>35</th>
    <th>36</th>
    <th>37</th>
    <th>38</th>
    <th>39</th>
    <th>40</th>
    <th>41</th>
    <th>42</th>
    <th>43</th>
    <th>44</th>
    <th>45</th>
    <th>46</th>
    <th>47</th>
    <th>48</th>
    <th>49</th>
  </tr>
</table>

使用CSS创建不可调整大小的表

1 个答案: