0
我測試了我的頁面的響應能力，並且表格存在問題（帶有文本'rabat na odbitki'的表格）。它出現在平板電腦上（橫向模式） - 表格之間沒有間隙，恐怕當我嘗試增加它時，表格的一部分會移動到頁面邊緣之外，就像在移動版本（人像）中發生的一樣。Table gutter boostrap
我試圖通過媒體查詢來消除我的問題。
我想當我改變div.table-title和table-fill的設置，但沒有幫助。
頁：
https://jsbin.com/dujigoqivi/edit?html,css,output
屏幕： http://i66.tinypic.com/svsagy.jpg
http://i68.tinypic.com/4kim4w.jpg
上jsbin
代碼
div.table-title {
display: block;
margin: auto;
max-width: 600px;
padding:5px;
width: 100%;
}
.table-title h3 {
color: #6c6c6c;
font-size: 25px;
font-weight: 500;
font-style:normal;
font-family: "LATO", helvetica, arial, sans-serif;
text-transform:uppercase;
text-align:center;
}
.table-title h4 {
color: #6c6c6c;
font-size: 15px;
font-weight: 500;
font-style:normal;
font-family: "LATO", helvetica, arial, sans-serif;
text-align:center;
text-transform:uppercase;
}
/*** Table Styles **/
.table-fill {
border:1px solid #9ea7af;
border-radius:3px;
border-collapse: collapse;
height: 320px;
margin: auto;
max-width: 300px;
padding:5px;
width: 75%;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
th {
color:#6c6c6c;
border-bottom:1px solid #9ea7af;
font-size:20px;
font-weight: 400;
padding:24px;
text-align:left;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
vertical-align:middle;
}
th:first-child {
border-top-left-radius:3px;
}
th:last-child {
border-top-right-radius:1px;
border-right:none;
}
tr {
border-top: 1px solid #C1C3D1;
border-bottom-: 1px solid #C1C3D1;
color:#6c6c6c;
font-size:16px;
font-weight:bold;
}
tr:hover td {
color:#FFFFFF;
font-weight: 800;
font-size:1.3em;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
background:#ca1075;
border-color:#fff;
-webkit-transition: 20;
-webkit-transition: all 0.25s, color 0s !important;
-moz-transition: all 0.25s, color 0s !important;
-o-transition: all 0.25s, color 0s !important;
transition: all 0.25s, color 0s !important;
}
tr:first-child {
border-top:1px solid #9ea7af;
}
tr:last-child {
border-bottom:none;
}
tr:nth-child(odd) td {
}
tr:nth-child(odd):hover td {
}
tr:last-child td:first-child {
border-bottom-left-radius:3px;
}
tr:last-child td:last-child {
border-bottom-right-radius:3px;
}
td {
padding:20px;
text-align:left;
vertical-align:middle;
font-weight:400;
font-size:18px;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
border-right: 1px solid #C1C3D1;
}
td:last-child {
border-right: 0px;
}
th.text-left {
text-align: left;
}
th.text-center {
text-align: center;
}
th.text-right {
text-align: right;
}
td.text-left {
text-align: left;
}
td.text-center {
text-align: center;
}
td.text-right {
text-align: right;
}
text-centered {
text-align: center!important;
margin:0!important;
}
<div class="row">
<div class="col-xs-12 col-md-4 post">
<div class="table-title">
<h3>Rabat na odbitki</h3>
<p style="color:gray;"> cena dotyczy 1 odbitki przy określonym zamówieniu</p>
</div>
<table class="table-fill">
<thead>
<tr>
<th class="text-left">rozmiar odbitki</th>
<th class="text-left">Cena 1szt. 100% </th>
<th class="text-left">rabat 5% 50 odbitek </th>
<th class="text-left">rabat 10% 100 odbitek</th>
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td class="text-left"> 9 x 13</td>
<td class="text-left">0,55</td>
<td class="text-left">0,52</td>
<td class="text-left">0,49</td>
</tr>
<tr>
<td class="text-left">10 x 15</td>
<td class="text-left">0,65</td>
<td class="text-left">0,62</td>
<td class="text-left">0,58</td>
</tr>
<tr>
<td class="text-left">13 x 18</td>
<td class="text-left">0,85</td>
<td class="text-left">0,80</td>
<td class="text-left">0,77</td>
</tr>
<tr>
<td class="text-left">15 x 21</td>
<td class="text-left">1,10</td>
<td class="text-left">1,05</td>
<td class="text-left">1,00</td>
</tr>
<tr>
<td class="text-left">25 x 18</td>
<td class="text-left">2,00</td>
<td class="text-left">1,95</td>
<td class="text-left">1,90</td>
</tr>
<tr>
<td class="text-left">20 x 25</td>
<td class="text-left">2,50</td>
<td class="text-left">2,45</td>
<td class="text-left">2,40</td>
</tr>
<tr>
<td class="text-left">25 x 30</td>
<td class="text-left">3,50</td>
<td class="text-left">3,45</td>
<td class="text-left">3,40</td>
</tr>
<tr>
<td class="text-left">25 x 38</td>
<td class="text-left">7,00</td>
<td class="text-left">6,95</td>
<td class="text-left">6,90</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-12 col-md-4 post2" style="padding-top:-5px;">
<div class="table-title">
<h3>Rabat na odbitki</h3>
<p style="color:gray;">cena dotyczy 1 odbitki przy określonym zamówieniu</p>
</div>
<table class="table-fill">
<thead>
<tr>
<th class="text-left">rozmiar odbitki</th>
<th class="text-left">15% 150 odbitek</th>
<th class="text-left">20% 200 odbitek</th>
<th class="text-left">30% 300 odbitek</th>
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td class="text-left">9x 13</td>
<td class="text-left">0,46</td>
<td class="text-left">0,44</td>
<td class="text-left">0,38</td>
</tr>
<tr>
<td class="text-left">10 x 15</td>
<td class="text-left">0,55</td>
<td class="text-left">0,52</td>
<td class="text-left">0,46</td>
</tr>
<tr>
<td class="text-left">13 x 18</td>
<td class="text-left">0,73</td>
<td class="text-left">0,68</td>
<td class="text-left">0,60</td>
</tr>
<tr>
<td class="text-left">15 x 21</td>
<td class="text-left">0,95</td>
<td class="text-left">0,90</td>
<td class="text-left">0,80</td>
</tr>
<tr>
<td class="text-left">25 x 18</td>
<td class="text-left">1,85</td>
<td class="text-left">1,80</td>
<td class="text-left">1,70</td>
</tr>
<tr>
<td class="text-left">20 x 25</td>
<td class="text-left">2,35</td>
<td class="text-left">2,30</td>
<td class="text-left">2,20</td>
</tr>
<tr>
<td class="text-left">25 x 30</td>
<td class="text-left">3,35</td>
<td class="text-left">3,30</td>
<td class="text-left">3,20</td>
</tr>
<tr>
<td class="text-left">25 x 38</td>
<td class="text-left">6,85</td>
<td class="text-left">6,80</td>
<td class="text-left">6,70</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-12 col-md-4 post ">
<div class="table-title">
<h3>Rabat na odbitki</h3>
<p style="color:gray;">cena dotyczy 1 odbitki przy określonym zamówieniu</p>
</div>
<table class="table-fill">
<thead>
<tr>
<th class="text-left">rozmiar odbitki</th>
<th class="text-left">40% 400 odbitek</th>
<th class="text-left">50% 500 odbitek</th>
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td class="text-left">9x 13</td>
<td class="text-left">0,33</td>
<td class="text-left">0,27</td>
</tr>
<tr>
<td class="text-left">10 x 15</td>
<td class="text-left">0,39</td>
<td class="text-left">0,33</td>
</tr>
<tr>
<td class="text-left">13 x 18</td>
<td class="text-left">0,60</td>
<td class="text-left">0,43</td>
</tr>
<tr>
<td class="text-left">15 x 21</td>
<td class="text-left">0,70</td>
<td class="text-left">0,60</td>
</tr>
<tr>
<td class="text-left">25 x 18</td>
<td class="text-left">1,60</td>
<td class="text-left">1,50</td>
</tr>
<tr>
<td class="text-left">20 x 25</td>
<td class="text-left">2,10</td>
<td class="text-left">2,0</td>
</tr>
<tr>
<td class="text-left">25 x 30</td>
<td class="text-left">3,10</td>
<td class="text-left">3,00</td>
</tr>
<tr>
<td class="text-left">25 x 38</td>
<td class="text-left">6,60</td>
<td class="text-left">6,50</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
請清理該代碼。 –