Web geliştirmede çok yeniyim ve tablo etiketlerini kullanarak o tablonun içeriğinin her zaman bir ekran yüksekliğine sığacağı şekilde bazı bilgiler göstermeye çalışıyorum.HTML Ekran çözünürlüğüne uyacak şekilde yazı tipinizi yeniden boyutlandırma
sayfa aşağıdaki yapıya sahip olacaktır:
o - 1 büyük bir masa
O -> ilk satır
(2 sıra bir tablo olan) 1 satır olurdu O -> İkinci sıra 3 bölüme ayrılacak, farklı bilgileri temsil eden 3 farklı tablo. Otomatik un-zoom çeşit -
+------------------------------------------+
| First row of table |
+-------+-----------------------+----------|
| Inner | Inner table |Inner |
| table | 2 |table 3 |
| 1 | | |
+------------------------------------------+
Ve Karşılıklı sorunun otomatik olarak metnin yazı tipini ayarlamak için yönetmektir hiçbir kaydırma çubuğu kalmayıncaya kadar otomatik azaltmak için görüntülenen.
Bazı kullanıcılardan sonra, bir şekilde ekran boyutuna ulaşmak ve tüm boyuttaki nesnemin tüm yazı tipini otomatik olarak yeniden boyutlandırmak için JQuery'ye girmem gerektiğini anladım. tanımlamak için önceden
<!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>
teşekkür,
nasıl dinamik olarak satır sayısı bu benim ekrana uyuyor var bağlı bu medya sorgularını kullanabilir? internette gezindikten sonra, belirli bir yüzdeyi vermek için arka uçtan beni engelleyen inline css'yi kullanamıyorum. Yoksa bir şey mi özledim? – Florian