Use divs instead of table tags

Tables are non-responsive by design and require more overrides to be cross-browser compatible

src/styles/_base.sass

@@ -115,3 +115,27 @@ select.input-transparent
 	color: $color-text-dark-secondary
 	margin-left: auto
 	font-size: .9em
+
+.table
+	display: table
+	width: 100%
+
+	.table-row
+		display: table-row
+		&:hover
+			background-color: $color-background-light
+
+	.table-head
+		display: table-header-group
+
+		.table-cell
+			padding: 5px
+			font-size: .9em
+			color: $color-text-dark-secondary
+
+	.table-body
+		display: table-row-group
+
+	.table-cell
+		display: table-cell
+		border-bottom: thin solid $color-background-dark

src/styles/_config.sass

@@ -73,3 +73,5 @@ $screen-md-max: $screen-lg-min - 1
 
 
 $sidebar-width: 50px
+
+$shots-list-thumbnail-width: 100px

src/styles/_shots.sass

@@ -0,0 +1,23 @@
+.table
+	.table-head
+		.table-cell
+			&.shot-thumbnail
+				width: $shots-list-thumbnail-width
+
+			&.task-type
+				text-transform: capitalize
+
+	.table-body
+		display: table-row-group
+		.table-cell
+			&.shot-name
+				padding-left: 10px
+
+			&.task-name
+				max-width: 120px
+				+text-overflow-ellipsis
+
+				a
+					display: block
+
+

src/styles/main.sass

@@ -4,3 +4,4 @@
 
 @import _base
 @import _tasks
+@import _shots

src/templates/attract/shots/for_project.jade

@@ -8,25 +8,27 @@
 
 		a#task-add(href="javascript:task_create('{{ project.url }}');") + Create Shot
 
-	table.table
+	.table
-		thead
+		.table-head
-			tr
+			.table-row
-				td Name
+				.table-cell.shot-thumbnail Thumbnail
+				.table-cell.shot-name Name
 				| {% for task_type in task_types %}
-				td.text-capitalize {{ task_type or 'other' }}
+				.table-cell.task-type {{ task_type or 'other' }}
 				| {% endfor %}
-		tbody
+		.table-body
 			| {% for shot in shots %}
-			tr
+			.table-row
-				td {{ shot.name }}
+				.table-cell
+					img(src="http://placehold.it/100x60")
+				.table-cell.shot-name {{ shot.name }}
 				| {% for task_type in task_types %}
-				td
+				.table-cell.task-name
 					| {% for task in tasks_for_shots[shot._id][task_type] %}
 					a(
 						href="javascript:task_open('{{ task._id }}', '{{ project.url }}');",
 						class="status-{{ task.properties.status }}")
 						span(class="task-name-{{ task._id }}") {{ task.name }}
-					br
 					| {% endfor %}
 					| {% if not tasks_for_shots[shot._id][task_type] %}
 					a(