Tekil Mesaj gösterimi - Table Responsive Yapma

Konu Table Responsive Yapma

20-02-2020, 03:15:23

Merhaba

<div id="ana_div">

<div class="div" id="div"><table id="personel">
<tr>
<th>Sıra</th>
<th>Ad</th>
<th>Soyad</th>
<th>Yaş</th>
</tr>
<tr>
<td>1</td>
<td>Asuman</td>
<td>Göldağ</td>
<td>29</td>
</tr>
<tr>
<td>2</td>
<td>Ünlüsoy</td>
<td>Mansur</td>
<td>49</td>
</tr>
<tr>
<td>3</td>
<td>Cansen</td>
<td>Karaburun</td>
<td>84</td>
</tr>
<tr>
<td>4</td>
<td>Ülküsel</td>
<td>Özkahraman</td>
<td>73</td>
</tr>
<tr>
<td>5</td>
<td>Funda</td>
<td>Sığırcı</td>
<td>38</td>
</tr>
<tr>
<td>6</td>
<td>Edibe</td>
<td>Farımaz</td>
<td>89</td>
</tr>
<tr>
<td>7</td>
<td>Uluer</td>
<td>Akgül</td>
<td>38</td>
</tr>
<tr>
<td>8</td>
<td>Tarımer</td>
<td>Zımba</td>
<td>60</td>
</tr>
<tr>
<td>9</td>
<td>Şule</td>
<td>Alaca</td>
<td>66</td>
</tr>
<tr>
<td>10</td>
<td>Hafız</td>
<td>Bayduz</td>
<td>38</td>
</tr>
</table>
</div>


<div class="div" id="div2"><table id="personel">
<tr>
<th>Sıra</th>
<th>Ad</th>
<th>Soyad</th>
<th>Yaş</th>
</tr>
<tr>
<td>1</td>
<td>Asuman</td>
<td>Göldağ</td>
<td>29</td>
</tr>
<tr>
<td>2</td>
<td>Ünlüsoy</td>
<td>Mansur</td>
<td>49</td>
</tr>
<tr>
<td>3</td>
<td>Cansen</td>
<td>Karaburun</td>
<td>84</td>
</tr>
<tr>
<td>4</td>
<td>Ülküsel</td>
<td>Özkahraman</td>
<td>73</td>
</tr>
<tr>
<td>5</td>
<td>Funda</td>
<td>Sığırcı</td>
<td>38</td>
</tr>
<tr>
<td>6</td>
<td>Edibe</td>
<td>Farımaz</td>
<td>89</td>
</tr>
<tr>
<td>7</td>
<td>Uluer</td>
<td>Akgül</td>
<td>38</td>
</tr>
<tr>
<td>8</td>
<td>Tarımer</td>
<td>Zımba</td>
<td>60</td>
</tr>
<tr>
<td>9</td>
<td>Şule</td>
<td>Alaca</td>
<td>66</td>
</tr>
<tr>
<td>10</td>
<td>Hafız</td>
<td>Bayduz</td>
<td>38</td>
</tr>
</table>
</div>


<div class="div" id="div3"><table id="personel">
<tr>
<th>Sıra</th>
<th>Ad</th>
<th>Soyad</th>
<th>Yaş</th>
</tr>
<tr>
<td>1</td>
<td>Asuman</td>
<td>Göldağ</td>
<td>29</td>
</tr>
<tr>
<td>2</td>
<td>Ünlüsoy</td>
<td>Mansur</td>
<td>49</td>
</tr>
<tr>
<td>3</td>
<td>Cansen</td>
<td>Karaburun</td>
<td>84</td>
</tr>
<tr>
<td>4</td>
<td>Ülküsel</td>
<td>Özkahraman</td>
<td>73</td>
</tr>
<tr>
<td>5</td>
<td>Funda</td>
<td>Sığırcı</td>
<td>38</td>
</tr>
<tr>
<td>6</td>
<td>Edibe</td>
<td>Farımaz</td>
<td>89</td>
</tr>
<tr>
<td>7</td>
<td>Uluer</td>
<td>Akgül</td>
<td>38</td>
</tr>
<tr>
<td>8</td>
<td>Tarımer</td>
<td>Zımba</td>
<td>60</td>
</tr>
<tr>
<td>9</td>
<td>Şule</td>
<td>Alaca</td>
<td>66</td>
</tr>
<tr>
<td>10</td>
<td>Hafız</td>
<td>Bayduz</td>
<td>38</td>
</tr>
</table>
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="div" id="div4"><table id="personel">
<tr>
<th>Sıra</th>
<th>Ad</th>
<th>Soyad</th>
<th>Yaş</th>
</tr>
<tr>
<td>1</td>
<td>Asuman</td>
<td>Göldağ</td>
<td>29</td>
</tr>
<tr>
<td>2</td>
<td>Ünlüsoy</td>
<td>Mansur</td>
<td>49</td>
</tr>
<tr>
<td>3</td>
<td>Cansen</td>
<td>Karaburun</td>
<td>84</td>
</tr>
<tr>
<td>4</td>
<td>Ülküsel</td>
<td>Özkahraman</td>
<td>73</td>
</tr>
<tr>
<td>5</td>
<td>Funda</td>
<td>Sığırcı</td>
<td>38</td>
</tr>
<tr>
<td>6</td>
<td>Edibe</td>
<td>Farımaz</td>
<td>89</td>
</tr>
<tr>
<td>7</td>
<td>Uluer</td>
<td>Akgül</td>
<td>38</td>
</tr>
<tr>
<td>8</td>
<td>Tarımer</td>
<td>Zımba</td>
<td>60</td>
</tr>
<tr>
<td>9</td>
<td>Şule</td>
<td>Alaca</td>
<td>66</td>
</tr>
<tr>
<td>10</td>
<td>Hafız</td>
<td>Bayduz</td>
<td>38</td>
</tr>
</table>
</div>

