I have an HTML table (populated from a datatable on server side), with no styling except background color, and for some reason it breaks some of the lines.
Is there any CSS behavior that dictates this? I tried to replicate it with a table populated with a random string of "M "s, and it also broke the line after every space...
EDIT:
What's happening:
|M|M|
|M|M|
|M|M|
What's supposed to happen:
|M M M |M M M |
Thanks!
I think you mean the NOWRAP option.
<table><tr><td NOWRAP>Text</td></tr></table>
Related
I have 36 columns in a table report,I need to make bold lines for every 3 columns.I tried Border style Solid and Double but still i could not make the changes.What should be done to make the lines bold
Have you tried changing your border width to 2pt? If you just type a 2 in the property it should work.
Since you are trying to make the columns bold, just try change the left and right borders, not the default. You will have to play around a little, because technically the borders of the columns on either side impact how the column looks.
i have an ssrs 2008 R2 matrix with Accounts on Rows, Months on Columns and Sales in the data section. I need to “double underline” the sales numbers but I can’t figure out how to do this.
i tried using “double border” but that would create one giant line across instead of just underlining the sales numbers - in other words, the display would be a single long line across.
any idea how to achieve this? i am willing to use custom code in the report code. Thanks in advance for your help.
Edit: Adding a screen shot to show the desired output:
For some reason the Double text box BorderStyle property seems to be rather temperamental.
This MSDN thread suggests a few requirements to get this running:
Double Line border turn to be single in Reporting Service
The border width must be 3pt at least.
There must be at least one row beneath the Double border text box.
Let's test this out. A simple tablix:
And let's set the bottom text box to be Double at the bottom:
In Preview this is unsuccessful:
Let's test out the suggestions. First, set the width to 3pt:
Same result:
Let's add an extra row below:
It works:
What's going on here? It seems like if the width is too low, the two lines will squash together. Also, it seems like the border actually spills to an adjacent text box, so if this doesn't exist the bottom line is not displayed.
Put them together and it works.
One more note - this is not required for Excel - just add a 1pt Double border and it will be fine. The above series of steps are only required for Web, PDF, etc.
I've got a bit of a challenge with an HTML table that we need to have raised columns. If you look at the attached image you'll see what I mean.
The purpose of these raised columns is to draw the user's attention to them.
The problem is:
To get the effect of the column raising above the other columns you
need some kind of element/height/margin to appear outside the
boundary of the table, which doesn't seem to work
Same goes for the bottom
To have the drop shadow appear correctly, it needs to be applied to all the cells in a column.
We did get this to work by splitting it up into multiple tables then applying the styles to the table that should be the raised column. The image I've attached is actually a live table working like this.
But, you loose all other needed features of tables...
Row heights don't match if the text wraps in table 1 but not in
table 2.
To deal with the row height issue we applied a fixed height to each table's rows, but then you have to force text to not wrap. If you then get text that's longer than the width you run into trouble.
Does anyone know how this can be achieved without splitting the tables?
Thanks,
jacques
Try having an extra row for the table above the header row (you may have to stop using any th tags) to give you the overbar at the top. Similarly for the bottom, an extra highlighting row.
Although you have to compromise the table a little to do that, it is better in my book than separating into 2 tables, as that defeats all the purposes of the table tag; to show a table, and have that table easily declared.
The effects inside the table are probably best done with jquery, unless the choice of highlighted columns is entirely static, in which case consider rendering a static html version by generating the html appropriately.
This is the website I'm working on and every other browser displays the table properly, but like always, when it comes to IE (specifically 9) it breaks.
http://lumpiahouserestaurant.com/menu/
I already fixed the <thead> problems because IE didnt interpret display:inline-block well. I cant find a similar problem with the <tbody>.
The main goal of the table is to have the <tr> floated left and the <td> to have display block so they display downwards.
Tables are not designed to be written in this vertical way. While it could be a fun experiment to toy with browsers in this way, it sounds like a recipe for a headache in a production site.
If you insist on coding up your table this way (I'm guessing you want to do this because it's more intuitive to read in the HTML), you can either
Make an outer table with 7 columns and 1 row - one for each day. In each column create a table with n rows and 1 column to hold the data for each day. This is assuming that the table rows aren't supposed to be aligned, as in your example.
Do up your table from left to right rather than from top to bottom, then use javascript to transpose the table.
I'm having a big of a styling problem with some table rows. As per this screenshot:
The blue and red circles are cells in a table row (whose height is 50px). Both are styled with "vertical-align:top" . The phone number data (in the red circle) is actually a pipe-delimited string where I've substituted HTML breaks for the pipes.
In the green circle, the Fax lable is "vertical-align:top", but the actual list of fax numbers (also delimited) are vertical-align:middle.
What I want is for these things to neatly line up, with the top phone number/fax being vertically aligned with the label. Is my substitution of breaks for pipes in the phone/fax strings is the cause of this problem? Is there a way I can get what I want without changes to the database table/app?
Update: I sort of accomplished this via some padding on the table cell. I say sort of because it mostly looks lined up, but I get the sinking feeling this is happening not because I want it to, but due to random chance. And that it will one day betray me when I need it to look right the most.
Try the following CSS:
table td, table th {
vertical-align: top;
}
You should probably not rely on valign and stuff, that's long-since been replaced with CSS.
I agree with Parrot's implementation of CSS for this, you should also note that having different fonts and font sizes in the cells will make them appear misaligned, even with the same styling applied to each. If the alignment is important to the look/feel of the page you're creating, I would consider separating the data again and making each phone/fax number it's own heading with a header row "Phone" and "Fax" having colspan="2".
*------------------------*
| Phone: |
|------------------------|
| Back: | xxx-xxx-xxxx |
|------------------------|
| Front: | xxx-xxx-xxxx |
|------------------------|
| Fax: |
... etc.
And no, the substitution of | with <br /> will have no negative effect on the look of the tables, so long as there are not any LEADING |s.
You call them labels (as they semantically are), are you using the labels tag as well ? if so check if it has some css rules applied to it that mess things up.
1st (blue/red) this seems weird if they are both valign:top. have you checked if the label is having some top margin or padding applied on it, or some css rule with vertical-align:middle?
2nd case (green), you will need to align them to the top as well ..
if one is middle and the other top you can never align them ..