-1
私はWeb開発では非常に新しいですし、そのテーブルの内容が画面の高さに常に合うようにテーブルタグを使って情報を表示しようとしています。HTML画面の解像度に合わせてフォントをサイズ変更
ページには、以下の構造を有するであろう：
O - 1大きなテーブル
Oを - >最初の行（2行のテーブルである）
Oを1行を有することになります - > 2番目の行は3つの部分に分割され、3つの異なる表は異なる情報を表します。自動非ズームのいくつかの種類 -
+------------------------------------------+
| First row of table |
+-------+-----------------------+----------|
| Inner | Inner table |Inner |
| table | 2 |table 3 |
| 1 | | |
+------------------------------------------+
そして、私が直面しています問題は、自動的にテキストのフォントを調整するために管理することですが何のスクロールバーがなくなるまで自動的に削減することが表示されています。
いくつかのグーグルの後で、私はJQueryを掘り下げて画面のサイズをどうにかして自動的にすべてのオブジェクトのフォントサイズを最終的にこのサイズに合わせるべきだと理解しました。事前に
<!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>
おかげで、
どのように私は動的にその行数、私はそれが私の画面に収まる持ちに応じて、このメディアクエリを使用できますか？ウェブを閲覧した後、私はインラインCSSを使用することができません。これはバックエンド側から私が特定のパーセンテージを出すのを妨げています。それとも、私は何かが恋しいですか？ – Florian