可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

In my code there is a table in which I have divisions which has table row consisting checkboxes horizontally. Here is my sample code, full code is in fiddle Here

HTML:

<table cellpadding="0" border="0" width="100%" cellspacing="0">     <tr>         <td style="text-align:left" width="65px"><strong> Color: </strong>         </td>         <td style="float:left; text-align:left; width:100%">             <div style="display:table; width:100%">                 <div style="width:100%;display:table-row">                     <input type="checkbox" />                     <label class="btn"> <span>A</span>                      </label>                     <input type="checkbox" />                     <label class="btn"> <span>B</span>                      </label>                     <input type="checkbox" />                     <label class="btn"> <span>C</span>                      </label>                     <input type="checkbox" />                     <label class="btn"> <span>D</span>                      </label>                     <input type="checkbox" />                     <label class="btn"> <span>E</span>                      </label>                     <input type="checkbox" />                     <label class="btn"> <span>F</span>                      </label>                     <input type="checkbox" />                     <label class="btn"> <span>G</span>                      </label>                     <input type="checkbox" />                     <label class="btn"> <span>H</span>                      </label>                     <input type="checkbox" />                     <label class="btn"> <span>I</span>                      </label>                 </div>             </div>     </tr> </table>

CSS:

.btn {     display: table - cell; }

In pc and tablet view it looks perfect as i want, justified from both left and right side, but in mobile view is it possible to break it into two lines for making it responsive? Please look at fiddle.

回答1:

You can use a media-query to set the divs as display: block;. Demo

Leave the css you have for the larger displays, then use the media-query to target the smaller ones. I would recommend wrapping the label and checkbox together also to keep them from breaking apart:

HTML

<div class="table-cell">     <input type="checkbox" class="checkbox" />     <label class="btn"> <span>A</span>      </label> </div>

CSS

.table {     display: table;     width: 100%; }  .table-row {     display: table-row;     width: 100%; }  .table-cell {     display: table-cell; }  @media screen and (max-width: 479px) {     .table, .table-row {         display: block;     }     .table-cell {         display:inline-block;     } }

You may need to change the alignment of the labels to your liking.

回答2:

Here is what you want:

HTML

<table class="table" cellpadding="0" border="0" width="100%" cellspacing="0">     <thead>         <tr>             <th style="text-align:left" colspan="9"><strong> Color: </strong>              </th>         </tr>     </thead>     <tbody>         <tr>             <td>                 <input type="checkbox" />                 <label class="btn"> <span>A</span>                  </label>             </td>             <td>                 <input type="checkbox" />                 <label class="btn"> <span>B</span>                  </label>             </td>             <td>                 <input type="checkbox" />                 <label class="btn"> <span>C</span>                  </label>             </td>             <td>                 <input type="checkbox" />                 <label class="btn"> <span>D</span>                  </label>             </td>             <td>                 <input type="checkbox" />                 <label class="btn"> <span>E</span>                  </label>             </td>             <td>                 <input type="checkbox" />                 <label class="btn"> <span>F</span>                  </label>             </td>             <td>                 <input type="checkbox" />                 <label class="btn"> <span>G</span>                  </label>             </td>             <td>                 <input type="checkbox" />                 <label class="btn"> <span>H</span>                  </label>             </td>             <td>                 <input type="checkbox" />                 <label class="btn"> <span>I</span>                  </label>             </td>         </tr>     </tbody> </table>

CSS

.table {     width: 100%; } .table caption {     font-size: 15px;     font-weight: 700;     text-align: left;     margin-bottom: 20px;     color: #333;     text-transform: uppercase; } .table thead {     background-color: #444; } .table thead tr th {     padding: 10px;     font-weight: 700;     color: #f2f2f2;     text-transform: uppercase; } .table thead tr th:first-child {     text-align: left; } .table tbody {     background-color: #fcfcfc; } .table tbody tr td {     padding: 10px;     text-align: left; } .table tbody tr td:first-child {     text-align: left;     color: #333;     font-weight: 700; } .table tbody tr:nth-of-type(odd) {     background: #eee; }  @media only screen and (min-width: 320px) and (max-width: 767px) {     .table tbody {         border: 0;     }     .table tbody tr {         margin-bottom: 10px;         display: block;         border-bottom: 2px solid #ddd;     }     .table tbody td {         display: block;         text-align: right;         font-size: 13px;         border-bottom: 1px dotted #ccc;     }     .table tbody td:last-child {         border-bottom: 0;     }     .table tbody td:before {         content: attr(data-label);         float: left;         text-transform: uppercase;         font-weight: bold;     } }

As you can see there is a media query for phones and tablets min-width 320 to max width 767

Basically, turn the table from desktop viewing