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 :(.
Related
I have an HTML table displaying a calendar.
People are divided in groups. The names of the groups can be very long.
Two requirements :
Don't let the name of the group (in the screenshot 'The name of a group can be very long') have any influence on the width of the columns with the names.
A border should be drawn around the complete column that is "today".
For requirement 1, I simply set a colspan on the td containing the name of the group.
<td colspan="31">The name of a group can be very long</td>
For requirement 2, I set a border on the correct column in the columngroup.
<colgroup>
<col>
<col>
<col>
<col class="planningtable_todaycolumn">
</colgroup>
Now the issue is that the border breaks on the group rows, instead of just continuing.
How can I fix this?
I have been looking into fixing problem 1 in another way than using a colspan. Because when I'm not using a colspan the issue is solved automatically. But I could not find usable solutions.
Also been thinking about another way to draw the border. But in the group row, there is no element to give a border, so I have no idea how to fix that.
By reading the link #Bobtroopo provided I came up with a solution :
Don't use a colspan for the group cells.
But give them a position style :
position: absolute
I have the below HTML table row set:
<col class="colname-c1 colwidth-7"></col>
<col class="colname-c2 colwidth-75"></col>
<col class="colname-c3 colwidth-16"></col>
I apply CSS to them as follows:
.colwidth-7{colwidth-7%}
.colwidth-75{colwidth-75%}
.colwidth-16{colwidth-16%}
This is working fine as I did it in an excel by using the concat function for all the widths from 1-100. But I've been getting some column widths like this:
<col class="colname-c1 colwidth-7.27%"></col>
<col class="colname-c2 colwidth-75.76%"></col>
<col class="colname-c3 colwidth-16.97%"></col>
Here I want to know if there is a dynamic way of setting the css width? This is because I am not sure how many different types of col widths are there and there are approximately 290 tables that I need to create. Please let me know if there is a way for dynamically creating css.
First up, seems to me that the col element spec says it has no content and can not have a width itself. The only purpose seems to be to "define common semantics" on cells. If you want to set a width on columns in a table you'll have to do it through the (header) cells.
To continue with the actual question:
I want to know if there is a dynamic way of setting the css width?
This can be done, but only for elements that can actually have a width.
Check out the W3 Selectors page. One way to fulfill your requirement is as follows:
[class*="colwidth-75"] { width: 75%; }
This selects all elements with a class attribute value that contains the string "colwidth-75". See this fiddle for a demo.
There's no real reliable way AFAIK to dynamically set the value of width based on the class name, or anything similar. Some similar/related techniques that may shed some light on this for you are LESS, SASS, and the new CSS-Variables module (draft phase).
You can also consider setting these CSS properties using client or server side script, but if that's possible will probably depend on your use case.
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)
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 am working with JSF/ICEFaces and I need to generate a table from a dynamic tree structure with an unknown (at run-time) number of rows and columns. The table must have width: 100%; so it occupies all the space inside its container.
I am able to generate all the markup required for the table, but I found that the cells' width is not the same.
It would be easy for me to set CSS width: (100/numberOfColumns)% if I knew the number of elements I'm rendering. Unfortunately, I can't modify the classes returned by my backing bean so I can only iterate over them with ui:repeater component.
Do you know if there is a CSS way to make sure that all columns in a table have the same width, no matter what it is?
I wouldn't like to use the Javascript way. Just as cleaner code as possible.
table {
table-layout : fixed;
}
If you have at least an idea regarding the maximum number of columns: here's the solution for applying certain distributions only if a certain amount of columns is given.
My example only concentrates on the principle and creates evenly distributed columns. Note that this is superfluid when using table-layout:fixed and width:100%.
You could easily extend this solution to specify the width of the first columns other than that of the remaining columns.
Say, the maximum allowed number of columns is 4 (including possible rowheaders). Given you are using tbody in your table like in the following example:
<table>
<thead>
<tr><th>X</th><th>A</th><th>B</th><th>C</th></tr>
</thead>
<tbody>
<tr><th>1.</th><td>a</td><td>b</td><td>c</td></tr>
[...]
</tbody>
</table>
CSS Code:
table{table-layout:fixed;width:100%;}
tbody>tr>*:nth-last-child(2)~*{ width:50%}
tbody>tr>*:nth-last-child(3)~*{ width:33.3%}
tbody>tr>*:nth-last-child(4)~*{ width:25%}
It says:
Apply to the following siblings of the second last element of a row: width 50%. (That's all columns except the first element, if there are at least 2 columns). If there are two, three, four or more columns, this selector is applied.
But then:
Apply to the following siblings of the third last element of a row: width 33.3%: Again: This selector works only if there are at least three elements. It overwrites the rules of the preceding selector (nth-last-child(2)), so that your columns now have the width 33.3%. This selector is not applied, if there are only two columns.
And then:
The same for four columns. It again overwrites the rules previously defined.
Be aware, that you need to define the width for each possible amount of columns. So, if there was a maximum number of 20 allowed columns, this would be 21 lines of css.
I believe that this solution is compatible with IE9+, not IE8. But I'm currently not 100% sure. See http://caniuse.com/css-sel3