<div class="div" id="div5"><table id="personel">
<tr>
<th>Sıra</th>
<th>Ad</th>
<th>Soyad</th>
<th>Yaş</th>
</tr>
<tr>
<td>1</td>
<td>Asuman</td>
<td>Göldağ</td>
<td>29</td>
</tr>
<tr>
<td>2</td>
<td>Ünlüsoy</td>
<td>Mansur</td>
<td>49</td>
</tr>
<tr>
<td>3</td>
<td>Cansen</td>
<td>Karaburun</td>
<td>84</td>
</tr>
<tr>
<td>4</td>
<td>Ülküsel</td>
<td>Özkahraman</td>
<td>73</td>
</tr>
<tr>
<td>5</td>
<td>Funda</td>
<td>Sığırcı</td>
<td>38</td>
</tr>
<tr>
<td>6</td>
<td>Edibe</td>
<td>Farımaz</td>
<td>89</td>
</tr>
<tr>
<td>7</td>
<td>Uluer</td>
<td>Akgül</td>
<td>38</td>
</tr>
<tr>
<td>8</td>
<td>Tarımer</td>
<td>Zımba</td>
<td>60</td>
</tr>
<tr>
<td>9</td>
<td>Şule</td>
<td>Alaca</td>
<td>66</td>
</tr>
<tr>
<td>10</td>
<td>Hafız</td>
<td>Bayduz</td>
<td>38</td>
</tr>
</table>
</div>


<div class="div" id="div6"><table id="personel">
<tr>
<th>Sıra</th>
<th>Ad</th>
<th>Soyad</th>
<th>Yaş</th>
</tr>
<tr>
<td>1</td>
<td>Asuman</td>
<td>Göldağ</td>
<td>29</td>
</tr>
<tr>
<td>2</td>
<td>Ünlüsoy</td>
<td>Mansur</td>
<td>49</td>
</tr>
<tr>
<td>3</td>
<td>Cansen</td>
<td>Karaburun</td>
<td>84</td>
</tr>
<tr>
<td>4</td>
<td>Ülküsel</td>
<td>Özkahraman</td>
<td>73</td>
</tr>
<tr>
<td>5</td>
<td>Funda</td>
<td>Sığırcı</td>
<td>38</td>
</tr>
<tr>
<td>6</td>
<td>Edibe</td>
<td>Farımaz</td>
<td>89</td>
</tr>
<tr>
<td>7</td>
<td>Uluer</td>
<td>Akgül</td>
<td>38</td>
</tr>
<tr>
<td>8</td>
<td>Tarımer</td>
<td>Zımba</td>
<td>60</td>
</tr>
<tr>
<td>9</td>
<td>Şule</td>
<td>Alaca</td>
<td>66</td>
</tr>
<tr>
<td>10</td>
<td>Hafız</td>
<td>Bayduz</td>
<td>38</td>
</tr>
</table>
</div>

</div>

böyle bir table ım var CSS ide aşağıdaki gibidir.

#personel td, #personel th {
border: 1px solid #e87b00;
padding: 8px;
font-weight:bold;
}

#personel tr:nth-child(even){background-color: #f2f2f2;}

#personel tr:hover {
background-color: #2ecc71;
color:#fff;
}

#personel th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #2c3e50;
color: white;
}
#ana_div {

height: 1500px;
width: 960px;
margin-right: auto;
margin-left: auto;
background-color: #FFF;


}

.div {

float: left;
display: inline-block;
height: 200px;
width: 300px;
margin: 10px;
color: #e87b00;

}

Yukarıdaki table responsive yapmam için ne yapmam gerekiyor. Şimdiden yardımcı olan arkadaşlara teşekkürler