I'm trying to sections to my table. The aim is to create a row similar to the header row of the table where this information will live.
I have already tried adding a separate header as an ng container.
I'm trying to avoid using a div and styling it to make it look similar to a table header.
I'd prefer for the "title" of the table to be a part of the table HTML.
Thanks!
Related
I just came across these questions. I am not getting the answer. Can someone help
The components which is used to position HTML document either vertically and horizontally is
a. Table
b. Forms
c. Frame
d. Lists
Can we create both the vertical and horizontal frames in a webpage at the same time?
I guess that would be table as you can create tables horizontally as well as vertically.
These are called Table Rows and Columns. Let me explain.
You basically create different (table row) elements with inside a table header or a table data element inside a .
When you create 1 row with multiple data elements, you created a horizontal table.
When you create multiple rows with each one data element inside, you have created a vertical table.
I hope this answers your question.
I'm trying to create Table Rows in a Table that can expand by clicking on them (individually).
For example, if I would click on the specified area in the picture below, a Segment/Container (some sort of area) would drop down with content inside.
I've tried a solution that is mentioned in this thread, but the underlying problem is that every element under a Table Row/Cell is subject to the rules and boundaries of the Table HeaderCell. So if I for example try to create a Table Row with a Segment under it, the result will look like this:
As you can see the Segment is inside the new Row but is limited to the size of the HeaderCell.
When doing this I also get this error:
validateDOMNesting(...): <div> cannot appear as a child of <tr>.
in div (created by Segment)
It seems that Segment under Table Row is therefore a prohibited element structure.
Any idea on how the element structure should look to create some kind of area under a Table Row?
The the warning of a <div> not being allowed as a child of a table row is telling you that it is not valid HTML. That is true whether you are using Semantic UI React or plain HTML.
I'd recommend rendering another row below the row you have in your table already. Set a column inside of that row which spans all of the columns. Now you have a container which you can put other UI inside if you want to. You can customize the style of the wide cell if you need to for some reason.
Then you can set a toggle state on the clickable area of your table. You'll probably want to put the click events on the contents of the cells and not the cells themselves.
I threw together a quick Codepen showing how this would work. This gives you a working concept that you can modify based on your use case.
https://codesandbox.io/s/serene-water-ikco9?file=/example.js
I am having trouble of freezing multiple columns or column-group and making the rest columns scrollable.
I tried the solution like
how do I create an HTML table with fixed/frozen left column and scrollable body?
but it only works for one column. If I try to freeze multiple columns, they overlapped each other.
I also do not want to use multiple tables which will be difficult for dynamic data binding.
Does anyone know a simple solution for this case only using CSS?
There is one jQuery Plugin "DataTable". This will help you to freeze any number of columns in your table.
Check the tutorials here.
http://www.datatables.net/extensions/fixedcolumns/
http://www.datatables.net/release-datatables/extensions/FixedColumns/examples/two_columns.html
Hope this solves your problem.
I write a pdfptable to a document and than I add an header table and a footer table using onStartPage events.
My problem is that if the main table has a top border this will partially overwritten by the header. The naive solution is to write the header onStartPage, but than I have the same problem with a bottom border in the header.
My idea was to rewrite the borders of all tables onEndPage, but it think this is not easy.
A solution would be to insert header and main table as nested table to another table, but this is not practicable in my case.
Any suggestions/experience in this area?
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/