html - CSS 删除填充并将全宽应用于类中的表列

Question

我在页面中添加了以下 CSS 媒体查询，但无法弄清楚如何将上列的宽度设置为全宽，移除下列的填充以使其居中，以及如何将按钮居中。

@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr, cuerpo_con { 
   display: inline-block;
   width:100%;
   position:relative;
   border-collapse:collapse;
   margin: 0 auto;
   overflow: hidden;
   padding-left: 0px;
}

具有不同宽度和填充的偏心列

这是 HTML我看到上列的宽度为 400px，下列的填充设置为 30px。只是不知道如何用 css 删除它们，所以它看起来都在移动设备上。

<div class="ui-widget-content ui-corner-bottom modulo_datos">
  <table cellspacing="0" cellpadding="0" border="0">
    <tbody>
        <tr>
          <td valign="top" style="width:400px;">
            <table cellspacing="0" cellpadding="0" border="0">
              <tbody>
                <tr>
                    <td valign="top"><label>Cuenta:</label></td>
                    <td valign="top" style="padding-left:10px;"><span>3826</span></td>
                </tr>
                <tr>
                    <td colspan="2" style="padding-top:10px;"></td>
                </tr>
                <tr>
                    <td valign="top"><label>Ruta:</label></td>
                    <td valign="top" style="padding-left:10px;"><span>1-11</span></td>
                </tr>
                <tr>
                    <td colspan="2" style="padding-top:10px;"></td>
                </tr>
                <tr>
                    <td valign="top"><label>Dirección:</label></td>
                    <td valign="top" style="padding-left:10px;"><span>BO LEMPIRA OAK RIDGE</span></td>
                </tr>
              </tbody>
            </table>
          </td>
          <td valign="top" style="padding-left:30px;">
              <table cellspacing="0" cellpadding="0" border="0">
                <tbody>
                  <tr>
                    <td valign="top"><label>Medidor:</label></td>
                    <td valign="top" style="padding-left:10px;"><span>20203948</span></td>
                  </tr>
                  <tr>
                    <td colspan="2" style="padding-top:10px;"></td>
                  </tr>
                  <tr>
                    <td valign="top"><label>Saldo:</label></td>
                    <td valign="top" style="padding-left:10px;"><span>LPS 0.00</span></td>
                  </tr>
                </tbody>
              </table>
          </td>
        </tr>
        <tr>
          <td colspan="2" style="padding-top:20px;"></td>
        </tr>
        <tr>
          <td valign="top" colspan="2">
            <table cellspacing="0" cellpadding="0" border="0">
              <tbody>
                <tr>
                  <td>
                    <button class="Pagos ui-button ui-corner-all ui-widget ui-button-disabled ui-state-disabled" onclick="payNow( ['3826;0.00'] )" disabled="">
                      <span class="ui-button-icon ui-icon ui-icon-cart"></span>
                      <span class="ui-button-icon-space"> </span>Pagar Ahora
                    </button>
                  </td>
                  <td style="padding-left:30px;">
                      <button class="Info ui-button ui-corner-all ui-widget" onclick="abrirVentanaInfo('3826'); return False;">
                        <span class="ui-button-icon ui-icon ui-icon-newwin"></span>
                        <span class="ui-button-icon-space"> </span>Ver Información
                      </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
    </tbody>
  </table>
</div>

Answer 1

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)  {
  td {
    padding: 0 !important;
    width: 100% !important;
    display: block !important;
    text-align: center;
  }
  table {
    width: 100%;
  }
}

<div class="ui-widget-content ui-corner-bottom modulo_datos">
      <table cellspacing="0" cellpadding="0" border="0">
        <tbody>
            <tr>
              <td valign="top" style="width:400px;">
                <table cellspacing="0" cellpadding="0" border="0">
                  <tbody>
                    <tr>
                        <td valign="top"><label>Cuenta:</label></td>
                        <td valign="top" style="padding-left:10px;"><span>3826</span></td>
                    </tr>
                    <tr>
                        <td colspan="2" style="padding-top:10px;"></td>
                    </tr>
                    <tr>
                        <td valign="top"><label>Ruta:</label></td>
                        <td valign="top" style="padding-left:10px;"><span>1-11</span></td>
                    </tr>
                    <tr>
                        <td colspan="2" style="padding-top:10px;"></td>
                    </tr>
                    <tr>
                        <td valign="top"><label>Dirección:</label></td>
                        <td valign="top" style="padding-left:10px;"><span>BO LEMPIRA OAK RIDGE</span></td>
                    </tr>
                  </tbody>
                </table>
              </td>
              <td valign="top" style="padding-left:30px;">
                  <table cellspacing="0" cellpadding="0" border="0">
                    <tbody>
                      <tr>
                        <td valign="top"><label>Medidor:</label></td>
                        <td valign="top" style="padding-left:10px;"><span>20203948</span></td>
                      </tr>
                      <tr>
                        <td colspan="2" style="padding-top:10px;"></td>
                      </tr>
                      <tr>
                        <td valign="top"><label>Saldo:</label></td>
                        <td valign="top" style="padding-left:10px;"><span>LPS 0.00</span></td>
                      </tr>
                    </tbody>
                  </table>
              </td>
            </tr>
            <tr>
              <td colspan="2" style="padding-top:20px;"></td>
            </tr>
            <tr>
              <td valign="top" colspan="2">
                <table cellspacing="0" cellpadding="0" border="0">
                  <tbody>
                    <tr>
                      <td>
                        <button class="Pagos ui-button ui-corner-all ui-widget ui-button-disabled ui-state-disabled" onclick="payNow( ['3826;0.00'] )" disabled="">
                          <span class="ui-button-icon ui-icon ui-icon-cart"></span>
                          <span class="ui-button-icon-space"> </span>Pagar Ahora
                        </button>
                      </td>
                      <td style="padding-left:30px;">
                          <button class="Info ui-button ui-corner-all ui-widget" onclick="abrirVentanaInfo('3826'); return False;">
                            <span class="ui-button-icon ui-icon ui-icon-newwin"></span>
                            <span class="ui-button-icon-space"> </span>Ver Información
                          </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
        </tbody>
      </table>
    </div>