如何让我的桌子在放大时看起来不错？

我正在制作一个网站，以向我在今年夏天阅读的代数书发布解决方案，并且在缩放时我无法让我的桌子看起来不错。如何让我的桌子在放大时看起来不错？

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

如何让我的桌子在放大时看起来不错？

回答

相关问题