An alternative to a table for displaying data?

I am trying to render a table in HTML but it seems the table cannot meet the specs. I would like the data to be in the same place on the screen, otherwise it will cause all problems with the users as they are not reading the data correctly. So I need fixed width columns. I would also like the column headers to be fixed if the data exceeds the height of the windows, because some users are using it.

I don't want to install any third party controls if possible. The owner won't buy anything. I don't mind something that loads with the page.

I was thinking about trying to create a scrollable div with text boxes or labels, but thought I should check if anyone else had this problem and came up with a solution.

I asked here: How to make a scrolling table with dynamic data but nobody knows what is wrong.

Then I asked here: How to get the table according to its parent container? And the key here appears to be the width of the column. But without width, using a table seems pointless.

The question is: Why don't the column headings match? It also seems that the table will never work. Setting this parameter:

display: table-row-group

      

Makes the column headings lowercase, but then the table cannot scroll.

display: block

      

Makes the table scroll, but the column headers are wrong.

Here's an example that works on its own. http://jsfiddle.net/kjzcv9g2/

<style type="text/css" media="screen">
table, th, td {border: solid;}

thead {
display: block;
color: #f00;
background: #eee;
height: 35px; 
overflow-y: scroll; 
}

tbody {
display: block;
height: 100px;
overflow-y: scroll;
}

th, td {
width: 10em; 
font-weight: normal; 
}
</style>

<table>
<thead>
<tr>
<th>foo</th>
<th>bar</th>
</tr>
</thead>
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
</tbody>
</table>

      

But getting it to work seems impossible.

Any suggestions for using labels or text boxes to create my own table?

+3


source to share


1 answer


JSFIDDLE



If I understood the question correctly, this should work. Add the table min-width

to the shared table and you have fixed-width columns below the minimum width, and the columns fill the minimum-width container.

0


source







All Articles