Question

我正在建立一个网站来发布今年夏天我正在阅读的代数书的解决方案，而我在缩放时让我的桌子看起来很不错。

https://codepen.io/jedidreyfus/pen/jmYwMd

<html>
  <head>
    <title>Abstract Algebra  D&amp;F Exercises </title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="exo">
    </div>
    <div id="list">
      <h1>List of exercises from Abstract Algebra by Dummit and Foote (3rd. ed.)</h1>
<h2>Preliminaries</h2>
<table>
<tr>
<th>Section 1</th>
<td><a onclick="loadex(0,1,1)" href="#"> 0.1.1 </a></td>
<td><a onclick="loadex(0,1,2)" href="#"> 0.1.2 </a></td>
<td><a onclick="loadex(0,1,3)" href="#"> 0.1.3 </a></td>
<td><a onclick="loadex(0,1,4)" href="#"> 0.1.4 </a></td>
<td><a onclick="loadex(0,1,5)" href="#"> 0.1.5 </a></td>
<td><a onclick="loadex(0,1,6)" href="#"> 0.1.6 </a></td>
<td><a onclick="loadex(0,1,7)" href="#"> 0.1.7 </a></td>
</tr>
<tr>
<th>Section 2</th>
<td><a onclick="loadex(0,2,1)" href="#"> 0.2.1 </a></td>
<td><a onclick="loadex(0,2,2)" href="#"> 0.2.2 </a></td>
<td><a onclick="loadex(0,2,3)" href="#"> 0.2.3 </a></td>
<td><a onclick="loadex(0,2,4)" href="#"> 0.2.4 </a></td>
<td><a onclick="loadex(0,2,5)" href="#"> 0.2.5 </a></td>
<td><a onclick="loadex(0,2,6)" href="#"> 0.2.6 </a></td>
<td><a onclick="loadex(0,2,7)" href="#"> 0.2.7 </a></td>
<td><a onclick="loadex(0,2,8)" href="#"> 0.2.8 </a></td>
<td><a onclick="loadex(0,2,9)" href="#"> 0.2.9 </a></td>
<td><a onclick="loadex(0,2,10)" href="#"> 0.2.10 </a></td>
<td><a onclick="loadex(0,2,11)" href="#"> 0.2.11 </a></td>
</tr>
<tr>
<th>Section 3</th>
<td><a onclick="loadex(0,3,1)" href="#"> 0.3.1 </a></td>
<td><a onclick="loadex(0,3,2)" href="#"> 0.3.2 </a></td>
<td><a onclick="loadex(0,3,3)" href="#"> 0.3.3 </a></td>
<td><a onclick="loadex(0,3,4)" href="#"> 0.3.4 </a></td>
<td><a onclick="loadex(0,3,5)" href="#"> 0.3.5 </a></td>
<td><a onclick="loadex(0,3,6)" href="#"> 0.3.6 </a></td>
<td><a onclick="loadex(0,3,7)" href="#"> 0.3.7 </a></td>
</tr>
</table>

    </div>
    <div id="about"><a onclick="loadabout()" href="#">About</a></div>

  </body>
</html>

放大时，表格将开始扭曲。例如，左侧的标题将开始破坏单词，并且列的大小将无法通过缩放很好地缩放。无论如何都要使表中的所有尺寸和间距都很好吗？

Answer 1

当然，只需给整张桌子和第一列固定宽度。

<table style="width: 800px">
<tr>
<th width="100">Section 1</th>
....

如何在缩放时保持我的桌子看起来不错？

1 个答案: