I have a left menu which has a fixed size and a main part which should take the remaining place and contain a table. A scrollbar must appear if the table is too large.
In order to achieve this, I use a flex-box and it works well :
See the code snippet :
.h-container {
display: flex;
flex-direction: row;
}
.left-container {
width: 300px;
background-color: lightgray;
}
.container {
overflow-x:auto;
flex: 1;
}
<div class="h-container">
<div class="left-container">Left menu</div>
<div class="container">
<table>
<thead>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
<th>Column 11</th>
<th>Column 12</th>
<th>Column 13</th>
<th>Column 14</th>
<th>Column 15</th>
<th>Column 16</th>
<th>Column 17</th>
<th>Column 18</th>
<th>Column 19</th>
<th>Column 20</th>
</thead>
<tbody>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
</tbody>
</table>
</div>
</div>
Now, I am trying to insert a banner at the top of the table. In order to achieve this, I wanted to use another flex-box (a vertical flex-box nested in the horizontal flex-box).
Problem : the <table> does not take 100% of its container's width anymore. Instead, it increases the size of its container in order to fit into it without scroll bars. Because of that, a new scroll bar appear on the main container.
See the code snippet :
.h-container {
display: flex;
flex-direction: row;
}
.left-container {
width: 300px;
flex-shrink:0;
background-color: lightgray;
}
.v-container {
flex: 1;
}
.banner {
height: 50px;
background-color: lightgreen;
}
.container {
overflow-x:auto;
flex:1;
}
<div class="h-container">
<div class="left-container">Left menu</div>
<div class="v-container">
<div class="banner">
Banner
</div>
<div class="container">
<table>
<thead>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
<th>Column 11</th>
<th>Column 12</th>
<th>Column 13</th>
<th>Column 14</th>
<th>Column 15</th>
<th>Column 16</th>
<th>Column 17</th>
<th>Column 18</th>
<th>Column 19</th>
<th>Column 20</th>
</thead>
<tbody>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Any ideas?
Solution
Add min-width: 0 to .v-container (demo).
Tested in Chrome, FF and IE11.
Explanation
You're bumping up against the implied minimum sizing algorithm of flex items.
This is a default setting that prevents a flex item from shrinking past the size of its content.
The defaults are...
min-height: auto
min-width: auto
...for flex items in column-direction and row-direction, respectively.
You can override these settings with:
min-height: 0
min-width: 0
From the spec:
4.5. Implied Minimum Size of Flex
Items
To provide a more reasonable default minimum size for flex items, this
specification introduces a new auto value as the initial value of
the min-width and min-height properties defined in CSS 2.1... read more
.h-container {
display: flex;
flex-direction: row;
}
.left-container {
flex: 0 0 300px;
background-color: lightgray;
}
.v-container {
flex: 1;
min-width: 0; /* NEW */
}
.banner {
height: 50px;
background-color: lightgreen;
}
.container {
overflow-x: auto;
flex: 1;
}
<div class="h-container">
<div class="left-container">Left menu</div>
<div class="v-container">
<div class="banner">Banner</div>
<div class="container">
<table>
<thead>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
<th>Column 11</th>
<th>Column 12</th>
<th>Column 13</th>
<th>Column 14</th>
<th>Column 15</th>
<th>Column 16</th>
<th>Column 17</th>
<th>Column 18</th>
<th>Column 19</th>
<th>Column 20</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
What about using calc(100% - 300px) on the v-container and 100% width on the container.
.h-container {
display: flex;
flex-direction: row;
}
.left-container {
width: 300px;
flex-shrink:0;
background-color: lightgray;
}
.v-container {
/* flex: 1; */
width: calc(100% - 300px);
}
.banner {
height: 50px;
background-color: lightgreen;
}
.container {
overflow-x:auto;
/* flex:1;*/
width:100%;
}
<div class="h-container">
<div class="left-container">Left menu</div>
<div class="v-container">
<div class="banner">
Banner
</div>
<div class="container">
<table>
<thead>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
<th>Column 11</th>
<th>Column 12</th>
<th>Column 13</th>
<th>Column 14</th>
<th>Column 15</th>
<th>Column 16</th>
<th>Column 17</th>
<th>Column 18</th>
<th>Column 19</th>
<th>Column 20</th>
</thead>
<tbody>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
You can do another flexbox in the right div but in columns:
.h-container {
display: flex;
flex-direction: row;
}
.left-container {
width: 300px;
flex-shrink:0;
background-color: lightgray;
}
.v-container {
flex: 1;
overflow-x:auto;
display:flex;
flex-direction:column;
}
.banner {
height: 50px;
background-color: lightgreen;
}
.container {
overflow-x:auto;
flex:1;
}
<div class="h-container">
<div class="left-container">Left menu</div>
<div class="v-container">
<div class="banner">
Banner
</div>
<div class="container">
<table>
<thead>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
<th>Column 11</th>
<th>Column 12</th>
<th>Column 13</th>
<th>Column 14</th>
<th>Column 15</th>
<th>Column 16</th>
<th>Column 17</th>
<th>Column 18</th>
<th>Column 19</th>
<th>Column 20</th>
</thead>
<tbody>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Related
As the question, I try to iterate through the data in an array and finally it show out. But the problem is it show duplicate title when iterate through it.
component.html
<body>
<app-header></app-header>
<div class="container body-content" >
<br>
<h2>Title</h2>
<br>
<div *ngFor="let group of groups">
<table class="table">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th></th>
</tr>
<tr *ngFor="let types of group.Team">
<td *ngIf="types .ID">{{types.ID.firstColumn}}</td>
<td *ngIf="types .ID">{{types.ID.secondColumn}}</td>
<td *ngIf="types .ID">{{types.ID.thirdColumn}}</td>
<td *ngIf="types .ID">{{types.ID.fourthColumn}}</td>
<td *ngIf="types .ID">{{types.ID.fifthColumn}}</td>
<td *ngIf="types .ID">{{types.ID.sevenColumn}}</td>
</tr>
</table>
</div>
</div>
</body>
View on webpage
You should have the header row outside the iteration:
<table class="table">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th></th>
</tr>
<ng-container *ngFor="let group of groups">
<tr *ngFor="let types of group.Team">
<td *ngIf="types .ID">{{types.ID.firstColumn}}</td>
<td *ngIf="types .ID">{{types.ID.secondColumn}}</td>
<td *ngIf="types .ID">{{types.ID.thirdColumn}}</td>
<td *ngIf="types .ID">{{types.ID.fourthColumn}}</td>
<td *ngIf="types .ID">{{types.ID.fifthColumn}}</td>
<td *ngIf="types .ID">{{types.ID.sevenColumn}}</td>
</tr>
</ng-container>
</table>
The fiddle explains the problem. I have a scrollable table and a context menu inside it, but with the overflow-x: auto, this "context menu" stop being visible.
table {
overflow: auto;
width: 100%;
display: block;
}
.absoluteElement {
position: absolute;
}
<h2>ABSOLUTE Position Problem</h2>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
</tr>
</thead>
<tbody>
<tr>
<td style="position: absolute">
<div class="absoluteElement">
Content will scroll with the bar
</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
https://jsfiddle.net/ohwy3z6L/16/
How to make a scroll on the table and keep the context menu appearing?
I'm not sure if I've understood your question right, but here is what I've managed to do, say if something is wrong and I'll try and fix it.
tr {
overflow: auto;
width: 100%;
}
.relativeElement {
position: relative;
/* Imagine a dropdown/context menu on the grid here */
top: 10px;
left: 15px;
}
.absoluteElement {
position: absolute;
/* Imagine a dropdowncontext menu on the grid here */
top: 10px;
left: 15px;
}
<h2>RELATIVE Position Problem</h2>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="relativeElement">
Content will cut here
</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
<h2>ABSOLUTE Position Problem</h2>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
</tr>
</thead>
<tbody>
<tr>
<td style="position: relative">
<div class="absoluteElement">
Content will scroll with the bar
</div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
I was wondering if it's possible to evenly distribute the columns of a table, when the width of the columns is fit to the content.
My table has either 3 or 4 columns. The content of the columns is dynamic so could grow with different data. It's mostly one single column that will contain large amounts of data though.
Consider the following three example tables:
<table>
<thead>
<tr>
<th>Title blok<br> of blok 1</th>
<th>Title blok<br> of blok 2</th>
<th>This is the title for<br> of blok 3</th>
<th>Title blok<br> last block</th>
</tr>
</thead>
<tbody>
<tr>
<td>20</td>
<td>213, 124, 213, 124, 213, 124, 213, 124, 213, 124, 213, 124</td>
<td>€ 200.000</td>
<td>XQABBBBQQVVVSS1234567 X</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Title blok<br> of blok 1</th>
<th>Title blok<br> of blok 2</th>
<th>This is the title for<br> of blok 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>20</td>
<td>€ 200.000</td>
<td>XQABBBBQQVVVSS1234567 X</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Title blok<br> of blok 1</th>
<th>Title blok<br> of blok 2</th>
<th>This is the title for<br> of blok 3</th>
<th>Title blok<br> last block</th>
</tr>
</thead>
<tbody>
<tr>
<td>20</td>
<td>213</td>
<td>€ 200.000</td>
<td>XQABBBBQQVVVSS1234567 X</td>
</tr>
</tbody>
</table>
I'm trying to have the content of the first column start at the far most left and the content of the last column end at the far most right.
The remaning content should be evenly distributed across the table.
I've tried creating the same result with flexbox div in stead of a table, however. That worked for evenly distributing the content, however, I was not able to create the black border at the bottom of the table heads.
The content off the example table should evenly distribute as is done in the screenshot sketch.
How would I go about distributing table columns based on it's content?
FIDDLE
Have you tried width = "100%" ?
<table width="100%">
<thead>
<tr>
<th>Title blok<br> of blok 1</th>
<th>Title blok<br> of blok 2</th>
<th>This is the title for<br> of blok 3</th>
<th width="200px">Title blok<br> last block</th>
</tr>
</thead>
<tbody>
<tr>
<td>20</td>
<td>213, 124, 213, 124, 213, 124, 213, 124, 213, 124, 213, 124</td>
<td>€ 200.000</td>
<td>XQABBBBQQVVVSS1234567 X</td>
</tr>
</tbody>
</table>
<table width="100%">
<thead>
<tr>
<th>Title blok<br> of blok 1</th>
<th>Title blok<br> of blok 2</th>
<th width="200px">This is the title for<br> of blok 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>20</td>
<td>€ 200.000</td>
<td>XQABBBBQQVVVSS1234567 X</td>
</tr>
</tbody>
</table>
<table width="100%">
<thead>
<tr>
<th>Title blok<br> of blok 1</th>
<th>Title blok<br> of blok 2</th>
<th>This is the title for<br> of blok 3</th>
<th width="200px">Title blok<br> last block</th>
</tr>
</thead>
<tbody>
<tr>
<td>20</td>
<td>213</td>
<td>€ 200.000</td>
<td>XQABBBBQQVVVSS1234567 X</td>
</tr>
</tbody>
</table>
Based on your fiddle :
Try to add a fixed width in end of last-child :
&:last-child {
padding-right: 0;
width: 200px;
https://jsfiddle.net/qjx9wceh/6/
Set the table's width to 100%
Also set the table's layout property to fixed
The properties are
table-layout: auto|fixed|initial|inherit;
Reference link:
https://www.w3schools.com/cssref/pr_tab_table-layout.asp
The updated fiddle of yours -> https://jsfiddle.net/qjx9wceh/4/
table
{
width:100%;
table-layout:fixed;
text-align:left;
}
<table>
<thead>
<tr>
<th>Title blok<br> of blok 1</th>
<th>Title blok<br> of blok 2</th>
<th>This is the title for<br> of blok 3</th>
<th>Title blok<br> last block</th>
</tr>
</thead>
<tbody>
<tr>
<td>20</td>
<td>213, 124, 213, 124, 213, 124, 213, 124, 213, 124, 213, 124</td>
<td>€ 200.000</td>
<td>XQABBBBQQVVVSS1234567 X</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Title blok<br> of blok 1</th>
<th>Title blok<br> of blok 2</th>
<th>This is the title for<br> of blok 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>20</td>
<td>€ 200.000</td>
<td>XQABBBBQQVVVSS1234567 X</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Title blok<br> of blok 1</th>
<th>Title blok<br> of blok 2</th>
<th>This is the title for<br> of blok 3</th>
<th>Title blok<br> last block</th>
</tr>
</thead>
<tbody>
<tr>
<td>20</td>
<td>213</td>
<td>€ 200.000</td>
<td>XQABBBBQQVVVSS1234567 X</td>
</tr>
</tbody>
</table>
Set the followings.
table {
table-layout:fixed;
}
table td {
width:1%;
}
I want to know how to obtain proper alignment of tables on top of each other with horizontal scrollbar at bottom.
The demo HTML code is:
<div class="cntnr">
<div class="tabonecntnr">
<table class="wd100 tabone">
<tbody>
<tr>
<td>TABLENAME</td>
<td>lorem ipsum</td>
<td>ABC</td>
</tr>
</tbody>
</table>
</div>
<div class="tabtwocntnr">
<table class="wd100 tabtwo">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
<th>Header 9</th>
<th>Header 10</th>
<th>Header 11</th>
<th>Header 12</th>
<th>Header 13</th>
<th>Header 14</th>
<th>Header 15</th>
<th>Header 16</th>
<th>Header 17</th>
<th>Header 18</th>
<th>Header 19</th>
<th>Header 20</th>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
<th>Header 9</th>
<th>Header 10</th>
<th>Header 11</th>
<th>Header 12</th>
<th>Header 13</th>
<th>Header 14</th>
<th>Header 15</th>
<th>Header 16</th>
<th>Header 17</th>
<th>Header 18</th>
<th>Header 19</th>
<th>Header 20</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
The corresponding css is:
.wd100{
width:100%;
}
.cntnr{
overflow-x:auto;
width: 100%;
border: 1px solid black;
}
.bgred{
background: red;
}
.tabone,.tabtwo{
border-collapse: collapse;
}
.tabone td{
background: red;
}
.tabonecntnr,.tabtwocntnr{
width:100%;
overflow: hidden;
}
As we can see the second table is not displayed completely.
I have tried applying position:absolute; and table-layout:fixed; properties to the inner divs and tables respectively but still could not get the correct result.
I want to know where I am going wrong.
Please contribute...
remove overflow:hidden; on .tabonecntnr,.tabtwocntnr
see this FIDDLE
demo of exactly what you want
To do : As chadocat suggested remove overflow: hidden; from .tabonecntnr
Then, to cover the top-table to full width as below table, do :
.wd100 {
min-width:1000%; /* hack to give full width*/
overflow:hidden; /*hide when the content is over */
}
why need hack??? because...table or div would take up only 100% of the width....you need to cover, even the overflow which is extended-width....greater that 100% width!!!
the following change is to be made to your css
.tabonecntnr,.tabtwocntnr{
width:100%;//overflow hidden removed.
}
I would like to know how to vertically align two tables with horizontal scroll at bottom.
The following is the HTML code:
<div class="cntnr">
<div class="tabtwocntnr">
<table class="tabtwo">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
<th>Header 9</th>
<th>Header 10</th>
<th>Header 11</th>
<th>Header 12</th>
<th>Header 13</th>
<th>Header 14</th>
<th>Header 15</th>
<th>Header 16</th>
<th>Header 17</th>
<th>Header 18</th>
<th>Header 19</th>
<th>Header 20</th>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
<th>Header 9</th>
<th>Header 10</th>
<th>Header 11</th>
<th>Header 12</th>
<th>Header 13</th>
<th>Header 14</th>
<th>Header 15</th>
<th>Header 16</th>
<th>Header 17</th>
<th>Header 18</th>
<th>Header 19</th>
<th>Header 20</th>
</tr>
</thead>
</table>
</div>
<div class="tabthreecntnr">
<table class="tabthree">
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 6</td>
<td>Content 7</td>
<td>Content 8</td>
<td>Content 9</td>
<td>Content 10</td>
<td>Content 11</td>
<td>Content 12</td>
<td>Content 13</td>
<td>Content 14</td>
<td>Content 15</td>
<td>Content 16</td>
<td>Content 17</td>
<td>Content 18</td>
<td>Content 19</td>
<td>Content 20</td>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
<td>Content 6</td>
<td>Content 7</td>
<td>Content 8</td>
<td>Content 9</td>
<td>Content 10</td>
<td>Content 11</td>
<td>Content 12</td>
<td>Content 13</td>
<td>Content 14</td>
<td>Content 15</td>
<td>Content 16</td>
<td>Content 17</td>
<td>Content 18</td>
<td>Content 19</td>
<td>Content 20</td>
</tr>
</tbody>
</table>
</div>
</div>
The corresponding css is:
.tabtwo,.tabthree{
border-collapse: collapse;
table-layout:fixed;
}
.tabtwo th, .tabthree td{
border-right: 1px solid black;
}
.tabthree td{
text-align: center;
border-top: 1px solid #000;
}
.tabtwocntnr,.tabthreecntnr{
width:100%;
}
.cntnr{
overflow-x:auto;
width: 100%;
border: 1px solid black;
}
The fiddle is :
http://jsfiddle.net/8H5Ek/
As we can see in this fiddle the two tables are not aligned properly(with respect to each other).There is also some white space at the right corner of the bottom table. I have tried resolving it by applying table-layout: fixed; to both the tables.
I am unable to achieve the desired result.
Please help me by contributing.
Without giving explicit widths, controlling tables can be very tricky.
See this fiddle: http://jsfiddle.net/8H5Ek/3/
Add these styles to your css:
table { width: 100%; }
th, td { width: 84px; }
You have to estimate the width of the td carefully.
Edit:
Here is another fiddle: http://jsfiddle.net/8H5Ek/12/
You can control the content length by using ellipsis. Moreover, you do not need those two inner divs (tabtwocntnr and tabthreecntnr). You can rid of them.
th, td {
width: 84px;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
try changing width:100% to width:auto on the table css and then see how the content re-sizes the first header cell
for .tabtwo,.tabthree you have to set width:100%; and set the width for parent...add
html, body {
width:100%;/* added */
height:100%;/* added */
margin:0;/* added */
padding:0;/* added */
}
then you have to use colspan to fix the width of th
demo
EDIT
okay...solution was there in front of eyes...bit of your bad markup played foul....
thead and tbody is used for marking things in single table...you have used 2 different tables for it, that's why alignment issue is there..
delete this and you are done:
</table>
</div>
<div class="tabthreecntnr">
<table class="tabthree">
final demo