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 ..
Related
I am creating HTML template for Outlook and I want my 2 column table to have bottom borders on the columns like this, which I did by setting border-bottom property to the td element
Anyway, the picture is from the browser outlook, because when I open the client I see this .. as you can see the border of the last row is a single line, it's not split..to create a gap between the columns I use border-right: 25px solid white property.
Here is the situation with odd number of items [Img], (https://i.stack.imgur.com/231Af.png) I captured only the last 2 rows, but you can see the last item has a longer border than the upper ones. These tables are generated by code so all rows have the same properties, but still the last row makes the trouble.
The code is really long and messy, therefore I would like to ask without adding any code to the question. Do you have any ideas why this happens?
I have tried using a lot of CSS properties but none of them works.
Please see my awesome graphic below which is neither too scale or complete. BUT, I wanted to show the structure I'm going for instead of describing it.
I am creating a space rental system wherein a calendar, structured similarly to the below image, both shows the "taken" spots and also allows a user to click an "open" slot to reserve it themselves. I don't need help with the functionality though, just the layout.
Since this is tabular data at it's finest, with headers and everything, I was able to easily create the desired layout that way. However, tables render from left to right, so in the example below, it renders SPACE 1 9:00am, SPACE 2 9:00am, SPACE 3 9:00am, etc. I need it to actually render SPACE 1 9:00am, SPACE 1 10:00am, etc.
The reason is that in order to make each reservation into a "block" represented by the blue squares below, I need to be able to loop through the columns vertically and not through the rows horizontally.
I also want the columns to be a consistent width and be flexible if more spaces are added or if one/some are removed down the road.
I've been playing with flexbox, which I've barely used before, and I'm having no luck at all. I'm not even sure that's the right direction.
My question would be either 1) is there a way to get a standard table to load the way I want or 2) how can I do this without tables?
Maybe bootstrap's grid system will fit your needs. http://getbootstrap.com/css/
You can create a grid like structure by adding columns, up to 12 in a row, and locking those into rows.
Say I have a table that looks like this: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_collapse
Is it possible to remove/edit cells of a border without CSS, and only using HTML/XHTML?
For example, in '50', can I remove the right border of that row only?
This answer revolves around section 11.3.1 of the HTML401 specification; this uses data which isn't present in the HTML5 specification.
HTML offers some support for borders through the frame and rules attributes. These affect entire columns or rows, but not individual cells. You cannot use these to apply a border to only one cell, but you can use this to apply a border to a row or column.
For example, setting frame="rhs" (right hand side) and rules="all" on the table element will render the border like this (JSFiddle demo):
1 | 2 | 3 |
| | |
Values the frame attribute supports:
void: No sides. This is the default value.
above: The top side only.
below: The bottom side only.
hsides: The top and bottom sides only.
vsides: The right and left sides only.
lhs: The left-hand side only.
rhs: The right-hand side only.
box: All four sides.
border: All four sides.
Values the rules attribute supports:
none: No rules. This is the default value.
groups: Rules will appear between row groups...
rows: Rules will appear between rows only.
cols: Rules will appear between columns only.
all: Rules will appear between all rows and columns.
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 am creating a report with Reporting Services and am using several text boxes horizontally aligned next to each other. I would like to put periods so that report looks like:
1234 Robert Jones................... (234) 921-4922
1235 Jennifer Wilson................ (919) 582-2914
Is this possible to right-pad the text box with periods, or would I need to roll out some code to accomplish the above effect.
I tried doing this and the results looked like:
1234 Robert Jones............... (234) 921-4922
1235 Jennifer Wilson.......... (919) 582-2914
Is something like this even possible?
You'd have to have 3 text boxes per line, with padding in the middle and allow the right side to truncate
The other way would be to use a monospace font and count the number of characters
The answer to this was:
Set the CanGrow property to false and set the padding property on the top and margin to 3pt. Depending on the height and width of your textboxes, your mileage may vary.