Question

我有下表，

<table style="height: 803px;" width="591">
        <tbody>
            <tr>
                <td>
                    <p><strong>Model#</strong></p>
                </td>

                <td>
                    <p><strong>Item Code</strong></p>
                </td>

                <td>
                    <p><strong>Description</strong></p>
                </td>

                <td>
                    <p><strong>Old Retail</strong></p>
                </td>

                <td>
                    <p><strong>Promotion Retail</strong></p>
                </td>

                <td>
                    <p><strong>Remarks</strong></p>
                </td>
            </tr>

            <tr>
                <td>
                    <p>WM608</p>
                </td>

                <td>
                    <p>11619082</p>
                </td>

                <td>
                    <p>Campomatic front load washer &nbsp;6 KG, 800RPM ,8
                    programs,electronic control,</p>
                </td>

                <td>
                    <p>799</p>
                </td>

                <td>
                    <p>799</p>
                </td>

                <td>
                    <p>FREE CAMPOMATIC vacuum cleaner model#RC1808 1800W WORTH
                    199 DHS + FREE Campomatic hair dryer HP20 WORTH 99 DHS</p>
                </td>
            </tr>

            <tr>
                <td>
                    <p>IWE-81281ECOUK</p>
                </td>

                <td>
                    <p>11675623</p>
                </td>

                <td>
                    <p>Indesit front load washer ,8kg,1200 rpm,digital display
                    ,Energy Efficiency Class: A+, white color</p>
                </td>

                <td>
                    <p>1899</p>
                </td>

                <td>
                    <p>1599</p>
                </td>

                <td>
                    <p>300 DHS GV+free persil 3ltr detergent 2 pcs worth 78
                    dhs</p>
                </td>
            </tr>

        </tbody>
    </table>

我想让它响应。我正在使用Jquery Mobile

Answer 1

只需将data-role='table'添加到您的表格元素即可。默认表类型是reflow，因此当它到达较小的空间量时，表将堆叠。

有关详细信息，请参阅以下链接。

http://demos.jquerymobile.com/1.4.0/table-reflow/

编辑：更新了指向最新版本的链接

Answer 2

响应表只是一个100％宽度的表。

您可以使用此CSS设置表格：.table { width: 100%; }

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Responsive table</title>
<style>
.table {
  width: 100%;
  background: blue;
  color: white;
}
</style>
</head>
<body>
  <table class="table">
    <thead>
      <tr>
        <th colspan="2">Table head</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

如何使现有的表在Jquery Mobile中响应？

2 个答案: