is it possible to put table in scrollable div? I tried, but then displaying bigger table with more rows and columns, distorts others divs, i mean shows in that scrollable div other divs from lower.
Thank you,
Best Regards
HTML
<div class="table-wrapper">
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
</table>
</div>
CSS
.table-wrapper
{
border: 1px solid red;
width: 100px;
height: 50px;
overflow: auto;
}
table
{
border: 1px solid black;
margin-right: 20px;
}
td
{
width: 20px;
height: 20px;
background-color: #ccc;
}
JSFiddle
http://jsfiddle.net/gvee/v54Sz/
Set a style on your div with the width and height and set overflow to auto
Related
Sorry if the title isn't descriptive, I didn't know how to word it. Here's the table in question.
Is it possible for me to remove the white border (the background of the table) from this upper-left cell? I still want this white background between the rest of the cells, but in that upper-left I want it removed. Here's how I want it to look.
My initial thought is to have some ::after pseudo-element on that cell that has some border or padding that can cover that gap between the cell and page background, but I don't know how to do that. Any ideas?
Here's the CSS on this page.
body{
background: #C3DEF2;
font-family: Noto Sans, Roboto, Helvetica, Arial, sans-serif;
}
table{
background: white;
table-layout: fixed;
}
tr:nth-child(even){
background: lightgray;
}
td{
padding: 20px;
}
td.corner{ /* cell in upper-left corner */
background: #C3DEF2;
}
.head1{ /* top row */
text-align: center;
}
.head2{ /* leftmost column */
text-align: right;
}
.head1, .head2{
background: lightblue;
text-transform: uppercase;
font-weight: 600;
}
As requested, here's some of the HTML relating to this part of the table.
<table id="the_table" width="100%">
<tbody>
<tr class="head1">
<td class="corner"></td>
<td>Candidate 1</td>
<td>Candidate 2</td>
</tr>
<tr>
<td class="head2">Education</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="head2">Election Reform</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="head2">Environment</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="head2">Foreign Policy</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Probably more importantly, where does this border come from? It's the white background of the table, but what causes that space between the cells?
Here's a quick solution:
HTML:
<table>
<tr>
<td style="border: 1px inset white;">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
CSS:
table {
margin: 20px;
border-collapse: collapse;
border-spacing: 0;
}
td {
width: 40px;
height: 40px;
border: 1px solid black;
text-align: center;
}
td:hover {
border: 1px solid red;
}
DEMO:
https://liveweave.com/7eIF6k
I need a table styling like below, where the milestone label is displayed without any spacing with the table content itself wile on the right of it I have a couple of additional information displayed in cells with spacing between them and below content.
divs can work as well.
You can create the cells at the top right as seperate tables with position: absolute and make the cell under those (the top right of the large table, spanning several columns) invisible as shown below.
table {
border-collapse: collapse;
border: none;
}
th,
td {
border: 1px solid blue;
padding: 15px 20px;
}
th {
background: #ccc;
border: 1px solid red;
}
.head1 {
background: #aaa;
border-color: green;
}
.nohead {
display: none;
}
table.t1 {
margin-top: 20px;
}
table.t2 {
position: absolute;
right: 180px;
top: 10px;
}
.t2 td {
padding: 2px 15px;
width: 50px;
text-align: center;
border-color: orange;
}
<table class="t1">
<tr>
<td colspan="3" class="head1">The main header</td>
<td colspan="4" class="nohead">nothing to see</td>
</tr>
<tr>
<th>Cell 1</th>
<th>Cell 2</th>
<th>Cell 3</th>
<th>Cell 4</th>
<th>Cell 5</th>
<th>Cell 6</th>
<th>Cell 7</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
</tr>
</table>
<table class="t2">
<tr>
<td>A1</td>
<td>A2</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
</tr>
</table>
I have applied following CSS to my table.
thead, tbody
{
display: block;
}
tbody
{
height: 200px;
overflow-y: auto;
overflow-x: auto;
}
The objective is to make the thead fixed, and keep tbody scrolling. Before applying the above CSS, thead and tbody content was alligned properly. But after putting the CSS, the content is mis-aligned. Even tr elements doesn't fill the entire space of their container. Can someone help me with this? Any help will be appreciated.
try this code for sticky header and scrollable body for table. hope will work for you.
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th, td {
text-align: left;
padding: 8px;
}
th{
position: sticky;
position: -webkit-sticky;
top: -1px;
z-index: 999;
background-color: #000;
color:white;
}
.sticky-table {
height: 200px;
overflow: auto;
}
<div class="sticky-table">
<table>
<tr>
<th>First Name</th>
<th>m-1</th>
<th>m-2</th>
</tr>
<tr>
<td>user 1</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>user 2</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>user 3</td>
<td>67</td>
<td>67</td>
</tr>
<tr>
<td>user 4</td>
<td>67</td>
<td>67</td>
</tr>
<tr>
<td>user 5</td>
<td>Johnson</td>
<td>67</td>
</tr>
</table>
</div>
I have code like this:
table {
table-layout: fixed;
border-collapse: collapse;
}
th, td {
width: 120px;
border: 1px solid black;
}
div {
overflow: scroll;
width: 300px;
}
<div>
<table>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
<tr>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
</tr>
</table>
</div>
why cells don't have width of 120px? I want the width of the table to be bigger then the width of the div so I can scroll the div.
Change your code with this.
<!DOCTYPE html>
<html>
<head>
<style>
table {
table-layout: fixed;
border-collapse: collapse;
}
table, th, td {
width: 120px;
border: 1px solid black;
}
div {
overflow: scroll;
}
</style>
</head>
<body>
<div>
<table>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
<tr>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
</tr>
</table>
</div>
</body>
</html>
In this example
<table>
<tr>
<td class="top">
1 <div id="overlay"></div>
</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td class="top">5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td class="top">9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td class="top">13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</table>
CSS:
td {
width:50px;
height:50px;
background:#aaa;
}
#overlay {
top:100px;
left:30px;
background:#0a0;
width:100px;
height:100px;
position:absolute;
z-index:0;
}
.top{
background:#333;
z-index:100;
}
Demo:
http://jsfiddle.net/4dfppb7k/
The overlay move dynamically with the mouse.
How can I make the overlay div goes under the first column ( cells : 1,5,9,13) but over the rest of the table cells ?
z-index only works on element which are positioned. If you add position: relative to your top class, your z-index will have the desired effect.
http://jsfiddle.net/4dfppb7k/1/
.top{
position: relative;
background:#333;
z-index:100;
}
You need to position(position: relative) the tds(1, 5, 9, 13) for the z-index to work.
Also, you could use tr td:first-child to avoid using the .top class.
td {
width: 50px;
height: 50px;
background: #aaa;
}
#overlay {
top: 100px;
left: 30px;
background: #0a0;
width: 100px;
height: 100px;
position: absolute;
z-index: 0;
}
tr td:first-child {
background: #333;
position: relative;
z-index: 1;
}
<table>
<tr>
<td>
1
<div id="overlay"></div>
</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</table>