Question

<div id="horizontalContainerTile">
  <div id="horizontalContainerTile_1">
    <table class="horizontalContainerTable">
      <tbody>
        <tr>
          <td id="horizontalTile0">
            <div id="genericFormTile">
              <div id="genericFormTile_0">
                <table class="layout" id="genericFormTable">
                  <tbody>
                    <tr id="distributorId">
                      <td class="formFieldLabel" id="formCellLeft">Comfort Stylist ID:</td>
                      <td id="leftLabel"></td>
                      <td class="formField" id="formCellRight">                     
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </td>
          <td id="horizontalTile1">
            <div id="genericFormTile">
              <div id="genericFormTile_1">
                <table class="layout" id="genericFormTable">
                  <tbody>
                    <tr id="individualFirstName">
                      <td class="formFieldLabel" id="formCellLeft">First Name:</td>
                      <td id="leftLabel"></td>
                      <td class="formField" id="formCellRight">                     
                      </td>
                    </tr>
                  </tbody>
                </table>
                <input type="hidden" name="resultsPerPage" value="100"><!-- check if the value for field comes from bundle --><input
                  type="hidden" name="pageNumber" value="1">
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

目前，这会生成如下格式：

Comfort Stylist ID: <textbox>     First Name:  <textbox>

我在移动设备上想要的是：

    Comfort Stylist ID: <textbox>
    First Name:  <textbox>

请告诉我，如果我可以使用媒体查询来执行此操作。

而且我无法发布现有的CSS代码，我希望这不会成为问题。

Answer 1

我找到了它的解决方案，我们只需更改您的@media查询CSS即可实现。

table,tbody,td{
display:block;
}

对于位置或样式元素，您可以应用不同的CSS。

全部谢谢！

使用媒体查询将表转换为移动响应格式

1 个答案: