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
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.
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...
I want to make a HTML file that has the headers in one vertical column, and the data in the column to the right. There will only be 2 columns in total. I've looked at the html docs and seen stuff about scope, but I'm not entirely sure how to use it in this context. Example:
The HTML is pretty straightforward, just be sure to use the [scope] attribute to specify the correct orientation of the table.
<table>
<tbody>
<tr>
<th scope="row">City</th>
<td>$city</td>
</tr>
<tr>
<th scope="row">Latitude</th>
<td>$latitude</td>
</tr>
<tr>
<th scope="row">Longitude</th>
<td>$longitude</td>
</tr>
<tr>
<th scope="row">Country</th>
<td>$country</td>
</tr>
</tbody>
</table>
From the docs for the [scope] attribute:
The row state means the header cell applies to some of the subsequent cells in the same row(s).
You can create the tables with elements proceeded by elements like so:
<table>
<tr>
<th scope="row">Category 1</th><td>data1</td>
</tr>
<tr>
<th scope="row">Category 2</th><td>data2</td>
</tr>
<tr>
<th scope="row">Category 3</th><td>data3</td>
</tr>
Here is an example of it in action:
vertical headers
i have a html table which looks like this:
<table>
<thead>
<tr>
<th >title1</th>
<th >title2</th>
<th >title3</th>
<th >title4</th>
<th >title5</th>
<th >title6</th>
<th >title7</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1</td>
...
<td>data7</td>
</tr>
</tbody>
the issue I am having is that I only have around 300px to put all this information in, I was wondering if there was some way that I can tell the table to split if it reaches the end of 300px limit. is this even possible ? or shall i just go back to using divs ?
I'm not sure what 'splitting' is, but a good alternative would be to wrap the table in a container with overflow-x: auto set. That will make it scrollable.
Live Example
I'm trying to space my HTML table headers using the width property and it's asif they are being ignored completely.
The 'Company Type' header is being split over two lines and so too is the Employment type? I do not have any table css in my css file. Which properties can I use to get each of the headers left-aligned and the next header along to start WIDTH pixels from the beginning of the previous header?
<thead style='float:left;'>
<tr>
<th style='width:270px;text-align:left;'>Company</th> <th style='width:150px;text-align:left;'>Company Type</th> <th style='width:80px;text-align:left;'>Employment Type</th>
</tr>
</thead>
<thead style='text-align:left;'>
<tr>
<th style='width:270px;'>Company</th>
<th style='width:150px;text-align:left;'>Company Type</th>
<th style='width:80px;text-align:left;'>Employment Type</th>
</tr>
</thead>
Try this and make sure that you have given width to all the header elements and total width does not exceed the table width.
I've never reliably got th and td width to work; not 100% sure they're meant to.
I usually just put a div inside the cell, and give that a width. Alternatively, add padding left and right to the th and td.
In a tableless way you could achieve that by this:
<div style="width:270px;float:left;">
Company
</div>
<div style="width:150px;float:left;">
Company Type
</div>
<div style="width:80px;float:left;">
Employment Type
</div>
Of course, you can style this up easily to your preference, and I'd keep the styles in a separate css file.
You could try 'nowrap' - but it isnt supported in HTML5
<th style='width:270px;text-align:left;'>Company</th>
<th style='width:150px;text-align:left;' nowrap>Company Type</th>
<th style='width:80px;text-align:left;' nowrap>Employment Type</th>