我是网络开发的新手，我正在尝试使用表格标签显示一些信息，使得该表格的内容始终符合屏幕高度。
页面将具有以下结构：
o - 1张大桌子
o - ＆gt;第一行将有1行（这是一个2行的表）
o - ＆gt;第二行将分为3个部分，3个不同的表代表不同的信息。
+------------------------------------------+
| First row of table |
+-------+-----------------------+----------|
| Inner | Inner table |Inner |
| table | 2 |table 3 |
| 1 | | |
+------------------------------------------+
我面临的问题是设法自动调整正在显示的文字的字体，直到没有滚动条为止 - 某种自动取消缩放。
经过一些谷歌搜索，我明白我应该深入研究JQuery，以某种方式获得屏幕的大小，并自动调整所有对象的所有字体，以最终匹配此大小。但由于我对这项技术很陌生，我有点失落......
这是我使用虚拟文本的HTML：
<!DOCTYPE html>
<html>
<head>
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" rel="stylesheet"/>
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script><script crossorigin="anonymous" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" class="table table-condensed nopadding table-striped">
<thead>
<tr>
<th class="col-md-2 nopadding text-center">First Name</th>
<th class="col-md-2 nopadding text-center">Last name</th>
<th class="col-md-2 nopadding text-center">Office id</th>
<th class="col-md-2 nopadding text-center">Other info</th>
<th class="col-md-2 nopadding text-center">Other info</th>
<th class="col-md-2 nopadding text-center">Other info</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p align="center"><b>My Name</b></p>
</td>
<td>
<p align="center"><b>Last name</b></p>
</td>
<td>
<p align="center"><b>Office id </b></p>
</td>
<td>
<p align="center"><b>Bla bla bla </b></p>
</td>
<td>
<p align="center"><b>Bla bla bla</b></p>
</td>
<td>
<p align="center"><b>Bla bla bla</b></p>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="table table-condensed nopadding ">
<thead>
<tr>
<th class="col-md-1 nopadding" style="width:15%"></th>
<th class="col-md-10 nopadding" style="width:70%"></th>
<th class="col-md-1 nopadding" style="width:15%"></th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 15%">
<table border="1" class="table table-striped table-hover table-condensed">
<tbody>
<tr>
<th>Incoming events</th>
</tr>
<tr>
<td>Meeting 1</td>
</tr>
<tr>
<td>Meeting 2 </td>
</tr>
<tr>
<td>Meeting 3</td>
</tr>
<tr>
<td>Meeting 4</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 70%">
<table border="1" class="table table-striped table-hover table-condensed">
<thead>
<tr>
<th style="vertical-align:top ; color:orange">Must do</th>
<th style="vertical-align:top; color:green">Should do</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td> Review Internal presentation </td>
</tr>
<tr>
<td></td>
<td> Review external presentation </td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td> Review bla bla </td>
<td></td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
<tr>
<td></td>
<td> Review bla bla </td>
</tr>
</tbody>
</table>
</td>
<td style="width: 15%">
<table border="1" class="table table-striped table-hover table-condensed" style=" table-layout: fixed; word-wrap: break-word;">
<tbody>
<tr>
<th>Achieved</th>
</tr>
<tr>
<td> Achieved bla bla </td>
</tr>
<tr>
<td> Achieved bla bla </td>
</tr>
<tr>
<td> Achieved bla bla </td>
</tr>
<tr>
<td align="center">. . .</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<meta content="60;URL=/" http-equiv="refresh"/>
<p align="center"><b>Some useless text</b><br/></p>
</body>
</html>
提前致谢，
答案 0 :(得分：0)
使用media queries在不同的屏幕上定义不同的字体大小。在某些情况下，响应式字体大小可以解决您的问题。
1vw =视口宽度的1％
1vh =视口高度的1％
1vmin = 1vw或1vh，取较小者
1vmax = 1vw或1vh，取较大者
答案 1 :(得分：0)
您可以在css中使用换行（但也可以使用其他解决方案），例如..
的CSS：
#wrapper
{
width: 100%;
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
html /或任何文件：
<body>
<div id="wrapper"> <!-- main div for the body that wraps -->
<!-- put your codes and whatever inside the wrapper div -->
</div>
</body>