如何讓我的桌子在放大時看起來不錯？

我正在製作一個網站，以向我在今年夏天閱讀的代數書發佈解決方案，並且在縮放時我無法讓我的桌子看起來不錯。如何讓我的桌子在放大時看起來不錯？

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>

放大時，該表將開始扭曲。例如，左側的標題將開始打破單詞，並且在縮放時列的大小不能很好地縮放。無論如何要讓桌子的尺寸和間距達到所有尺寸和間距？

來源

2017-05-08 jedidreyfus

你使用什麼瀏覽器？在Chrome中，我放大到250％，無法讓您的表意外中斷。 – hughes

@hughes對不起，我已經改變了codepen通過添加一個寬度的表，如下面的答案建議。這很好，但我不想硬編碼寬度，因爲我需要經常更換表格。我將它切換回來，現在您可以看到縮放時段號在另一行上的顯示方式。 – jedidreyfus

當然，只要給你的整個表和你的第一列固定寬度。

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

來源

2017-05-08 21:59:49

謝謝！有沒有辦法讓這更靈活？當我添加練習時，我的表格總是改變大小，我不想每次都改變CSS。 – jedidreyfus

如何讓我的桌子在放大時看起來不錯？

回答

相關問題