I'm trying to make a table with bootstrap in my Rails web app, but the first element of my line is always far away from the others.
I checked my CSS file and when I clear these lines (and just that) :
#import "bootstrap-sprockets";
#import "bootstrap";
... the table is docked to the right. So obviously I guess that Bootstrap tables aren't working in my app, and I don't understand why. I took tables from internet and I have the same problem.
Here is my table in the html.erb file :
<table class="table">
<thead>
<tr>
<th class="label">Tâche</th>
<th class="label">Responsable</th>
<th class="label">Durée</th>
<th class="label">Date de début</th>
<th class="label">Date de fin</th>
<th class="label">Date de début standard</th>
<th class="label">Date de fin standard</th>
<th class="label">Retard</th>
<th class="label">Congés</th>
</tr>
</thead>
<tbody>
<% #projectTasks.each do |task| %>
<tr>
<td class="task"><%= task[0] %></td>
<td class="task"><%= task[1] %></td>
<td class="task"><%= task[3] %> days</td>
<td class="task"><%= task[4] %></td>
<td class="task"><%= task[5] %></td>
<td class="task"><%= task[6] %></td>
<td class="task"><%= task[7] %></td>
<td class="task"><%= task[8] %> days</td>
<td class="task"><%= task[9] %> days</td>
</tr>
<% end %>
</tbody>
</table>
... but I think that the problem is not here, like I said.
Thanks for your answers.
Remove class 'label' from the the table headers. You are accessing a class in bootstrap that is creating the visuals you are seeing.
Related
I have a <asp:Reapter> using basic HTML <table> markup.
My goal is to add a border to <table> cell using CSS, and have it styled as shown in the picture. The third column <td> cell will have a thick solid black border. image
I am having trouble getting this to work, each time the border is too small.
Please help!
<table class="table table-bordered">
<tbody>
<asp:Repeater ID="Repeaterim" runat="server">
<HeaderTemplate>
<thead>
<tr>
<th>Ürün ID</th>
<th style="text-align: center;">Ürün Görsel</th>
<th>Ürün Adı</th>
<th>Ürün Fiyatı</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr style="height: 200px;">
<td>
<%# Eval("UrunID") %>
</td>
<td style="background: url('<%# Eval(" UrunGorseli ") %>') no-repeat center;"></td>
<td>
<%# Eval("UrunAdi") %>
</td>
<td>
<%# Eval("UrunFiyati") %>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
<tfoot>
<tr>
<th>Ürün ID</th>
<th style="text-align: center">Ürün Görsel</th>
<th>Ürün Adı</th>
<th>Ürün Fiyatı</th>
</tr>
</tfoot>
</FooterTemplate>
</asp:Repeater>
</tbody>
</table>
I'm using bootstrap 4.0.0 in a Rails 5.1.5 application.
I have this table:
<table class="table table-hover table-bordered">
<thead>
<tr class="table-title-bg">
<th class="col-1">COD SAP</th>
<th class="col-4">DESCRIPCION</th>
<th class="col-2">REF. FABRICANTE</th>
<th class="col-1">FABRICANTE</th>
<th class="col-1">STOCK</th>
<th class="col-1">PRECIO MEDIO(€)</th>
<th class= "col-2">PLANTA</th>
</tr>
</thead>
<tbody>
<% parts.each do |part| %>
<tr>
<td><%= part.sap_cod %></td>
<td><%= part.descripcion_maestro %></td>
<td><%= part.ref_fabricante %></td>
<td><%= part.fabricante %></td>
<td><%= part.stock %></td>
<td><%= part.precio_medio %></td>
<td><%= part.planta_nombre %></td>
</tr>
<%end%>
</tbody>
The problem is that the first column, which is col-1, is actually taking like 8 columns of the layout in IE10:
This is working fine in Chrome as shown in the image. Also you can see how the grid from the form above is working fine in both cases (apart from the color problem in IE10)
Any suggestion about how to fix it?
I have following table in my site but for some reason the style width:100px does not work for td. Probably some other css is preceding. I have also tried !important but it still doesn't work.
What can I do to get the width to precede all else?
<table>
<tbody>
<tr>
<th>Resurs</th>
<th>Service</th>
<th>Datum</th>
<th>Tid från</th>
<th>Tid till</th>
<th></th>
</tr>
<tr>
<td style="text-align:left">Resource</td>
<td style="width:100px;word-break:break-all">kjslkjfsdjfj sfjlsjfklsljf slfj lsjfs flsj fkljskf lksj fsjf sdlfj lsjföslajfölsjföl afö aölfjas fasöfj </td>
<td>2015-02-22</td>
<td>10.00</td>
<td>11.00</td>
<td>sdfdsf</td>
</tr>
</tbody>
</table>
Does anyone know how I can get the width to work?
Check this jsfiddle
<table>
<tbody>
<tr>
<th>Resurs</th>
<th>Service</th>
<th>Datum</th>
<th>Tid från</th>
<th>Tid till</th>
<th></th>
</tr>
<tr>
<td style="text-align:left">Resource</td>
<td style="width:330px;word-break:break-all">kjslkjfsdjfj sfjlsjfklsljf slfj lsjfs flsj fkljskf lksj fsjf sdlfj lsjföslajfölsjföl afö aölfjas fasöfj </td>
<td>2015-02-22</td>
<td>10.00</td>
<td>11.00</td>
<td>sdfdsf</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/vjka7b5j/
its working properly ,
I have problem with my table JqMobile style is not working when I uploaded to the server I want datat be horizontal not broken.
http://jsfiddle.net/Tbu9U/
html
<table data-role="table" id="productOrders" data-mode="reflow" class="ui-table ui-table-reflow">
<thead>
<tr>
<th>Code</th>
<th>Name</th>
<th>Price</th>
<th>Qty.</th>
<th>Ext.</th>
</tr>
</thead>
<tbody>
<tr>
<td><b class="ui-table-cell-label">Code</b></td>
<td><b class="ui-table-cell-label">Name</b></td>
<td><b class="ui-table-cell-label">Price</b></td>
<td><b class="ui-table-cell-label">Qty.</b></td>
<td><b class="ui-table-cell-label">Ext.</b></td>
</tr>
<tr>
<td>uj7uu</td>
<td>games</td>
<td class="dollars">$70</td>
<td>3</td>
<td>$210</td>
</tr>
</tbody>
</table>
Here is your fiddle updated: http://jsfiddle.net/ezanker/Tbu9U/1/
The only change was on the table markup, remove the class ui-table-reflow and instead add ui-responsive:
<table data-role="table" id="productOrders" data-mode="reflow" class="ui-table ui-responsive">
I have a page that looks like the following.
Now I am trying to replicate this by using twitter boostrap <div class= hero-unit>. I have the done the following:
<div class="center hero-unit">
<table class="form">
<tr>
<td>
<%= form_for(#user) do |f| %>
<% if #user.errors.any? %>
<div id="error_explanation" xmlns="http://www.w3.org/1999/html">
<h2><%= pluralize(#user.errors.count, "error") %> prohibited this user from being saved:</h2>
<ul>
<% #user.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
</td>
</tr>
<tr>
<td class="th" colspan="2">Login Details</td>
</tr>
<tr>
<% if #user.id %>
<td><%= f.label :id %></td>
<td><%= #user.id %></td>
<% end %>
</tr>
<tr>
<td><%= f.label :current_sign_in_at, "Sign in time" %></td>
<td><%= #user.current_sign_in_at.nil? ? "Not signed in" : #user.current_sign_in_at.strftime('%d-%b-%Y %H:%M:%S') %></td>
</tr>
<tr>
<td> <%= f.label :first_name %>
<br/></td>
<td><%= #user.first_name %></td>
</tr>
<tr>
<td><%= f.label :last_name %>
<br/></td>
<td><%= #user.last_name %></td>
</tr>
<tr>
<td><%= f.label :email %>
<br/></td>
<td><%= #user.email %></td>
</tr>
<% if can? :manage, :all %>
<tr>
<td class="th" colspan=2>Roles and Privileges</td>
</tr>
<tr>
<% for role in Role.all %>
<td><%= role.name %><%= check_box_tag "user[role_ids][]", role.id, #user.roles.include?(role), :disabled => true %></td>
<% end %>
</tr>
<% end %>
<tr>
<td>
<%= link_to 'Edit', edit_user_path(#user), :class => 'btn btn-medium' %> |
<%= link_to 'Back', usermanagement_path, :class => 'btn btn-medium' %>
</td>
</tr>
</table>
<table class="form" >
<% if #user == current_user %>
<caption><b>Previous Orders</b></caption>
<thead>
<tr>
<th>Order No:</th>
<th>Order Date</th>
<th>Quantity</th>
<th>Total</th>
<th>View Order</th>
</tr>
</thead>
<% current_user.orders.each do |order| %>
<tr>
<td style="width: 10px;"><%= order.id %></td>
<td><%= order.created_at.to_s(:short) %></td>
<td><%= order.quantity %></td>
<td><%= number_to_currency(order.total_price, :unit => "£") %></td>
<td><%= link_to 'View Order',(order)%></td>
</tr>
<% end %>
<% if current_user.orders.empty? %>
<tr>
<td>No bookings found</td>
</tr>
<% end %>
</table>
</div>
<% end %>
<% end %>
The above changes output the following:
So what my question is how can I possibly get it to be aligned to the right of the login details. I did attempt to do the following <table style="float: left; margin-left: 20px;"> on the Previous Orders table. Why is this not working!
I have tried to mock the tables you have shown below. Since you are using Bootstrap I will advise you to take a look at Responsive Tables .There are various examples of how you can create and represent tables for smaller screens as well .
Here's the jsfiddle with the same Jsfiddle with tables
<div class="hero-unit">
<div class="row">
<div class="span4">
<table class="table table-condensed">
<thead>
<tr>
<th>Login Details</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>ID</td>
<td>1</td>
</tr>
<tr class="error">
<td>Sign in Time</td>
<td>01/04/2013 11:35am</td>
</tr>
<tr class="warning">
<td>First Name</td>
<td>Jack</td>
</tr>
<tr class="info">
<td>Last Name</td>
<td>Sparrow</td>
</tr>
<tr class="warning">
<td>Email Id</td>
<td>jack#sparrow.com</td>
</tr>
</tbody>
</table>
</div>
<div class="span8">
<table class="table table-condensed">
<thead>
<tr>
<th>Order no</th>
<th>Order Date</th>
<th>Quantity</th>
<th>Total</th>
<th>View order</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>TB - Monthly</td>
<td>01/04/2012</td>
<td>Approved</td>
<td>View Order</td>
</tr>
<tr class="error">
<td>2</td>
<td>TB - Monthly</td>
<td>02/04/2012</td>
<td>Declined</td>
</tr>
<tr class="warning">
<td>3</td>
<td>TB - Monthly</td>
<td>03/04/2012</td>
<td>Pending</td>
</tr>
<tr class="info">
<td>4</td>
<td>TB - Monthly</td>
<td>04/04/2012</td>
<td>Call in to confirm</td>
</tr>
</tbody>
</table>
</div>
</div>