Skip to content

Instantly share code, notes, and snippets.

@ChuksFestus

ChuksFestus/fixed-side-table.markdown

Created June 22, 2018 09:10
Show Gist options
  • Save ChuksFestus/642fc398b9ba77525b46b2b710d56afd to your computer and use it in GitHub Desktop.
Save ChuksFestus/642fc398b9ba77525b46b2b710d56afd to your computer and use it in GitHub Desktop.
Download ZIP
fixed side(table)
Raw
index.html
<div class="search-table-outter wrapper">
<table class="search-table inner">
<tr>
<th class="fix">Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
<th>Col7</th>
<th>Col8</th>
<th>Col9</th>
<th>Col10</th>
</tr>
<tr>
<td><a href="#">The brown fox is mad jumping all over the place for no reason </a></td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
</tr>
<tr>
<td><a href="#">The brown fox is mad jumping all over the place for no reason </a></td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
</tr>
<tr>
<td><a href="#">The brown fox is mad jumping all over the place for no reason </a></td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
</tr>
</table>
</div>
Raw
style.css
.search-table-outter {border:2px solid red;}
.search-table{table-layout: fixed; margin:40px auto 0px auto; }
.search-table, td, th{border-collapse:collapse; border:1px solid #777;}
th{padding:20px 7px; font-size:15px; color:#444; background:#66C2E0;}
td{padding:5px 10px; height:35px;}
.search-table-outter { overflow-x: scroll; }
th, td { min-width: 200px; }
tbody tr td:first-child, .fix {
position: fixed;
width: 4ch;
border:none;
background: green;
/* margin-right:30; */
}
@ChuksFestus
Copy link
Author

static row table

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment