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

【问题标题】：How to make responsive table without using bootstrap如何在不使用引导程序的情况下制作响应式表格
【发布时间】：2016-06-09 10:31:26
【问题描述】：

我想创建一个响应式表格，例如 this

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

任何帮助将不胜感激。

【问题讨论】：

到目前为止你尝试过什么？请添加minimal reproducible example 并突出显示您遇到的问题。

标签： html css responsive-design dynamic-data

【解决方案1】：

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

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); }
}

<!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>

在上面的 sn-p 中，您可以使用媒体查询要堆叠表的 td 的屏幕尺寸，例如：300px

【讨论】：

感谢您的解决方案。它看起来很棒，因为行高是根据内容管理的。虽然如果我的标题超过限制，比如说data-title=MyExtraLongDataTitleThatExceedsALimit，在这种情况下，行高不会自动管理。我希望必须为此使用 javascript。

【解决方案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;
    }
}

【讨论】：