I am trying to create a bootstrap table layout like below:
In the header columns 2 and 3 are spanned.
Column 1 is kept small (col-1 ?)
The text "Our Super Status" needs enough room to be on one line
IMG in column 4 needs to be right justified.
I tried to do this in a fiddle, but with different numbers of columns in the header and the actual rows, I was not sure where to put the col-1 class.
Or it could be done like this - which gives our super status lots of room:
<table class="table">
<thead>
<tr>
<th class="col-1">
A
<img src="image1.png">
</th>
<th colspan="2">
<h3>Our super status</h3>
</th>
<th>
</th>
<th>
B
<img src="image2.png">
</th>
</tr>
</thead>
Here is my fiddle attempt
https://jsfiddle.net/Lpy8ca7m/
Related
I would like to make my table header fixed (always visible). I tried this on multiple ways, creating 2 tables above each other, position-fixed, gave each column a specific width, ...
BUT I also would like to my table to be responsive, just like the bootstrap4 standards. Can't find any solution online that works for me, does anyone have any suggestions or starting points what to look for?
--- See what I tried down below ----
My basic table now:
<div style="overflow:auto; height:60vh">
<table class="table table-hover trCursor">
<thead>
<tr>
<th scope="col">#Id</th>
<th scope="col">
#Html.ActionLink("Name", "Products", new { sortOrder = ViewBag.NameSortParm }) <i class="fas fa-sort"></i>
</th>
<th scope="col">Description</th>
<th scope="col">(Internal) Product number</th>
<th scope="col">Price(s)</th>
<th scope="col">Supplier(s)</th>
<th scope="col">
#Html.ActionLink("Created", "Products", new { sortOrder = ViewBag.DateSortParm }) <i class="fas fa-sort"></i>
</th>
#*<th scope="col">Product type</th>*#
</tr>
</thead>
<tbody id="productsBody">
#Html.Partial("_Products", Model)
</tbody>
</table>
</div>
Update These are the main things I tried out:
https://codepen.io/nikhil8krishnan/pen/WvYPvv This worked amazing on a large device (pc and tablet) but I couldn't find a solution to make this mobile-friendly. There are 2 different tables above each other so you have to scroll them separately on your phone.. (horizontal)
http://www.iamramraj.com/bootstrap-fixed-table-header-using-css/?i=1
This one only worked on a large screen. Turned out they use the bootstrap classes col-xs-5 etc to give the columns a specific width, which results in a non-responsive table.
Update2 Next things that I tried:
https://mdbootstrap.com/support/jquery/fixed-header-with-scrolling-table/ This is a very pretty working table but not responsive. On a small device, the table header and body scroll differently and have different widths.
https://forums.asp.net/t/2094852.aspx?MVC+Fixed+Header+rows+for+IEnumerable+table+razor+view Same problem here, working table but not resonsive. Columns are a different width from the headers.
https://www.bootply.com/JnOYtO9xzn When I implemented this one, it wasn't even responsive to start with! The header was fixed and the body scrollable but the position wasn't right and also not responsive.
https://jsfiddle.net/dPixie/byB9d/3/ Guess what.. Same problem again, header columns are not the same width as the body columns.
How can I achieve result like in image below via CSS / HTML?
As you see first 2 rows have 2 columns, 3-4 rows have 3 columns, 5-6 rows should be full width. Problem is that I can't get different widths for different rows. Should I add class for each td and specify It's width manually? Maybe there is another way? I provided simplified sample, for reality there are over than 150 fields in table.
Here I've created JS FIDDLE too see structure of table.
<table class="tbl">
<tr>
<th>UserID </th>
<th>FirstName </th>
<th>LastName </th>
<th>Picture </th>
</tr>
<tr>
<td>UserID</td>
<td>FirstName</td>
<td>LastName</td>
<td>Picture</td>
</tr>
<tr>
<th>Rank </th>
<th>RankApplied </th>
<th>DateApplied </th>
<th>DateAvailability </th>
<th>VesselsType </th>
</tr>
<tr>
<td>Rank</td>
<td>RankApplied</td>
<td>DateAvailability</td>
<td>VesselsType</td>
</tr>
<tr>
<th>DOB </th>
<th>POB </th>
<th>Nationality </th>
<th>English </th>
</tr>
<tr>
<td>DOB</td>
<td>POB</td>
<td>Nationality</td>
<td>English</td>
</tr>
....
It's possible with several techniques.
Personally I would choose flexbox styling.
With flex: 1 1 auto; for grid-items they grow and shrink like you want.
I've put a quick example for this layout on fiddle
I use there display: flex even for the body but just to center the hole grid.
Update:
I updated the fiddle link for a more 'dynamic' layout.
I have a repeat control and for each row I want to set up a bootstrap responsive table. Right now it looks something like this:
the problem is that I would like to set the column widths so they line up better. I have tried to do a two row grid but the two rows collapse nicely but then the data is not under the Label. I have tried class="width:200px" or used % as well in the div but that seems to have no impact. Like wise if added to the of the .
I would settle for a grid or responsive table solution.
my code looks something like this:
<div class="table-responsive">
<table class="table table-bordered table-condensed " style="width:900px">
<thead>
<tr >
<th class="width:150px">Label</th>
<th class="width:250px">Default Approvers</th>
<th class="width:75px">Auto Process</th>
<th class="width:75px">Routing</th>
<th class="width:75px">Post Approval</th>
<th class="with:75px">Post Denial</th>
<th class="width:50px">Notify Late</th>
</tr>
</thead>
<tbody>
<tr>
<td>
.
.
.
</tbody>
First: you used class attributes to set style values. If you change to style then it should work.
I recommend you to use a colgroup though. http://www.w3schools.com/tags/tag_colgroup.asp
0I am working on an asp.net mvc web application, and I am using a responsive web template which is based on bootstrap. Currently the layout is responsive, where the page will adapt to the screen size to a certain limit, for example if I have a table with only four columns and the user access it using a small screen then the text can still be readable. but for some views there have tables with more than 8 columns , the text inside these tables became un-readable when beginning accessed from small size screens. As follow:-
On way I am thinking to fix this issue, is to manually define hidden-xs hidden-sm classes for the columns that are less important to the users and only display the columns that are most important , when the user access the system from small or extra small screens.
I am afraid that by approach might work, but it is very handy? Can anyone advice on this please?
Thanks
my view code looks as follow:-
<table class="table table-striped table-bordered bootstrap-datatable datatable">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model=>model.SingleOrDefault().UserName)
</th>
<th>
#Html.DisplayNameFor(model=>model.SingleOrDefault().AuditAction.Name)
</th>
<th>
#Html.DisplayNameFor(model=>model.SingleOrDefault().TechnologyType.Name)
</th>
<th>
#Html.DisplayNameFor(model=>model.SingleOrDefault().Technology.Tag)
</th>
<th>
#Html.DisplayNameFor(model=>model.SingleOrDefault().DateTimeStart)
</th>
<th>
#Html.DisplayNameFor(model=>model.SingleOrDefault().DateTimeEnd)
</th>
<th>
#Html.DisplayNameFor(model=>model.SingleOrDefault().ExtraInfo)
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model) {
<tr>
<td>
<span class="yellow b"> #item.UserName</span>
</td>
<td>
#(item.AuditAction == null ? "None" : item.AuditAction.Name)
</td>
<td>
#(item.TechnologyType == null ? "None" : item.TechnologyType.Name)
</td>
//code goes here
Before your <table> wrap it with the bootstrap class <div class="table-responsive">. This class will make it scroll-able horizontally, what I did was to then add a comment to the user to inform them that they can "swipe" the table left and right (just on mobile). This together with hiding what you don't want to show as you mentioned is the only decent option for tables.
Hope that helps
The two tables are inside one div (please see code below for an cut out of the code from bottom table), I would like to make the first column of the bottom div invisible....any ideas? thanks for replies
<table align="center" class="detailstable" style="width:100%">
<tr>
<th style="width:70%;"></th>
<th style="text-align:left;">Summary</th>
<th style="text-align:right;"></th>
</tr>
<tr>
<th style="width:70%;"></th>
<td style="text-align:left; width:100px;">Labour</td>
<th style="text-align:right; width:100px;"><%: this.FormatMoney(LabourTotal)%></th>
</tr>
</table>
if you want to make it look like its 'merged' with the cell that contains the total value, use CSS 'border-right-style' on the desired cell, for example:
<th style="width:70%; border-right-style:none;"></th>
Don't create the unwanted column, and instead position the second (now two column wide) table using the style. I would probably have removed the width from the second table and replaced it with float:right to make it align to the right...