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.
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've created this fiddle to experiment aligning columns between tables and their contained sub-tables.
To achieve this, I utilize colgroups and specify column widths in my CSS like so:
<colgroup>
<col class="orderNumColumnWidth"/>
<col class="itemNumColumnWidth"/>
<col class="itemNameColumnWidth"/>
<col class="itemDescColumnWidth"/>
</colgroup>
In Chrome, the column widths are correctly calculated and match up nicely:
However, in IE 11, the first column in my sub-table is mis-aligned by a few pixels:
The mis-alignment is small, but I can't figure out why it is there, or why the Item # column is mis-aligned but the Name column is not.
What confuses me further is that, if I investigate with the f12 menu in IE, it actually says that the Item# column header is wider than the contents, which doesn't appear to be the case by looking at it.
Does anyone have an idea as to what causes this, and how I can fix it?
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 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 creating a table in an asp.net code behind dynamically, and I want to have a footer row that only has 2 cells. The first should span all the columns in the table-1. Is there some way other then keeping track of the # of columns in the table manually for me to set the colspan to be # of all the columns in the table-1?
Preferably a HTML or CSS solution?
Colspan can't be done with CSS. It's structural rather than stylistic so it's pure HTML.
No you can't specify "all but one" as a colspan. The best you can do is colspan="0", which will span the remaining columns in the column group but to take advantage the <colgroup> at the top will need to know the number of columns anyway and be define statically.
See Tables in the HTML spec:
colspan = number [CN]
This attribute specifies the number of
columns spanned by the current cell.
The default value of this attribute is
one ("1"). The value zero ("0") means
that the cell spans all columns from
the current column to the last column
of the column group (COLGROUP)
in which the cell is defined.
But basically this just kicks the can down the street and I don't know what the browser support is like so it doesn't necessarily buy you anything.
You'll either need to know the number of columns when you generate the HTML or use Javascript.
Sorry this isn't an HTML or CSS solution... I'm only suggesting it because I don't think there is an HTML or CSS solution that will work cross-browser/cross-broweser version.
You could convert the table to an Asp:Table and then use the first row's Cells.Count...
But it would probably be more work than tracking the number of columns added the way you're doing it now. BUT it would not depend on Browser support as it would all be in the code-behind.
In case anybody else winds up here in the future, colspan=0 isn't supported in HTML 5. There are more details here: https://stackoverflow.com/a/52355253/18494923
<tr><td colspan="100%">1000</td></tr>
From question: Colspan all columns
Works in IE 7/8 & Firefox 5