Question

我创建了一个像这样的表

<android.support.v4.widget.DrawerLayout
android:id="@+id/dl_container"
xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent" android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/coordinator_layout"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar android:id="@+id/tb_toolbar"
        android:gravity="center"
        android:background="@color/white" android:minHeight="?attr/actionBarSize"
        android:layout_width="match_parent" android:layout_height="wrap_content">

        <TextView android:id="@+id/toolbar_title" android:layout_gravity="center"
            android:textSize="22sp" android:textColor="@color/toolbat_title_color"
            android:layout_width="wrap_content" android:layout_height="wrap_content" />

    </android.support.v7.widget.Toolbar>


    <FrameLayout
        android:id="@+id/fl_content" android:layout_marginTop="?android:attr/actionBarSize"
        android:layout_width="match_parent" android:layout_height="match_parent" />

    <include android:id="@+id/bottom_sheet"
        layout="@layout/bottom_sheet_video" />

</android.support.design.widget.CoordinatorLayout>

<android.support.design.widget.NavigationView
    android:id="@+id/nv_navigation"
    android:layout_width="wrap_content" android:layout_height="match_parent"
    android:fitsSystemWindows="true" android:layout_gravity="start"
    />

当我将浏览器的大小调整为平板电脑尺寸时，它应该是这样的 -

+---------------+
| 1 | 2 | 3 | 4 |
+---+---+---+---+
| 5 | 6 | 7 | 8 |
+---+---+---+---+
| 9 | 10| 11| 12|
+---+---+---+---+
| 13| 14| 15| 16|
+---+---+---+---+

有可能吗？

Answer 1

您无法使用table标记进行创建。但您可以使用div代码和响应式css 进行创建。这是你的答案：

＆＃13;

.container {
  float: left;
  width: 100%;
  max-width: 204px;
  text-align: center;
  border-left: 1px dashed #000;
  border-top: 1px dashed #000;
}

.cell {
  float: left;
  width: 100%;
  max-width: 50px;
  border-right: 1px dashed #000;
  border-bottom: 1px dashed #000;
}

＆＃13;

<div class="container">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>
  <div class="cell">10</div>
  <div class="cell">11</div>
  <div class="cell">12</div>
  <div class="cell">13</div>
  <div class="cell">14</div>
  <div class="cell">15</div>
  <div class="cell">16</div>
</div>

＆＃13;

将此HTML代码粘贴到您的html文档中并进行实时检查。

创建响应表

1 个答案: