如何使使用 <div> 标签创建的这个表具有响应性？答案

【问题标题】：How to make this table created with <div> tag responsive?如何使使用 <div> 标签创建的这个表具有响应性？
【发布时间】：2016-12-03 01:42:42
【问题描述】：

图片中的表格是使用<div>标签创建的。我使用了<div> 标签，因为只将信息放在表格中是不可取的。尽管我尝试使用<table> 标签创建完全相同的表，但仍然没有成功。

桌子的图片

对于此表，代码下方：

@charset "UTF-8";

/* Global Styles */

body {
  color: #575c7a;
  line-height: 1.5em;
  font-family: Arial;
  font-size: 14px;
  background: #515673 url(../images/background_gradient.jpg) repeat-x 0px 0px;
}
.page {
  max-width: 980px;
  margin: 0px auto;
  position: relative; background-color: #fff;
}
a { color: #de9000; }
a:hover { color: #009eff; }
a.cta {
  text-transform: uppercase;
  font-size: .9em;
  font-weight: bold;
  text-decoration: none;
  margin: .5em 0 0 0;
  padding: 0px 12px 0px 0px;
  background: url(../images/cta_arrow.png) no-repeat right 0px;
}
a.cta:hover { background-position: right -50px; }

nav a {
  color: #f5a06e;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  font-weight: bold;
  font-size: .9em;
}
nav a:hover { color: #fff; }

footer { font-size: .85em; color: #9ba0bd; background-color: #515673; padding: 10px 10px 10px 0px; }

/* This class is for placing images inside the cell of the table created using <div> tag */
.image {
  width:240px; /*width of your image*/
  height:120px; /*height of your image*/
  margin:0; /* If you want no margin */
  background-repeat: no-repeat;
  padding:0; /*if your want no padding */
  float: right;

}
.image.one { background-image: url(../images/kashmir-vaishnadevi.jpg) ; }
.image.two { background-image: url(../images/kashmir-amritsar.jpg) ; }
.image.three { background-image: url(../images/leh-ladakh.jpg); }
.image.four { background-image: url(../images/haridwar-agra.jpg); }
.image.five { background-image: url(../images/shimla-manali.jpg); }
.image.six { background-image: url(../images/rajasthan.jpg); }
.clear-fix { clear: both; line-height: 1px; }

/* ***Upto this is the part of the file "screen_styles.css"*** */

/* ***Below is the part of the file "screen_layout_large.css"*** */

@charset "UTF-8";

/* Layout (global rules for all sizes) */
body { margin: 0px; padding: 0px; }
header a.logo { display: block; position: absolute; background-position: 0px 0px; background-repeat: no-repeat; }
nav {
  width: 100%;
  display: block;
  position: absolute;
  background-color: #a6430a;
}

/* Layout Large Screens (default for older browsers) */

nav { top: 275px; }
nav a { margin: 12px 0px 10px 20px; }

article { padding: 60px 20px 10px 20px; }

/* I created this class to determine the position of the table in the page because the table is created with <div> tag instead of <table> tag */
.table_container {
  width: 80%;
  padding-left: 80px;
}

/* This is a table created using <div></div> tag */

<style type="text/css">
.Table
{
  display: table;
}

.Title
{
  display: table-caption;
  text-align: center;
  font-weight: bold;
  font-size: larger;
  text-decoration: underline;
  color: #a6430a;
}

.Heading
{
  display: table-row;
  font-weight: bold;
  text-align: center;
}
.Row
{
  display: table-row;
}
.Cell
{
  display: table-cell;
  border: none;
  /*      border-width: thin; */
  padding-left: 5px;
  padding-right: 5px;
  text-align: right;
}
a.cta 
{
  text-transform: uppercase;
  font-size: .9em;
  font-weight: bold;
  text-decoration: none;
  margin: .5em 0 0 0;
  padding: 0px 12px 0px 0px;
  background: #a6430a;
}
</style>
/* This is a table created using <div></div> tag - End */

@media screen and (max-width: 990px) {
  footer { padding-left: 20px; }
}

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />
    <title>My-domain.com | The Travel People</title>
    <link rel="stylesheet" type="text/css" href="css/screen_styles.css" />
    <link rel="stylesheet" type="text/css" href="css/screen_layout_large.css" />
    <link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)"   href="css/screen_layout_small.css">
    <link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)"  href="css/screen_layout_medium.css">
    <!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
  </head>
  <body>
    <div class="page">
      <header>
        <a class="logo" href="index.html"></a>
      </header>
      <article>
        <h1>Package Tours</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="#">Duis aute irure</a> dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </article>
      <!-- This is a table created using <div> tag -->

      <div class="Table">
        <div class="table_container">
          <div class="Title">
            <p>Tour Packages</p>
          </div>
          <div class="Heading">
            <div class="Cell">
              <p>Kashmir - Vaisnodevi</p>
            </div>
            <div class="Cell">
              <p>Kashmir - Vaisnodevi - Amritsar</p>
            </div>
            <div class="Cell">
              <p>Leh - Ladakh</p>
            </div>
          </div>
          <div class="Row">
            <div class="Cell">
              <div class="image one"></div>
              <p>Duration: 13 Days<br>
                Total Cost: 14,000/-<br>
                Starting Date 1: 7th September, 2016<br>
                Starting Date 2: 16th September, 2016</p>
              <p><a class="cta" href="">Register Here</a></p>
            </div>
            <div class="Cell">
              <div class="image two"></div>
              <p>Duration: 15 Days<br>
                Total Cost: 15,500/-<br>
                Starting Date 1: 7th September, 2016<br>
                Starting Date 2: 16th September, 2016</p>
              <p><a class="cta" href="">Register Here</a></p>
            </div>
            <div class="Cell">
              <div class="image three"></div>
              <p>Duration: 9 Days<br>
                Total Cost: 21,000/-<br>
                Starting Date 1: Would be announced<br>
                Starting Date 2: Would be announced</p>
              <p><a class="cta" href="">Register Here</a></p>
            </div>
          </div>
        </div>
        <div class="Table">
          <div class="table_container">
            <div class="Heading">
              <div class="Cell">
                <p>Haridwar - Mussoorie - Delhi - Agra</p>
              </div>
              <div class="Cell">
                <p>Shimla - Kullu - Manali</p>
              </div>
              <div class="Cell">
                <p>Rajasthan</p>
              </div>
            </div>
            <div class="Row">
              <div class="Cell">
                <div class="image four"></div>
                <p>Duration: 11 Days<br>
                  Total Cost: 10,500/-<br>
                  Starting Date 1: 7th September, 2016<br>
                  Starting Date 2: 16th September, 2016<br>
                  Starting Date 3: 22nd December, 2016</p>
                <p><a class="cta" href="">Register Here</a></p>
              </div>
              <div class="Cell">
                <div class="image five"></div>
                <p>Duration: 11 Days<br>
                  Total Cost: 11,500/-<br>
                  Starting Date: 8th September, 2016</p>
                <p><a class="cta" href="">Register Here</a></p>
              </div>
              <div class="Cell">
                <div class="image six"></div>
                <p>Duration: 15 Days<br>
                  Total Cost: 15,500/-<br>
                  Journey Starts: 7th September, 2016<br>
                  Starting Date 1: 17th September, 2016<br>
                  Starting Date 2: 18th December, 2016</p>
                <p><a class="cta" href="">Register Here</a></p>
              </div>
            </div>
          </div>          
          <div class="clear-fix"></div>
          <nav>
            <a href="index.html">Home</a>
            <a href="about.html">About Us</a>
            <a href="services.html">Services</a>
            <a href="contact.html">Contact Us</a>
          </nav>
          <footer>
            &copy; My Company
          </footer>
        </div>
      </div>
    </div>
  </body>
</html>

我在这里几乎给出了两个 CSS 文件的完整代码，即“screen_styles.css”和“screen_layout_large.css”，因为如果有人想重新创建它们以供理解，那么这不是问题。我还有两个用于中小屏幕设备的 CSS 文件，但我认为，如果这个问题得到解决，这两个文件可能不会给我带来任何问题。

我尝试使用<table> 标签创建相同的东西，但不能。这是所需的布局，如果不是不可能的话，我无法改变这种设计（外观）。

【问题讨论】：

如果你使用 bootstrap 就可以很容易地做出准确的视图

标签： html css html-table

【解决方案1】：

相信我，这需要付出很多努力。当你添加东西时，问题会越来越大。

您是否尝试过使用引导程序？这将花费您一些时间，但会帮助您获得一个好的页面。

这里有一些你可以从引导程序中应用的东西：

http://www.w3schools.com/bootstrap/bootstrap_images.asp http://www.w3schools.com/bootstrap/bootstrap_jumbotron_header.asp

http://www.w3schools.com/w3css/w3css_cards.asp http://www.w3schools.com/w3css/w3css_tables.asp

试试这些东西，我相信你会喜欢的

【讨论】：