Question

我想创建一个像this

这样的响应式表格

现在，我为每个单元格提供了大量数据（动态填充），如果您注意到此表格与最小屏幕尺寸（300像素或更小）的内容重叠。虽然这可以管理，但如果可能的话，我想为此提供任何最佳解决方案。

任何帮助都将不胜感激。

Answer 1

这可能是您的答案，请全屏查看结果

＆＃13;

table tr td,table tr td{
		text-align: center;
	}
	@media only screen and (max-width: 500px) {

	 table,head,tbody,th,td,tr {
		display: block;
	}
	thead tr {
	display: none;
	}
	tr {
	 border: 1px solid #ccc; 
	}
	td {
	border: none;
	border-bottom: 1px solid #eee;
	position: relative;
	padding-left: 50%;
	white-space: normal;
	text-align:left;
	min-height: 30px;
	overflow: hidden;
	word-break:break-all;
	}
	td:before {
	position: absolute;
	top: 6px;
	left: 6px;
	width: 45%;
	padding-right: 10px;
	text-align:left;
	font-weight: bold;
	}
	td:before { content: attr(data-title); }
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table width="100%">
	<thead>
		<tr>
			<th>Name</th>
			<th>ID</th>
			<th>designation</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td data-title="Name">John</td>
			<td data-title="ID">100</td>
			<td data-title="designation">Software Engineer</td>
		</tr>
		<tr>
			<td data-title="Name">Shyam</td>
			<td data-title="ID">101</td>
			<td data-title="designation">Quality Analyst</td>
		</tr>
		<tr>
			<td data-title="Name">Mark</td>
			<td data-title="ID">102</td>
			<td data-title="designation">Software Engineer</td>
		</tr>
		<tr>
			<td data-title="Name">Bill</td>
			<td data-title="ID">104</td>
			<td data-title="designation">Quality Analyst</td>
		</tr>
		<tr>
			<td data-title="Name">Arjun</td>
			<td data-title="ID">105</td>
			<td data-title="designation">Human Resources</td>
		</tr>
		<tr>
			<td data-title="Name">Pratyush</td>
			<td data-title="ID">106</td>
			<td data-title="designation">Software Engineer</td>
		</tr>
		<tr>
			<td data-title="Name">Anant</td>
			<td data-title="ID">101</td>
			<td data-title="designation">Administrative Dept</td>
		</tr>
	</tbody>
</table>
</body>
</html>

＆＃13;

在上面的代码片段中，您可以使用媒体查询，您想要堆叠表格的屏幕大小，例如：300px

Answer 2

Kailash Chandra的回答为我提供了我正在尝试做的事情的线索。我想要一个在大多数情况下都非常紧凑的2列表，并且Bootstrap总是在第一列上强制采用最小宽度。我只是想要一个像桌子一样工作的桌子，直到我减小手机尺寸，然后将它变成一行，交替显示标题和下面的值。事实证明，使用这部分css非常简单，它基本上只是使用相同的技巧使它像表一样退出。在这种情况下，我不会根据自己的需要更改任何其他内容，但是添加一些样式很容易。

@media only screen and (max-width: 400px) {
    .flyout-table table,
    .flyout-table th,
    .flyout-table td,
    .flyout-table tr {
        display: block;
    }
}

如何在不使用引导程序的情况下制作响应表

2 个答案: