Hello I need a fluid table with other div in the same line. Here you can see a fiddle where I could do what I want, which works perfectly on Chrome. The problem is when I try it on Firefox. The column width is the minimum, it is not expanding as in Chrome.
<div class="container" style="background-color: lightgray; overflow: auto;">
<div style="height: 200px; overflow-y: auto; margin-right: 300px; float: left;">
<table border="1" style="">
<theader>
<tr>
<th>ID</th>
<th style="width:100%">Name</th>
<th>Time</th>
</tr>
</theader>
<tbody>
<tr>
<td>1</td>
<td style="word-break: break-all">Dan</td>
<td>00:00:00.000</td>
</tr>
<tr>
<td>2</td>
<td style="word-break: break-all">Bob</td>
<td>00:00:00.000</td>
</tr>
<tr>
<td>3</td>
<td style="word-break: break-all">Jenn</td>
<td>00:00:00.000</td>
</tr>
</tbody>
</table>
</div>
<div style="background-color: #65de4f80; width: 300px; height: 200px; margin-left: -300px; float: left;"></div>
</div>
REmove float : left and also the overflow: auto on top you don 't need
<div class="container" style="background-color: lightgray;">
<div style="height: 200px; overflow-y: auto; margin-right: 300px;">
<table border="1" style="">
<theader>
<tr>
<th>ID</th>
<th style="width:100%">Name</th>
<th>Time</th>
</tr>
</theader>
<tbody>
<tr>
<td>1</td>
<td style="word-break: break-all">Dan</td>
<td>00:00:00.000</td>
</tr>
<tr>
<td>2</td>
<td style="word-break: break-all">Bob</td>
<td>00:00:00.000</td>
</tr>
<tr>
<td>3</td>
<td style="word-break: break-all">Jenn</td>
<td>00:00:00.000</td>
</tr>
</tbody>
</table>
</div>
<div style="background-color: #65de4f80; width: 300px; height: 200px; margin-left: -300px; float: left;"></div>
</div>
Regards
I have a bootstrap table with in a scrollable div. Wrapping table with in div help me fix my th and td alignment issues but with this my table headers also scroll and I want them to be fixed.
<div class="table-wrapper">
<table class="table" id="tblfiles">
<thead>
<tr>
<th data-field="Date" class="col-md-2" style="width:100vw;">Alert Date</th>
<th data-field="Files" class="col-md-2" style="width:100vw;">Files</th>
<th data-field="fileName" class="col-md-2" style="width:100vw;">Received Time</th>
<th data-field="ReceivedTime" class="col-md-2" style="width:100vw;">Received Time</th>
<th data-field="Delete" class="col-md-1" style="width:100vw;"></th>
</tr>
</thead>
<tbody id="tblBodyFiles">
</tbody>
</table>
</div>
CSS
.table-wrapper {
max-height: 200px;
overflow: auto;
display: inline-block;
}
All I want to do now is make th fixed, Thanks a lot. Help is much appreciated
You can absolute position the thead row and give the table some padding so the first row doesn't move under it. This way the header row stays fixed to the top of the table.
table {
position: relative;
padding-top: 20px;
}
thead {
position: absolute;
top: 0;
left: 0;
}
Add position:sticky to each th element. You have to do it to the th elements, not the thead or tr elements. This should get you started:
.table-wrapper {
height: 120px;
overflow: auto;
border: 1px solid blue;
}
th {
position: sticky;
padding: 0px;
top: 0px;
background: white;
}
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
</tr>
</tbody>
</table>
</div>
Using Bootstrap 4. I have a responsive table in which I would like to make a scrollable tbody. Table look like this:
<div class="table-responsive">
<table class="table table-striped table-hover custom-table text-nowrap">
<thead>
<tr>
<th>row1</th>
<th>row2</th>
<th>row2</th>
</tr>
</thead>
<tbody>
<!-- some rows -->
</tbody>
</table>
To scroll in tbody, I added a scss class .custom-table to table, it looks like this
.custom-table {
tbody {
height: 50px;
overflow-y: auto;
width: 100%;
display: block;
}
}
However, this style does not work correctly. All content in tbody moves to the left. I have a working JSFiddle example.
What did I do wrong?
Please check bellow, I prefer to use flexbox. I also use -webkit and -ms prefixes for more cross browser compatibility
tbody , thead {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
tr {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
th,td {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center;
}
tbody {
height: 50px;
overflow-y: auto;
}
thead {
padding-right: 20px;
}
I set padding-right to thead because of the scrollbar on tbody.
Did you tried to like this?
Change your css like this
.custom-table> tbody {
display:block;
height:50px;
overflow:auto;
}
.custom-table> thead, tbody tr {
display:table;
width:100%;
}
.custom-table> thead {
width: 100%
}
.custom-table {
width:100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="table-responsive">
<table class="table table-striped table-hover custom-table text-nowrap">
<thead>
<tr>
<th>row1</th>
<th>row2</th>
<th>row2</th>
</tr>
</thead>
<tbody>
<tr>
<td>text1</td>
<td>text2</td>
<td>text3</td>
</tr>
<tr>
<td>text4</td>
<td>text5</td>
<td>text6</td>
</tr>
<tr>
<td>text7</td>
<td>text8</td>
<td>text9</td>
</tr>
</tbody>
</table>
</div>
Using Udara Kasun's solution, but making the columns lines up:
.custom-table>tbody {
display: block;
height: 50px;
overflow: auto;
}
.custom-table>thead,
tr {
display: block;
width: 100%;
}
.custom-table>thead {
width: 100%
}
.custom-table {
width: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="flex-group-1" style="overflow-y: auto">
<table class="table table-striped table-hover custom-table table-bordered table-responsive ">
<thead>
<tr>
<th width="100">col1</th>
<th width="100">col2</th>
<th width="100">col3</th>
</tr>
</thead>
<tbody>
<tr>
<td width="100">text1</td>
<td width="100">text2</td>
<td width="100">text3</td>
</tr>
<tr>
<td width="100">text4</td>
<td width="100">text5</td>
<td width="100">text6</td>
</tr>
<tr>
<td width="100">text7</td>
<td width="100">text8</td>
<td width="100">text9</td>
</tr>
</tbody>
</table>
</div>
</div>
Bootstrap 5
Table with fixed heading row & vertically scrollable tbody
CSS Only
You have to put the table within a div
HTML:
<!-- Table -->
<div class="container shadow-sm alarm-table">
<table class="table">
<thead class="table-primary">
<tr>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>john#email.com</td>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>john#email.com</td>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>john#email.com</td>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>john#email.com</td>
</tr>
</tbody>
</table>
</div>
CSS:
/* Makes table scrollable */
.alarm-table{
height: 150px;
overflow: auto;
}
/* Makes table heading-row stick to top when scrolling */
.container .table thead tr{
position: sticky;
top: 0;
}
How can I force the image to get the higher possible width without trespassing the max-height argument, and keeping the aspect ratio?
img {
display:block;
max-height: 100px;
max-width: 100%;
width: auto;
}
<table border=1 style="table-layout: fixed; width: 500px;">
<thead>
<th style="width: 100px;">
100px
</th>
<th style="width: 400px;">
400px
</th>
</thead>
<tbody>
<tr>
<td>
A image
</td>
<td>
<img src="http://via.placeholder.com/400x100">
</td>
</tr>
<tr>
<td>
This image could be larger
</td>
<td>
<img src="http://via.placeholder.com/200x50">
</td>
</tr>
</tbody>
<table>
Wrapping it in a container that forces those constraints should work for you:
img {
display:block;
width: 100%;
}
.cell-wrapper {
display:block;
max-width: 100%;
max-height: 100px;
overflow-y: hidden;
width: auto;
}
<table border=1 style="table-layout: fixed; width: 1000px;">
<thead>
<th style="width: 100px;">
100px
</th>
<th style="width: 400px;">
400px
</th>
</thead>
<tbody>
<tr>
<td>
A image
</td>
<td>
<img src="http://via.placeholder.com/400x100">
</td>
</tr>
<tr>
<td>
This image could be larger
</td>
<td>
<div class="cell-wrapper">
<img src="http://via.placeholder.com/200x50">
</div>
</td>
</tr>
</tbody>
<table>
Given a table with a column that contains numbers, I'd like to position them in the center.
But, I'd like to right-align the numbers as well!
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
Outputs:
Desired output:
Note: The table cell width should be constant (200px), regardless of the numbers. For example, if all numbers are 0, they all should be in the center of the table:
Also:
You are allowed to modify the content of the <td>s, but there should be one number per <tr>.
CSS only, please.
Updated based on an edit of the question and a few comments
In a comment you wrote "In the desired outcome, the cell width stays the same (200px) as numbers change".
In another comment you wrote "...my numbers are links and I want them to occupy the full cell width".
Given those requirements, the only CSS based solution I can find is, where one use CSS Table instead of <table> elements, an anchor a element displayed as table-row, making the full width clickable without adding an event handler, and for the centering, using pseudo elements to puch the numbers to the middle.
Stack snippet
.table {
display: table;
border: 1px solid black;
}
.tr {
display: table-row;
text-decoration: none;
color: black;
}
.tr span {
display: table-cell;
width: 200px;
}
a.tr {
text-align: right;
}
.tr::before, .tr::after {
content: '';
display: table-cell;
width: 50%;
}
<div class="table">
<div class="thead">
<span class="tr">
<span>Amount</span>
</span>
</div>
<div class="tbody">
<a href="#1" class="tr">
<span>45</span>
</a>
<a href="#2" class="tr">
<span>2</span>
</a>
<a href="#3" class="tr">
<span>18923538273</span>
</a>
<a href="#4" class="tr">
<span>9823</span>
</a>
</div>
</div>
<div class="table">
<div class="thead">
<span class="tr">
<span>Amount</span>
</span>
</div>
<div class="tbody">
<a href="#1" class="tr">
<span>0</span>
</a>
<a href="#2" class="tr">
<span>0</span>
</a>
<a href="#3" class="tr">
<span>0</span>
</a>
<a href="#4" class="tr">
<span>0</span>
</a>
</div>
</div>
_____________________________________________________________________________
This is my first answer, which I will leave, as there might be someone that can make use of it as is.
One simple way to accomplish that is to simply nest a table for the values, center it using auto margin and right align its td's content.
This way you will get pretty much the exact same behavior as with your original markup, but get a better control of the values alignment.
Stack snippet
table {
border: 1px solid black;
}
th {
width: 200px;
}
table table {
border: none;
margin: 0 auto;
}
table table td {
text-align: right;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table>
<tr>
<td>0</td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td>0</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
You can of course use div's instead of a table, displayed as inline block or inline flex column.
Inline block
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
td > div {
display: inline-block;
}
td > div > div {
text-align: right;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>45</div>
<div>2</div>
<div>18923538273</div>
<div>9823</div>
</div>
</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>0</div>
<div>0</div>
<div>0</div>
<div>0</div>
</div>
</td>
</tr>
</tbody>
</table>
Inline flex column
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
td > div {
display: inline-flex;
flex-direction: column;
}
td > div > div {
text-align: right;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>45</div>
<div>2</div>
<div>18923538273</div>
<div>9823</div>
</div>
</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>0</div>
<div>0</div>
<div>0</div>
<div>0</div>
</div>
</td>
</tr>
</tbody>
</table>
TL;DR:
table {
border: 1px solid black;
width: 200px;
}
td {
text-align: right;
min-width: 10px;
}
td:first-child, td:last-child {
width: 50%;
}
... and adding an extra column before and after the existing one. jsFiddle here.
Initial answer:
Considering your markup,
td {
text-align: right;
border-left:7rem solid transparent;
border-right:7rem solid transparent;
}
... should do it.
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: right;
border-left:7rem solid transparent;
border-right:7rem solid transparent;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
Any other solution involves changing the markup (you need to add inner elements inside <td>s, give them smaller width than the <td>, and right align their text). You can do it by modifying the HTML source or on the fly, using JavaScript.
After a good number of tries, the only reliable solution I found (implying markup modification and no JavaScript), was to add additional columns in the table, relying on the table's ability to line up all the cells in a column.
I updated the snippet below so that the column occupies the minimum necessary width, based on most wide number and right-aligns all cells based on resulting width width. This means that when all values are 0, the entire row of values are centered. Here it is:
table {
border: 1px solid black;
width: 200px;
}
td {
text-align: right;
min-width: 10px;
}
td:first-child, td:last-child {
width: 50%;
}
/* just stacking tables side by side, not part of solution */
table {
float: left;
width: 200px;
margin-right: 7px;
}
body { overflow-y: hidden;}
<table>
<thead>
<tr>
<th colspan="3">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>45</td>
<td></td>
</tr>
<tr>
<td></td><td>2</td><td></td>
</tr>
<tr>
<td></td><td>0</td><td></td>
</tr>
<tr>
<td></td><td>1234</td><td></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="3">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>0</td>
<td></td>
</tr>
<tr>
<td></td><td>2</td><td></td>
</tr>
<tr>
<td></td><td>1</td><td></td>
</tr>
<tr>
<td></td><td>4</td><td></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="3">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>44</td>
<td></td>
</tr>
<tr>
<td></td><td>0</td><td></td>
</tr>
<tr>
<td></td><td>1155</td><td></td>
</tr>
<tr>
<td></td><td>1234548775564</td><td></td>
</tr>
</tbody>
</table>
make text-align:right and padding-right:5emin td css selector
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: right;
padding-right: 4em;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
<style>
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
float:right; <!--added this-->
margin-right:50px; <!-- and this-->
}
</style>
I added float:right in td
adjust the margin-right value to your desired value;
One option is to change the display property for td elements to block
You can then set a max-width to bring td elements to the center of tr elements.
Once that's done you set the text-align property to right for td elements to make the numbers start from the right hand side.
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
display: block;
max-width: 70%;
text-align: right;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
Wrap your numbers with element(span) inside the td and add the text align right styles on it.
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
td span {
width: 150px;
text-align: right;
background: beige;
display: inline-block;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>45</span></td>
</tr>
<tr>
<td><span>2</span></td>
</tr>
<tr>
<td><span>18923538273</span></td>
</tr>
<tr>
<td><span>9823</span></td>
</tr>
</tbody>
</table>
.table {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
background-color: red;
flex-direction: column;
}
div {
text-align: right;
}
<body>
<div class='table'>
<div>
<div>1</div>
<div>1111111</div>
<div>1111111111111</div>
</div>
</div>
</body>
text-align :right ----> pulls the text into right end
padding-right: 50% or padding-left : 50% ----> add space from the right or left to center
use 45 - 49 percentage in padding to make a crisp center alignment depends on your requirement
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: right;
padding-right: 50%;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>