1

I would like to create a responsive table like this

Now, I have some large content of data(which is filled dynamically) for each cell, and if you notice this table overlaps the contents on least screen size(300 px and less). Though this can be managed, but I would like to have any optimal solution for this, if possible.

Any help would be appreciated.

1

2 Answers 2

4

It may be your answer please see result in full screen

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>

In above snippet you can use media query which screen size you want to stack td of table eg:300px

1
  • Thanks for solution. It looks great as row height is managed based on content. Though in case where my title exceeds a limit, let say data-title=MyExtraLongDataTitleThatExceedsALimit, in this case the row height is not automatically manged. I hope javascript would have to be used for that.
    – Anant
    Jun 9, 2016 at 13:36
0

Kailash Chandra's answer gave me the clue for something I was trying to do. I wanted a 2 column table that was very compact in most cases, and Bootstrap always forces a minimum width on the first column. I just wanted a table that would act like a table until I got down to phone size, and then have it turn into a single row alternating a heading and the value below it. That turned out to be pretty trivial with this bit of css, which basically just uses the same trick to make it quit acting like a table. In this case I'm not changing anything else about it as it meets my need, but it would be easy enough to add some styling.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.