I have a requirement to display some data to a user.
The data is displayed as "Label: InputForLabel" and will have two columns. It looks like this:
I started by just using a table with four columns for every row. Each column has a width of 25% and the table has a width of 100% -- so this gives the display we see above.
.ContentTable {
width: 100%;
}
.ContentTable tr {
height: 18px;
}
.ContentTable tr td{
width: 25%;
}
Now, I have an additional requirement to be able to dynamically remove a given item and its label. If I just hide the item/label - a gap would be left in the table. I'm hoping to always have 2 item/labels displayed per row and have everything just sort of collapse upwards as item/labels are hidden.
Does this sound like something divs would be able to do more easily? Or is there a way to tell a table object "Always have this many columns for each row. If a column is hidden, pull up the first column from the next row and slide everything forward"?
There is no point in having one big table, so even if you stay with a markup made of tables, you should split it into two columns (which will makes your problem about showing/hiding some rows of one of the column disappear :o).
Then, we could ask the question weither or not the table layout is suited when you have split the content into two columns : I think MasterAM is right and you should give it a try using ul for this kind of layout (and hiding just an element of a list is still as easy as it is with a row in a table)
Related
I am creating a test transcipt page with 2 tables (so far) and there is this cell line on the bottom table to the left (as pointed out with arrows) that will only align, if the table data on the right is misaligned (as pointed out with the orange line)
If I change the padding-left property on the table data on the bottom table (Example of table data "A", "E", etc.) to align with the table data above, the left line will misalign shown here:
Is there a way where I can have both lines on the left align as shown in the very first image but also having the table data be aligned as shown in the last image?
I found a way to get the table data and the cell lines to align without looking at those eight "2"s.
On the word "Geometry" I added 2 divs one before it and one after.
I put four "2"s in each div and gave each div the same class name.
In external CSS I set two properties:
.HiddenText
{
display: inline;
color: #ffffff;
}
That way the table header is center, the table data is center, the 2 lines are aligned and there aren't any ugly "2"s to look at.
Image:
https://imgur.com/a/gxiVZdo
Let me know if y'all need more code to understand this.
If you want to get the grades data at the center in that column then use <center> tag at every data of grades like: <td><center>A</center></td> it's the easiest way of doing this. If that's not the case then, there are many ways of doing this, so it's on you which way you are working. So, please do share your code.
I have four cells on one table and another table with about eight
cells.
I have set the max-width to 300px on all cells. Now the problem I face
is that the cells do not drop to a second row if the page is too
small. (Which is in every matter at the moment haha)
I was wondering how I would go about adding dynamic rows to make the extra content beyond the page width, drop below into a new row?
All the code can be seen in the Developers tools for the following website
(Cells/Rows in the products section is the problem I am facing.)
Kind regards,
Jesse M.
Ohh my sweet summer child,
The <table> element is "designed" to behave that way. The table will try to cramp up all the columns in the possible space and based on various css and html attributes, hide/overflow/cramp-up the data in columns, But never will it allow the columns of one row to flow down to another row.
So you are left with a lot of options using CSS and HTML elements.
If you are into frameworks, I recommend Bootstrap that is designed to work exactly that way, and use the provided col-xx-x classes for the elements that need to be in a row at some screen width, and "drop below into a new row" on other screen width.
I've used alternate table row shading before (using the ::nth-child selector), but I noticed it can't get the job done when you have irregular table structure. I've come across one specific case for which I'd like to come up with a solution.
In the picture below, you can see that the rows are styled with ::nth-child(even) to give every other row a background color:
The problem here is that in some cases, the first column cell spans two rows, causing the rest of the cells in that "row" (which is really two rows) to appear disjointed or misaligned. The cells in the rows spanned by "Cole" should have the same background color as the first column's cell, because the following columns are all related to the first one. Is this achievable using strictly CSS?
I would just change the structure of the table, but the people entering this content are using a CMS with a built-in text editor, and they have no control over the format. I'd have to manually change every table on their site, which would be a huge undertaking (and it wouldn't account for future tables).
I have 2 tables on different pages. Both tables have the same first 2 columns. The first column is a TearSheet image, and the second column is a checkbox.
Both can be seen here: http://jsfiddle.net/VH4Q8/1/
I'm having difficulty getting the first 2 columns in both tables to have the same width, even though in each table the first column is assigned the class tearsheet-image and the second column is assigned the class fund-compare-column, which have widths specified as follows:
.tearsheet-image {
width: 13px;
}
.fund-compare-column {
width: 13px;
}
What do I need to do in order to make both have the same column widths for the first 2 columns?
In your CSS you have table {width:100%}
This is contradictory to your 13px/13px/250px requirement. So something has to give I guess.
I find the cleanest way to control the column widths of a table is with the <col> element:
<table>
<col class="tearsheet-image">
<col class="fund-compare-column">
<thead>
...
... then you don't have to specify the column's class on every cell of every row. However not all style properties will be applied if I remember correctly, but widths and backgrounds are, but text-alignment is not :(.
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.