I use Vaadin in my project, currently i'm having a problem with it. It's CSS/HTML problem and i'm not aware how can i fix it...
So the situation looks like that:
I've got HTML structure (CustomLayout) which looks like that:
<table>
<tr>
<td location="loc11"></td>
<td location="loc12"></td>
</tr>
<tr>
<td location="loc21"></td>
<td location="loc22"></td>
</tr>
(...)
</table>
I'm inserting data into td with location="xxx", the data is in some locations not everyone. CSS looks like that:
table.metric_table_layout tr td {
border-bottom: 1px dotted grey !important;
}
And here's the problem:
If the td is empty, i have borders that completly ruined my layout.
Could someone give me some CSS (that will works also in IE 7+) to fix this ?
I don't want to use JS, so i'm not sure if i can handle this with only CSS?
Thx
tzim
Try to add:
table.metric_table_layout {
border-collapse:separate;
empty-cells:hide;
}
But in IE8 there has to be a !DOCTYPE definition.
With CSS only you can use the empty-cells:hide property. It's buggy across browsers so do some previews in all (rendered ok in my IE7 from IEtester - I just had to define the border as #ccc instead of gray)
Sample: http://jsfiddle.net/EbvXQ/11/
Related
I have a web page that does not appear as it does in design view. It adds padding around table cells with text boxes in, but nowhere else. I want it without the padding.
This is the html:
<asp:Panel ID="PlayerPanel" runat="server" BackColor="#3333CC">
<table id="PlayerTable" style="width:100%;" border="0">
<tr>
<td >Name</td>
<td><asp:textbox id="txtPlayerName" runat="server" Width="400px" AutoPostBack="True"></asp:textbox></td>
</tr>
<tr>
<td >Mobile</td>
<td><asp:textbox id="txtPlayerMobile" runat="server" Width="400px" AutoPostBack="True" ></asp:textbox></td>
</tr>
<tr>
<td >Email</td>
<td><asp:textbox id="txtPlayerEmail" runat="server" Width="400px" AutoPostBack="True"></asp:textbox></td>
</tr>
</table>
</asp:Panel>
In design, it appears without padding. When running, it appears with padding above and below the textbox of about the same height as the textbox.
I have tried setting "padding:0px;" for the panel, the table and the cell, but it still stays the same. What else can I try?
Maybe it's cellpadding directly on the table? look here; try setting that to 0
Maybe it's the browser itself putting some default styling on it - in Chrome, open up inspector (F12 or right click -> inspect element) and there you can see what's being applied to the element.
I found this fix:
p {
margin: 0;
padding: 0;
}
I added this into the css and it fixed the problem. It is one of those 'Well, duh!' solutions.
In the table in the following View of my ASP.NET MVC Core 1.1 app, I'm trying to create some space between columns OrderNumber and ItemName. But the content of the two columns are still too close to each other. Is it because css inside my <style>....</style> below is wrong or maybe the Bootstrap's default settings for the table are overriding my css. Question: How do I create the spacing between two columns?
#model MyProj.Models.TestViewModel
<style>
table th td{
padding-left:115px;
}
</style>
<table>
#foreach (var item in Model.lstOrders)
{
<tr>
<td>
<a asp-action="TestAction" asp-route-id="#item.OrderId">#item.OrderNumber</a>
</td>
<td>
#item.ItemName
</td>
</tr>
}
</table>
You can either:
define padding for the elements in your CSS (recommended)
insert an empty column in between the two, with a '&nsbp' value (a nasty hack, but proven effective)
... and your style definition is wrong (hint: there is no element in your table).
Try simply
td {
padding: 5px;
}
Your CSS:
table th td {
padding-left:115px;
}
means:
Give every td that is a child of th that is a child of table a left padding of 115px.
Instead, what you want to do is:
table th,
table td {
padding-left:115px;
}
which means, give every th and td a left padding of 115px.
My problem is that I added foundation rails to my project that is created in ruby on rails and I wanted to create a small table, but this table when I create creates a white background, what I want to do is make my table transparent without Background of no color.
I tried to put a class and assigning properties but it does not work, also add the style directly, delete the cookies just in case but still does not change color, only resize.
file .css
.tabla {
width:80%;
height: 80%;
background-color:transparent;
}
file .html.erb
<table border="2" class="tabla">
<tr>
<td>Film Affinity</td>
<td><%= image_tag "film_affinity.png",:class=>"imagenPie"%></td>
</tr>
<tr>
<td>IMDB</td>
<td><%= image_tag "imdb.png",:class=>"imagenPie"%></td>
</tr>
<tr>
<td>Sensa Cine</td>
<td><%= image_tag "sensacine.png",:class=>"imagenPie"%></td>
</tr>
</table>
By default Foundation sets the background color using the selectors: table thead, table tbody, table tfoot and table tbody tr:nth-child(even) for every other row.
https://github.com/zurb/foundation-rails/blob/master/vendor/assets/scss/components/_table.scss
The following CSS should set all rows to have a transparent background color:
table tbody tr:nth-child(even), table tbody {
background-color:transparent;
}
It seems ok to me. Perhaps there is some other rules that are overriding your .tabla css. You may try to add an !important and see if that fixes it:
.tabla {
width:80%;
height: 80%;
background-color: transparent !important;
}
Otherwise, the color may come with the td or tr instead from the table. In that case, add the following rule:
.tabla tr, .tabla td {
background-color: transparent;
}
Note that using !important is usually a bad practice. Try to search and clean your css code instead of using that clause.
Also, the border attribute of tables is deprecated now. You should use border css property instead.
I am working on an app in Grails 2.3.6
I want to add text color to the Date object in GSP view. I tried the following and this didn't work.
<td><g:formatDate date="${myClassInstance.lastName}" style="color: green;"/></td>
Is there a way to add color to g:formatDate?
Put your class on the surrounding element such as the td or add a <span></span> around your date. g:formatdate does not return HTML but rather just text.
<td style="color: green;"><g:formatDate date="${myClassInstance.lastName}"/></td>
or
<td><span style="color: green;"><g:formatDate date="${myClassInstance.lastName}"/></span></td>
Inside a panel I have an asp calendar and an asp detailsView. Im trying to get them to display along side each other but cant get the alignment correct. I would like the the calendar top left, and the detailsView top right, with the top of the grid matching the calendar.
<asp:Panel ID="detailsPanel" runat="server">
<asp:Calendar ID="calendars" VerticalAlign="top" HorizontalAlign="left" runat="server" OnSelectionChanged="LoadRequestedDate_OnClick" OnDayRender="cal_DayRender"></asp:Calendar>
<asp:DetailsView ID="DetailsView1" runat="server" DataSourceID="DetailsDataSource" HorizontalAlign="right" VerticalAlign="top" >
After table example now looks like:
Just need to align the tops
iv tried <td align="left"> ad right but no gd
There are several options how to do this. I'll give you two.. one simple and one correct :)
a.) Simple: Use HTML table like:
<table>
<tr>
<td>PUT_CALENDAR_HERE</td>
<td>PUT_DETAILS_HERE</td>
</tr>
</table>
b.) Correct: Use CSS to modify positioning:
float:left; // apply this to calendar
Caution: You might need additional styles to tweak position. If you provide pure HTML, I could try to make a prototype in jsFiddle (otherwise I would only create it with some placeholders).
btw: You either didn't paste complete HTML, or you are missing closing tag for panel.
Edit: Here's an jsFiddle to solve your table positioning problem: http://jsfiddle.net/KdhnV/