I have a table with a fixed header, and in one of the columns there are delete buttons within a form:
<div class="panel panel-default table-responsive fixedHeader">
<!-- Table -->
<table class="table table-striped">
<thead>
<tr>
<!--table headers are here-->
</tr>
</thead>
<tbody>
{% for row in hoursDb %}
<tr>
<!-- all rows are called here, just saving space -->
<td>
<form action="" method="post">
<button type="submit" class="btn btn-default" name="delete" value="{{ row[7] }}">
<span class="glyphicon glyphicon-remove"></span>
</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
I used the following css to get a fixed header:
.fixedHeader {
height:40vh;
overflow-y:auto;
}
.fixedHeader th {
position: sticky;
top: 0;
}
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th { background:#eee; }
The other row data are hidden by the header when scrolled, but the problem is that when I scroll within the table, the remove glyphicon is still showing and I am able to click on the button which deletes the row.
How would I change it so the table header covers the form/button/glyphicon?
Thanks in advance for any answers.
Have you tried using Z-index? Share snapshot if possible.
Related
The thing is I want to add two anchor elements for every table row so I needed to add two more for those links,
and the problem is that when I add them a border appears at the top of thead even when I set
<th style="display:none;"></th>
here's the table code
.tablesgh table{
width: 80%;
margin:auto;
/* align-self: center; */
}
<div class="tablesgh">
<table style="border-collapse: collapse;" class="table text-center table-responsive table-success table-hover table-bordered table-sm">
<thead>
<tr>
<!-- <div class="boldTd"> -->
<th>Nom complet</th>
<th>Num telephone</th>
<th>Lien du profile</th>
<th>Date ajouté</th>
<th style="display:none;"></th>
<th style="display:none;"></th>
<!-- </div> -->
</tr>
</thead>
{% for client in clients %}
<!-- <script>
var cli_name="{{client.name}}";
var cli_id="{{client.id}}";
</script> -->
<tr>
<td>{{client.name}}</td>
<td>{{client.phone}}</td>
<td>{{client.profile_link}}</td>
<td>{{client.date_added}}</td>
<td style="display:none;">{{client.id}}</td>
<td><a style="position:relative;" href="{% url 'delete-record' client.id %}" class="btn btn-outline-danger">Effacer</a></td>
<td>Afficher les commandes</td>
</tr>
{% endfor %}
</table>
<!-- </div>
</div> -->
</div>
Here's a picture of the table
Your table is of class table-bordered, you can try getting rid of that.
You can also control the border appearance directly from the style attribute: for instance, if you replace display:none; with border: 0px;, it should disappear. You can also make it transparent (border-color: transparent;), etc.
This has been bugging me a lot and when I try to google anything related to the subject, all I get is Stack Overflow questions about vertical-align not working on divs or similar elements.
I have this HTML table where as you can see, I set the style of each td to vertical-align:middle through an HTML inline style attribute:
<div ng-hide="getShoppingCart().length===0" class="col-md-10 col-md-offset-1">
<table class="table table-striped">
<tr>
<th class="col-md-2"></th>
<th class="col-md-3">Name</th>
<th class="col-md-2">Size</th>
<th class="col-md-2">Price</th>
<th class="col-md-2">Quantity</th>
<th class="col-md-1"></th>
</tr>
<tr ng-repeat="article in getShoppingCart()" style="height:120px;">
<!-- Image -->
<td class="col-md-2" align="center" style="vertical-align:middle;">
<img ng-src="{{article.media.images[0].smallHdUrl}}" class="img-responsive" style="height:120px;" >
</td>
<!-- Name -->
<td class="col-md-3" style="vertical-align:middle;">
<p>{{ article.name }}</p>
</td>
<!-- Size -->
<td class="col-md-2" style="vertical-align:middle;">
<p>{{ article.unit.size }}</p>
</td>
<!-- Price -->
<td class="col-md-2" style="vertical-align:middle;">
<p>£ {{ getTotalPriceForArticle($index) | number : 2 }}</p>
</td>
<!-- Quantity -->
<td class="col-md-2" style="vertical-align:middle;">
<button class="btn minusButtons" ng-click="decrementQuantity(article, $index)">–</button>
<input type="number" class="form-control" style="position:relative;top:2px;width:4vw;display:inline-block;" ng-model="getQuantities()[$index]"/>
<button class="btn plusButtons" ng-click="incrementQuantity(article, $index)">+</button>
</td>
<td class="col-md-1" align="left" style="vertical-align:middle;">
<button ng-click="removeArticleAtIndex($index)" class="btn redButtons" style="margin-left:0;">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
</table>
<div class="col-md-12" style="font-size:2vw; text-align:right;">
Total Price: £ {{ getTotalPrice() | number : 2 }}
</div>
So naturally I thought I could remove all of these inline styles and add this global rule in my external CSS file:
td {
vertical-align: middle;
}
But when I do that, the contents of the table's cells stop being aligned to the middle. I'm sure that the CSS file is properly linked as other elements are clearly affected by it. Also I checked the rest of the CSS and there are no other rules with higher priority overriding this property for this table. Any ideas?
Note: As you can probably figure out from the code, I'm using AngularJS and the table rows are being generated using ng-repeat, in case it could have something to do with the problem.
It's due to bootstrap overriding this with a higher specificity. This is what I see in the chrome developer console for td's:
.table>tbody>tr>td {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid #ddd;
}
I would recommend doing something like the following:
.table.td-vertical-center>tbody>tr>td {
vertical-align: middle;
}
Then in your table element you can do this:
<table class="table table-striped td-vertical-center">
This will allow you to wrap this style in a custom class that will not override bootstrap by default, as well as give it enough specificity to update the table cells.
You can see a working example of a bootply here
Try this
td, th {
vertical-align: middle !important;
}
For example, I have a code:
<div class="mycontainer1" style="....">
<table class="widget title list" id="element-545">
<tbody>
<tr>
<td class="txt">11111</td>
<td class="toolbar" id="element-546">
<div class="btn export-btn" id="element-549">
<span class="fa fa-print"></span>Export
</div>
</td>
</tr>
</tbody>
</table>
</div>
I need set style for class "btn export-btn" visibility: hidden in css.
Can I resolve it in class of first div (mycontainer1)?
Touch only the first div!
Add
.mycontainer1 .btn.export-btn {
<style>
.mycontainer1 .btn.export-btn
{
visibility: hidden;
}
</style>
When a field value is too long in my bootstrap table, the table will extend to the length of the parameter even if its past the container. The only way I was able to somewhat prevent this is by using responsive-table, however then a scroll bar shows up on the bottom and you have to scroll all the way to the right to see the table data. How can I make it so when my table reaches the length of the container, the row data will wrap?
Here is an image of what is going on: http://i.stack.imgur.com/Bo1dO.jpg
Here is a portion of my view, the CSS and example can be seen here: https://jsfiddle.net/bsxtpoqd/
<div class="container">
<div class="row tab-content">
<div class="row">
<h3>Assigned Games</h3>
<p>Please enter a search string in the textbox to search for users</p>
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" id="tableSearch" placeholder="Enter search term...">
</div>
</form>
<div class="table">
<table id="userTable" class="table">
<thead>
<tr>
<th>UserName</th>
<th>Alternate</th>
<th>Email</th>
<th>Assigned Games</th>
<th>Unassigned Games</th>
</tr>
</thead>
<tbody>
#foreach (var user in Model)
{
<tr>
<td>#Html.ActionLink(user.UserName, "_GameAssigner", "Admin", new { insUserId = user.InstitutionUserId }, new { #class = "modal-link" })</td>
<td>
#user.AlternateId
</td>
<td>#user.Email</td>
<td>
#if (user.Assigned.Any())
{
<a href="#" tabindex="0" role="button" data-toggle="popover" title="Games" data-trigger="focus"
data-content="#foreach (var gameName in user.Assigned){<div>#gameName</div>}">
#user.Assigned.Count</a>
}
else
{
<div class="text-warning">0</div>
}
</td>
<td>
#if (user.Unassigned.Any())
{
<a href="#" tabindex="0" role="button" data-toggle="popover" title="Games" data-trigger="focus"
data-content="#foreach (var gameName in user.Unassigned) {<div>#gameName</div>}">
#user.Unassigned.Count</a>
}
else
{
<div class="text-warning">0</div>
}
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
You need to break up the long word.
<td style="word-break:break-all">
This is you need:
<style>
td
{
word-break: normal;
}
</style>
I am creating a table in html and it needs to be scrollable. So I changed the display to block and made overflow-y scroll. When I do this it makes the columns header not spaced out so there is a lot of excess space. I know the display block setting is what causes this, but I need to make it scrollable. how do I set this in css and html?
table {
margin-bottom: 40px;
width: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
height: 250px !important;
overflow-y: scroll;
display: block;
}
<table>
<thead>
<tr class="rowTable header">
<th class="cell">Date Submitted</th>
<th class="cell">Bounty Name</th>
<th class="cell">Company</th>
<th class="cell">Paid</th>
<th class="cell">Details</th>
<th class="cell">Response</th>
</tr>
</thead>
<tbody>
{% for report in recentReports %}
<tr class="rowTable">
<td class="cell">{{report.date}}</td>
<td class="cell"><a href="/_hunter/bounty/{{report.bountyID}}">{{report.name}}</td>
<td class="cell">{{report.company}}</td>
<td class="cell">{{report.amountPaid}}</td>
<td class="cell">
<button type="button" class="detailsButton" data-toggle="modal"
data-target="#detailsModal" data-whatever="#getbootstrap"
data-ID={{report.reportID}}>
View
</button>
</td>
<td class="cell">
<button type="button" class="messageButton" data-toggle="modal"
data-target="#messageModal" data-whatever="#getbootstrap"
data-ID={{report.reportID}}>
View
</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
Here is a photo of what happens. I think its clear to see that what i want is the columns take take up the entire table evenly. The image is of just the table, not the entire webpage.
You need to do what #Johannes suggests:
<div id="wrapper">
<!-- put your table here-->
</div>
Change your Css to:
#wrapper {
margin-bottom: 40px;
width: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
height: 250px !important;
overflow-y: scroll;
display: block;
}
table{
width:100%
}
And you are done. If you find this answer useful, please up vote #Johannes answer. And if you feel Happy up vote mine to.
See example:
https://jsfiddle.net/ex239ck6/
put the table in a DIV that has the settings your table has now (i.e. height and overflow), and let the table be a table...