Question

我测试了我的页面的响应性，并且表格存在问题（带有文字的表格＆＃39; rabat na odbitki＆＃39;）。它出现在平板电脑上（横向模式） - 桌子之间没有排水沟，我担心当我尝试增加它时，表格的一部分会移动到页面的边缘之类的它发生在移动版本（肖像）。

我试图通过媒体查询删除我的问题。

当我更改div.table-title和table-fill的设置时，我想，但没有帮助。

页：

http://fotozorza.pl/

jsbin上的代码：

https://jsbin.com/dujigoqivi/edit?html,css,output

屏幕： http://i66.tinypic.com/svsagy.jpg

http://i68.tinypic.com/4kim4w.jpg

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>

Answer 1

您的桌子宽度为col-md-4。将.table-condensed添加到您的表格中，或通过媒体查询添加此样式。

请参阅：http://getbootstrap.com/css/#tables-condensed

表天沟增强剂

1 个答案: