如何使表格响应?

时间:2015-07-27 09:11:17

标签: php html responsive-design

以下是我的表,我想做出回应。

 <table style="width:100%" class="table table-hover">

                <tr>
                    <th>Booking Date</th>
                    <th>Booking Id</th>
                    <th>Amount</th>
                    <th>Movie Name</th>
                    <th>Theatre Name</th>
                </tr>
                <?php
                    foreach ( $data as $history )
                    {
                        ?>
                        <tr>
                            <td> <?php print_r( $history->booking_date );?></td>
                            <td> <?php print_r( $history->booking_id ); ?></td>
                            <td> <?php print_r( $history->amount ); ?></td>
                            <?php $movie = Movies::find()->where( [ 'id' => $history->movie_id ] )->one(); ?>
                            <td><?php print_r( $movie->movie_name ); ?></td>
                            <?php $theatre = Theatres::find()->where( [ 'id' => $history->theatre_id ] )->one();?>
                            <td><?php print_r( $theatre->theatre_name ); ?></td>
                        </tr>
                    <?php
                    }
                ?>
  </table>
使用

class =“table table-hover”,这样当我将鼠标悬停在行上时,我会得到一个 不同的颜色。我把它改成了class =“table table-responsive”,但即便如此 我发现我的桌子没有响应。我该怎么做才能使其响应?

1 个答案:

答案 0 :(得分:0)

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ScrollView01"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivityFragment"
        android:background="@drawable/texture">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Πάγωσε η κόλαση..."
            android:textColor="@color/label_color"
            android:textSize="20dp"
            android:id="@+id/label_0"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:paddingTop="25dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Μπρρρ!"
            android:textColor="@color/label_color"
            android:textSize="20dp"
            android:id="@+id/label_1"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="50dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Κρύο"
            android:textColor="@color/label_color"
            android:textSize="20dp"
            android:id="@+id/label_2"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="75dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Έτσι κ'έτσι..."
            android:textColor="@color/label_color"
            android:textSize="20dp"
            android:id="@+id/label_3"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="100dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Καλό"
            android:textColor="@color/label_color"
            android:textSize="20dp"
            android:id="@+id/label_4"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="125dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Πολύ καλό!"
            android:textColor="@color/label_color"
            android:textSize="20dp"
            android:id="@+id/label_5"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="150dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Κάνεις κοιλιακούς!"
            android:textColor="@color/label_color"
            android:textSize="20dp"
            android:id="@+id/label_6"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="175dp" />

        <ImageView
            android:src="@drawable/thermostat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/thermostat"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true"
            android:paddingTop="@dimen/margin" />

        <ImageView
            android:src="@drawable/thermostat_slider"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/thermostat_slider"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true"
            android:paddingTop="@dimen/margin" />

        <ImageView
            android:src="@drawable/inside_thing"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/inside_thing"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true"
            android:paddingTop="@dimen/margin" />

        <ImageView
            android:src="@drawable/inside_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/inside_text"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true"
            android:paddingTop="@dimen/margin" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Τι κάνω?"
            android:textColor="@color/label_color"
            android:textStyle="bold"
            android:id="@+id/title"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="@dimen/title_margin"/>

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/text"
            android:text="@string/help_text"
            android:textColor="@color/label_color"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginTop="750dp" />

        </RelativeLayout>
</ScrollView>
package antoni4040.barufakis;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.RotateAnimation;
import android.widget.ImageView;
import android.widget.TextView;


/**
 * A placeholder fragment containing a simple view.
 */
public class MainActivityFragment extends Fragment {

    public MainActivityFragment() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_main, container, false);
        final ImageView thermostat = (ImageView) rootView.findViewById(R.id.thermostat);
        final ImageView slider = (ImageView) rootView.findViewById(R.id.thermostat_slider);
        final TextView label_0 = (TextView) rootView.findViewById(R.id.label_0);
        label_0.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                RotateAnimation animation = new RotateAnimation(0, 90,
                        (slider.getLeft() + slider.getRight())/2,
                        (slider.getTop() + slider.getBottom())/2);
                animation.setDuration(1000);
                animation.setFillAfter(true);
                slider.startAnimation(animation);
                label_0.setTextColor(Color.parseColor("#00BFFF"));
            }
        });

        return rootView;
    }
}

尝试这个

来源:https://css-tricks.com/responsive-data-tables/