我目前使用以下 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>
最佳答案
你也需要给表格一个固定的宽度。我还为属性添加了更多值，这样我们就可以知道单元格的宽度，而不是猜测默认值。
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>关于html - 使用 CSS 创建一个不可调整大小的表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48865655/