I'm trying to recreate a table with divs. I want to be able to put elements between the rows so that when a user clicks on a specific row, a description of the data in the row can appear between the rows.
I need the columns to align even if there are elements between the rows. I also need the "cells" to word wrap or push the boundaries similar to tables. The table that I am trying to recreate is 100% width and the page also has expanding widths. I can make the table be a set width, but I'm supporting several screen sizes so keeping the 100% would be best
Thanks for any help!
EDIT:
Here is what I ended up doing (MVC With Razor):
<table style="width: 100%">
<tr>
<th>
Data1
</th>
<th>
Data2
</th>
<th>
Data3
</th>
<th>
Data4
</th>
<th>
Data5
</th>
<th>
Data6
</th>
</tr>
#foreach (var item in Model)
{
<tr id="#item[0]">
<td>
<span style="padding-left: 5px">+</span> <span style="padding-left: 15px">#item[0]</span>
</td>
<td>
#item[1]
</td>
<td>
#item[2]
</td>
<td>
#item[3]
</td>
<td>
#item[4]
</td>
<td>
#item[5]
</td>
</tr>
<tr id="Expander#item[5]" style="display: none">
<td colspan="6">
</td>
</tr>
}
</table>
Then I just did some jquery to control all of the expanding/contracting
Worked great!
If you have tabular data stick to tables. For what you want to do take a look at the colspan attribute. It enables a table cell to span over multiple columns (even all of them).
For maximum width, set width:100% on the table.
Good luck,
Alin
Related
I want two rows in single cell.
This is the code I have written. I have used rowspan to increase the cell width.
<tr>
<th rowspan="2">Questions</th>
<th>sub1</th>
<th>sub2</th>
<th>sub3</th>
<th>sub4</th>
<th>sub5</th>
<th>sub6</th>
</tr>
I have tried to add the staff but I did not get the way I want.
This way you can add two rows in a single cell using html
<tr>
<th>
<table>
<tr>
<td>sub1</td>
<td>sub2</td>
</tr>
<tr>
<td>sub3</td>
<td>sub4</td>
</tr>
</table>
</th>
<th rowspan="2">Questions</th>
<th>sub1</th>
<th>sub2</th>
<th>sub3</th>
<th>sub4</th>
<th>sub5</th>
<th>sub6</th>
</tr>
How can I achieve result like in image below via CSS / HTML?
As you see first 2 rows have 2 columns, 3-4 rows have 3 columns, 5-6 rows should be full width. Problem is that I can't get different widths for different rows. Should I add class for each td and specify It's width manually? Maybe there is another way? I provided simplified sample, for reality there are over than 150 fields in table.
Here I've created JS FIDDLE too see structure of table.
<table class="tbl">
<tr>
<th>UserID </th>
<th>FirstName </th>
<th>LastName </th>
<th>Picture </th>
</tr>
<tr>
<td>UserID</td>
<td>FirstName</td>
<td>LastName</td>
<td>Picture</td>
</tr>
<tr>
<th>Rank </th>
<th>RankApplied </th>
<th>DateApplied </th>
<th>DateAvailability </th>
<th>VesselsType </th>
</tr>
<tr>
<td>Rank</td>
<td>RankApplied</td>
<td>DateAvailability</td>
<td>VesselsType</td>
</tr>
<tr>
<th>DOB </th>
<th>POB </th>
<th>Nationality </th>
<th>English </th>
</tr>
<tr>
<td>DOB</td>
<td>POB</td>
<td>Nationality</td>
<td>English</td>
</tr>
....
It's possible with several techniques.
Personally I would choose flexbox styling.
With flex: 1 1 auto; for grid-items they grow and shrink like you want.
I've put a quick example for this layout on fiddle
I use there display: flex even for the body but just to center the hole grid.
Update:
I updated the fiddle link for a more 'dynamic' layout.
Anyone know why each width:xx% on the table cells are not being used?
Looks like the first row may be set correctly, but the sizes in the second row are being ignored.
http://jsfiddle.net/bobbyrne01/4fLL8md0/1/
<table>
<tr>
<td style="width:80%;">A lot of text on 1 line</td>
<td style="width:20%">Text</td>
</tr>
<tr>
<td style="width:20%">
<label>Directory:</label>
</td>
<td style="width:80%">
<input id="directory" readonly="true" />
</td>
</tr>
</table>
It's not possible any simply way. You can achive that only using more than 2 cells in row and group them.
<table border="1" width="100%">
<col width="20%">
<col width="60%">
<col width="20%">
<tr>
<td colspan="2">A lot of text on 1 line</td>
<td>Text</td>
</tr>
<tr>
<td>
<label>Directory:</label>
</td>
<td colspan="2">
<input id="directory" readonly="true" />
</td>
</tr>
</table>
http://jsfiddle.net/4fLL8md0/2/
As you can see, for this case you need 3 cells with width 20%, 60% and 20%. If you have more rows, more cells or want to divide rows in other percentages, you always need to change the table structure.
Table cells must conform – otherwise it wouldn't be a table! You can use colspan to sorta overcome this limitation.
The way you are trying to achieve the design is totally wrong. There are two ways to do this either use colspan or nested table to achieve this.
You can try the answer given by Panter or try nested table that is the best option as it will be easier to implement and maintain also.
I have a table with a list of items in it. Shown below.
The problem is when this table is displayed on the iPhone 5/4, it still shows up, but the thread "Last Post" is a much larger font. Its increased by maybe .3em. The second issue is when I click on the first link in the first column inside the iPhone, it doesn't actually work. None of the anchor tags work. Which is really weird and I just don't understand what is going on. Please help?
UPDATE
Here is a link to the CSS Doc. Just compare it to the calendarTable attributes.
https://league.rdnation.com/content/main.css
<table class="calendarTable" id="messages">
<thead>
<tr>
<th>Title
</th>
<th>Last Received
</th>
<th>Last Post
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="forumTopicRow calCurrentDateEvent">
<td>
<a class="b" href="/messages/view/16">Message Title</a>
</td>
<td>
5 minutes ago
</td>
<td>
asdfasdfasd by <b>Veggie Delight</b>
</td>
<td>
</td>
</tr>
<tr class="forumTopicRow ">
<td>
Test1
</td>
<td>
10 months ago
</td>
<td>
Check it twice by <b>Veggie Delight</b>
</td>
<td>
</td>
</tr>
<tr class="forumTopicRow ">
<td>
Message
</td>
<td>
10 months ago
</td>
<td>
This is a Message to by <b>Veggie Delight</b>
</td>
<td>
</td>
</tr>
<tr class="forumTopicRow ">
<td>
Message
</td>
<td>
10 months ago
</td>
<td>
Do you like this by <b>Veggie Delight</b>
</td>
<td>
</td>
</tr>
<tr class="forumTopicRow ">
<td>
Testing
</td>
<td>
one year ago
</td>
<td>
This is a new messa by <b></b>
</td>
<td>
</td>
</tr>
</tbody>
</table>
Hey mate I didnt see your code but recently I fixed my newsletter by adding
-webkit-text-size-adjust:none;
in your td style
I had the same problem.
Try it might be the issue.
Well, going through your css, the only thing I saw that may cause an issue for you is, (After doing find table in the document.) The 6th (found word) of table that popped up, with table headers as well, has a font-size of 100%. That's a pretty risky move and chances are one of your table headers is taking on a different size within the iphone, (even if you can't see it.) causing your font size to increase. To see if that's correct simply change the text size to something other than a percentage to test.
As far as link goes, i'm pretty sure you're sending them to the wrong place...
remove the / at the beginning of your links and you should be fine.
This is an assignment I need help with. I hate tables as is, but this is what it says:
"The first row in each table consists of one table cell which spans two columns that contain the real estate listing name. The second row in each table consists of two table cells."
My code:
<table>
<tr>
<th>
<h3>TEST</h3>
</th>
</tr>
<th rowspan="2"></th>
<td>Something here !</td>
</tr>
</table>
Just wanted to verify if I did this correctly? Here's the full code:
http://jsfiddle.net/4jzUc/
also, it's supposed to look like this: http://screencloud.net/v/aA5Y
You want to span the column, not the row (colspan vs rowspan). I think this is what you are looking for.
<table>
<tr>
<th colspan="2">
Title
</th>
</tr>
<tr>
<td>First cell</td>
</tr>
<tr>
<td>Second cell</td>
</tr>
</table>
No, your markup is not correct. It does not even comply with the HTML table model, as you can see by using http://validator.nu on your document with <!doctype html> slapped at the start. Still less it does do what the assignment calls for.
The assignment as such is very simple: you just a table with two rows and two columns, just so that the first row has only one cell, which spans two columns:
<table>
<tr><td colspan=2>Real estate name
<tr><td>A table cell <td>Another table cell
</table>
You could use th instead of the first td, since it is kind of a header cell, but beware then that this makes its content bold and centered by default (you can override this is in CSS).
As per the “supposed to look like” link, it seems that you are supposed to put an img element only in the first cell of the second row, and the second cell there contains text and a ul element. And a little bit of CSS too. Note that for this output, you will need to align the second row vertically to the top (using the HTML valign attribute or the CSS vertical-align property).
correct code:
<table>
<tr>
<th>
<h3>TEST</h3>
</th>
<th rowspan="2">RowSpan2!</th>
</tr>
<tr>
<td>Something here !</td>
</tr>
<tr>
<td>Something Else !</td>
</tr>
</table>