Question

我目前正在使用this tutorial创建一个在桌面和手机上都很好看的自适应HTML表格。（甚至平板电脑）

问题是，因为如果你愿意，每个帖子都有不同的“类别”，我必须继续复制CSS并使用responsive2或responsive3再次粘贴它......

这通常有效，但有时却没有，而且对我来说真的很令人沮丧。

有没有办法只为所有具有不同数据的表使用1套CSS？

validate

Answer 1

正如其他人所说的那样，你的代码片段不起作用，而且我们错过了HTML，但我相信我理解你所获得的内容，所以这里有一个解决方案你可以用来大大简化你的CSS：使用属性引用，而不是将content属性的确切文本放在CSS中。 data attribute非常适用于此目的，因为它可以让我们存储随机文本。

您可以在表格的HTML中指定内容，如下所示：

<td data-text="Your mobile content here">Lorem ipsum</td>

这样，您只需设置一次CSS并忘记它，并将内容保留在HTML所在的位置。

简单示例：

＆＃13;

html {
  height: 100%;
  background-color: #D6DBDF;
}
body {
  padding: 40px;
}
table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid #5d6d7e;;
}
thead {
  text-align: center;
  font-size: 1.4em;
  background-color: #4682B4;
  color: #edeff1;
}
tbody {
  background-color: #edeff1;
}
tr {
  border-top: 1px solid #5d6d7e;
}
td {
  height: 50px;
  padding: 10px;
  box-sizing: border-box;
}
td:not(:last-child) {
  border-right: 1px solid #5d6d7e;
}
@media all and (max-width: 600px) {
  table * {
    display: block;
  }
  thead {
    display: none;
  }
  td::before {
    display: block;
    content: attr(data);
    padding: 5px 0;
	font-weight: bold;
  }
  td {
    border-right: none !important;
	height: auto;
	border-top: none;
  }
  tr {
    border-top: 1px solid #5d6d7e;
  }
  tr:nth-child(even) .td {
    background-color: #99a3a4;
    color: white;
  }
  tr:nth-child(even) td {
	background-color: #4682B4;
  }
}

＆＃13;

<h1 class="page-title">Best Bananas</h1>

<table>
	<thead>
		<tr>
			<th data="Not shown in mobile">Model</th>
			<th data="Not shown in mobile">Image</th>
			<th data="Not shown in mobile">Colour</th>
			<th data="Not shown in mobile">Length</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td data="Model:">Big Bananas</td>
			<td data="Image:">Not available</td>
			<td data="Colour:">4GB</td>
			<td data="Length:">128GB Flash storage</td>
		</tr>
		<tr>
			<td data="Model:">Long Bananas</td>
			<td data="Image:">Not available</td>
			<td data="Colour:">4GB</td>
			<td data="Length:">128GB Flash storage</td>
		</tr>
		<tr>
			<td data="Model:">Small Bananas</td>
			<td data="Image:">2.6Ghz dual-core Intel Core i5</td>
			<td data="Colour:">8GB</td>
			<td data="Length:">128GB Flash storage</td>
		</tr>
		<tr>
			<td data="Model:">Bunch of Bananas</td>
			<td data="Image:">2GHz quad-core Intel Core i7</td>
			<td data="Colour:">16GB</td>
			<td data="Length:">256GB Flash storage</td>
		</tr>
	</tbody>
</table>

＆＃13;

可堆叠表格 - HTML / CSS问题

1 个答案: