表中的两个标题，在一个表中显示响应

Question

我想做一个响应表：

我尝试用表格和div来做，但它不起作用......

＆＃13;

＆＃13;

#states {
    font-family: "gothic";
    font-size: 11px;
    color: #000;
    width: 100%;
    margin-top: 5px;
    z-index: 99px;
}

＆＃13;

<table id="states" style="overflow-x:auto; margin-left: 40px; margin-top: 4px; padding-right: 10px; border-left: none; border-right: #444242;">
	<thead>
		<tr>
			<th colspan="1" style="text-align: left;  border-radius:  15px 9000px 20px .1px;    font-size: 10px; font-family: 'gothic'; background-color: #00508e; border:none;
			width: 5cm; padding: 10px; color: white;">
			A
		</th>
	</tr>
	<tr style="margin: -0cm -1cm 0cm 1cm;border: 0; border-top: 3px solid #5b5b5e; line-height: 1; z-index: 1; ">
		<th  style="font-size:12px; border:left: #444242; border-right: none;">
			a1
		</th>
		<th style="border:none; font-size:12px;">
			b1
		</th>
		<th style="border:none; font-size:12px;">
			c1
		</th>
		<th style="border:none; font-size:12px;">
			d1
		</th>
		<th style="background-color:#d6e7ee; border:none; font-size:12px;">
			e1
		</th>
		<th style="background-color:#d6e7ee; border:none; font-size:12px;">
			f1
		</th>
		<th style="background-color:#d6e7ee; border:none; font-size:12px;">
			g1
		</th>
		<th style="background-color:#d6e7ee; border:none; font-size:12px;">
			h1
		</th>
		<th style="background-color:#d6e7ee; border-left: none; font-size:12px;">
			i1
		</th>
	</tr>
</thead>
<tbody>
	<tr style="background-color: #fff; font-size:12px;">
		<td style="font-size:12px;">
			a2
		</td>
		<td style="font-size:12px;">
			b2
		</td>
		<td style="font-size:12px;">
			c2
		</td>
		<td style="font-size:12px;">
			d2
		</td>
		<td style="font-size:12px;">
			e2
		</td>
		<td style="font-size:12px;">
			f2
		</td>
		<td style="font-size:12px;">
			g2
		</td>
		<td style="font-size:12px;">
			h2
		</td>
		<td style="font-size:12px;">
			i2
		</td>
	</tr>

</tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

显然，我添加了类表响应，我尝试使用div，但它也不起作用，因为它有两个标题： A y a1，b1 ，c1 ......

我该怎么办？

使用DIVS这是我的结果：

Answer 1

你可以查看mediaqueries和flex来打破布局。

有效使用colspan属性（换句话说，正确构建您的table）。

每个样式都应该移到样式表中。

示例（也可以在整页中运行以查看工作中的媒体查询）

注意：两个thead是必需的，因此它可能会中断并且一个站在一边tbody。

#states {
  margin: 1em auto;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
  font-size: 12px;
}

#states td,
#states thead + thead th {
  width: 6em;
  height: 6em;
  background: #56D0A0
}

#states td {
  background: #5BD0D0
}

#states th[colspan="2"] {
  text-align: left;
  border-radius: 0 10em 0 0;
  font-size: 10px;
  font-family: 'gothic';
  background-color: #00508e;
  border: none;
  width: 5cm;
  padding: 10px;
  box-sizing: border-box;
  color: white;
}

thead:first-of-type {
  border-bottom: 3px solid #5b5b5e;
}

@media (max-width: 640px) {/* break point*/
  table#states {
    display: flex;
    flex-wrap: wrap;
    width: 50%;
    min-width: 15em;
  }
  #states thead:first-of-type {
    width:100%;
  }
  #states thead:first-of-type [colspan="2"] {
    width: 100%;
    border-radius: 0;
  }
  thead:first-of-type th {
    display: none;
  }
  thead:first-of-type th[colspan="2"] {
    width: 100%;
    display: block;
  }
  #states thead,
  #states tbody,
  #states tr,
  #states thead + thead th,
  #states td {
    width: auto;
    display: block;
    flex: 1 0 auto;
  }
  /* you'll need more flex to put th and td side by side if content is uneven ,
  but can be seen later */
}

<table id="states">
  <thead>
    <tr>
      <th colspan="2">
        A
      </th>
      <th colspan="7"></th>
    </tr>
  </thead>
  <thead>
    <tr>
      <th>
        a1
      </th>
      <th>
        b1
      </th>
      <th>
        c1
      </th>
      <th>
        d1
      </th>
      <th>
        e1
      </th>
      <th>
        f1
      </th>
      <th>
        g1
      </th>
      <th>
        h1
      </th>
      <th>
        i1
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        a2
      </td>
      <td>
        b2
      </td>
      <td>
        c2
      </td>
      <td>
        d2
      </td>
      <td>
        e2
      </td>
      <td>
        f2
      </td>
      <td>
        g2
      </td>
      <td>
        h2
      </td>
      <td>
        i2
      </td>
    </tr>

  </tbody>
</table>