I need to combine two rows in a table into a single row so that I can apply a style (background with a gradient) on that row.
I tried to use rowspan on a table cell with colspan = number of total columns but that does not work.
Tried to use a nested table inside the main table header, but in that case the table background does not have the desired style.
Demo: http://jsfiddle.net/Debarupa/EyxkJ/3/
If you look at the demo, I need to have "Additional Info" and the column headers merged to a single row so that the style 'gridheader' can be applied to them as one row.
Ideas anyone? Thanks for any assistance in advance.
Try using two different classes for top two rows you want to combine. Then break gradient onto two, for each of these rows with color changing 0-50% for the first one and 50-100% for the second one.
Here is the example:
http://jsfiddle.net/EyxkJ/5/
Not sure if this is the most elegant solution though.
I have created a sample with nested table into table cell for the header.
Related
I am trying to create a header row for a matrix in my SSRS report. Currently my matrix is configured as the following:
If I right+click to add a new row, it will insert a row above but I cannot merge the entire row of cells to form a single row, the grouping columns stay separate:
My work-around has been to add a text box above the matrix, but will not keep the the rows together in a page break:
Is it possible to add the header row? And if so, what would be a good way to accomplish this task?
I had the same issue! I wish they would let you merge across the row header; or add a new region of matrix called "title" .
My tablix also had dynamic columns, so I needed the width of the box on the top to expand and collapse with the rest of the table.
There are two ways you can handle it (that I know of)
1. Create a "parent" list object with two rows and insert the table in the second row
2. Put all the columns to the right of the row header
To solve my problem I tried both. First, I added the list with one column and two rows and I copied the entire table into the second row. The first row of the outer list is now centered and spans the entire table. It was messy because I had dynamic columns with a toggle for visibility. The outer list had to have columns that lined up with the visibility set to the same toggle. It was a messy work around because of that.
I decided to try the second method above and insert new columns on the other side of the row header.
The challenge is that row header group labels will repeat for each row... in your example RoleID would repeat down each detail row. I created an expression to only show when it was the first row of the group.
=iif(RowNumber("roleid_group") = 1,
max(Fields!roleID.Value,"roleid_group"),
"")
I used an expression to only show the border when it was the last row in the group:
=iif(RowNumber("roleid_group") = countrows("roleid_group"),"Solid","None")
This gives the illusion of a grouped row. Don't delete the row header columns (column 1 and 2) until you get it working because its hard to add them back.
Careful: This method though doesn't work well if the text of the row title needs to wrap. (The first row of the group will be wider --row height is set to can grow.)
If there is another way I would love to know. These are both somewhat tricky but get the job done.
is it possible to use CSS3 table to make it look like this
+---A---+---B---+---C---+---D---+---E---+
>>>>+---A---+---B---+---C---+---D---+<<<< ---> case 1
+---A---+---B---+---C---+---D---+---E---+
case 1: need to margin-left the first cell right? is it any code that make auto to margin
+---A---+---B---+---C---+---D---+---E---+
+-----A-----+-------B-------+---C---+-D-+ ---> case 2
case 2: colspan is work on the cell width is same. what if the cell width is vary. Is it possible?
all of this code must be in CSS3 and HTML5 only. No use <table>, <tr>, <td> only <div>
Should I convert to use grid instead of using table?
Thank you.
Use tables if it is tabular data, if it isn't then use something else.
From your example where column widths don't match, and where colspans don't do what you want it's hard to see how the data could be tabular data.
A couple of options, colspan can work if you do it the right way. For example setting a colspan of 2 on normal single span cells would allow you to make other cells span to halfway through another column.
Or if it really isn't tabular data then use DIV's and position them apropriatley.
Using tables, you would not be able to vary the width of one rows cells without affecting the width of all the other rows cells though, im not even sure you can dynamically change colspan once the table has been drawn, never tried it to be honest).
In all honesty I suspect you are really looking to solve this using DIV's, as your data really doesn't seem to fit the tabular data model. Tbular data will generally have headers on columns with data corresponding to those column headers in the appropriate column. Your cells seem to be able to move freely and therefore would not be fixed under any particular column header.
I am guessing from the layout that you are possibly creating some sort of calendar? and events can span any distance of time etc across the columns? In which case I personally would prefer divs, although I know some people would prefer using tables.
I'm trying to build a screen like this:
How can I split my cell in several rows and a column, without disformat my other table components?
I already started, but when I split my cell, my table disformat.
http://jsfiddle.net/KMjm6/
Take another example, without the use of html table: http://jsfiddle.net/Gh6mB/8/
If could understand your question
DEMO: http://jsfiddle.net/KMjm6/4/
Put a table inside the middle cell and create your affect
Try to use Tableless Layout concepts.
Only div elements without tables.
See this web sites
http://www.w3.org/2002/03/csslayout-howto
http://girlswhogeek.com/tutorials/2006/create-a-tableless-css-layout
Now I understood
See example http://jsfiddle.net/7SGDW/
I'm working on constructing a table using only divs. I began creating the table using percentages to set column widths, but would prefer to just use table-cell and not have to worry about things that way. Only problem is I'm not guaranteed to have the same number of elements in every row.
http://jsfiddle.net/JWvLX/
This example shows what is currently happening in the top two rows, and what I want to happen if a cell is removed/not present in the bottom two rows.
What exactly do I need to do to accomplish this? Is this possible using only divs for tables or will I be forced to use actual tables to get the desired effect.
There's no equivalent for colspan/rowspan in CSS tables, but this Sitepoint post has some trickery you might be able to use.
I need some help with aligning two tables together, i.e: having the columns line up.
The first table has the headers, and the second table has the rows displayed. I'm doing this on ruby, so, I have to put the result in another table because the updating won't work otherwise(puts the data away from the parent table..) Is there a way, that I can have the two tables align, so the data for every row lines up with each header column.
Thank you
The easiest way would be to have fixed widths for the cells and make the widths be the same for both tables. Also make sure that you have the table properites be the same (i.e. the cellpadding, cellspacing and table widths )
can't you just remove the closing tag for the header and remove the opening tag for the content?
It’s not a great idea, HTML-wise. Heading cells and data cells should really be in the same table. Then you get the alignment for free.
“ I'm doing this on ruby, so, I have to put the result in another table because the updating won't work otherwise”
Are you entirely sure there’s no way for Ruby to update an HTML table that has header cells? Really?