I want different styles on each column of a table. I've read that you could do that by using <colgroup> or <col>, but I had no luck. I have an example here, and nothing seems to change. Am I doing something wrong? Will this work on xhtml?
I know I could add a "class" attribute on each <td>, but that seems weak.
That's correct. While colgroup itself is supported by all browsers, this isn't true for the attributes of the inner col element. Of possible attributes, only width is supported on all browsers. But unlike CSS, <col width=""> only supports pixel and percentage widths.
Don't use it. Instead, create CSS classes and assign them to each td. Yes, it sucks.
EDIT Updated link above to page with better information
Set your table-layout to auto instead of fixed...
table {table-layout: auto;}
My personal site supports multiple themes and I see these kinds of differences all the time.
You could use css selectors to get similar results without adding extra classes.
As an example if you want to give specific style to a second column you can use:
table>tbody>td:nth-child(2){font-weight: bolder;}
Here is a trick I used which actually worked well. In an generic (site wide) css file I put:
.mytable td:nth-child(1) { width: var(--w1);}
.mytable td:nth-child(2) { width: var(--w2);}
.mytable td:nth-child(3) { width: var(--w3);}
.mytable td:nth-child(4) { width: var(--w4);}
and so on up to whatever I felt was the maximum number of columns in any table I would ever need on my site.
Then on each table I could define the width with a style such as:
<table class="mytable" id="tbl1" style="--w1: 30px; --w2: 100px; --w3: 80px;">
This made it easy to set the column widths plus I could add code to resize the columns which simply had to change the style property on the table for the desired column. This avoided having to make numerous CCS entries every time I wanted to define the column widths for a table. To change a column width you could use something like this:
document.getElementById("tbl1").style.setProperty("--w2", "123px");
The above simply changes the width of column 2 by changing the --w2 variable value.
If you really need to use cols tags without react restriction then dangerouslySetInnerHTML will help:
<colgroup dangerouslySetInnerHTML={{
__html: `
<col style="background: red;"/>
<col style="width: 20px;"/>
`
}}/>
Note that while this works this is not the recommended way to work with react.
In 2020, if you want different styles on columns, you can:
1. style/CSS <col>, but for only a few properties
2. use th/td:nth-child(#number) in CSS (my preferred solution, no idea about what happens with colspans)
3. manually add a class to the th/td elements
References:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col
https://www.w3.org/TR/CSS22/tables.html#columns
You're not supposed to use the "width" HTML attribute, instead use style/CSS. In the style/CSS for <col> you're supposed to use only "border", "background", "width" and "visibility". You can use ems to express values.
I'm confused: w3 says "The 'width' property gives the minimum width for the column." which looks contradictory to me, given the existence of a "min-width" property. On Firefox 72 (Ubuntu)
<col style="width: 13em">
sets a "fixed" width (as I expected). If I resize the window, narrowing it, the column is resized and the content is wrapped into more lines.
So I just had this same issue... the real problem is that even when style/CSS is used on <col> (rather than HTML attributes), you can still only style the following things:
width
borders
background colors
visibility
Source: https://www.w3.org/TR/CSS21/tables.html#columns
It is working for me like this with colgroup and col
<colgroup align="center">
<col style="background-color:red">
<col style="background-color:yellow">
<col style="background-color:green">
</colgroup>
Related
I am using primeng with angular, However, it feels like my problem is with html/css.
I have found out how to present my ui the way I would like with the datatable component. However, when I leverage the datatable component inside the rowexpansion feature my column widths are not adhered to.
You will see that in the below table inside a table the column width is 100px. The parent table has it correctly set to 100px.
Here is the entry code entry
Here is where the width of the columns are set
Specifically the code that I debugged is below
for(let i = 0; i < columns.length; i++) {
columns[i].style.width = columns[i].offsetWidth + 'px';
}
The offsetWidth is different for the parent then the child even though I am setting the style the same way for both tables.
My conclusion thus far is that offsetWidth is calculated differently when my table is inside a div vs inside of a td.
I looked at the default css for each HTML element and tried to make them match. However, it must be displayed as a table-cell because it requires the colspan attribute otherwise the row won't span the table as intended.
I have looked at a number of websites to determine how offsetWidth is calculated but nothing has stood out to me. So I am going to the SO community to see if there is a bug in the browser (Chrome) or if there is a css property I can use to make it behave the same way.
The offsetWidth and offsetHeight returns the element's layout width and height.
It includs the width of the visible content, scrollbars (if any), padding, and border.
Read more here...
Table has a cellspacing property which is used by the TD tag. This cellspacing is not considered in offsetWidth or offsetHeight. Aside div tag has no cellspacing property.
Below example will clear/solve your problem.
var a = document.getElementById('div');
var b = document.getElementById('tda');
var log = document.getElementById('log');
//Border+Padding+ClientWidth
log.insertAdjacentHTML("beforeend","Div offset: "+a.offsetWidth);
log.insertAdjacentHTML("beforeend","<br />Table offset: "+b.offsetWidth);
log.insertAdjacentHTML("beforeend","<br />Table Tbody offset: "+b.children[0].offsetWidth);
log.insertAdjacentHTML("beforeend","<br />Table TR offset: "+b.children[0].children[0].offsetWidth);
//Border+Padding+ClientWidth, Except Cell spacing
log.insertAdjacentHTML("beforeend","<br />Table TD offset: "+ b.children[0].children[0].children[0].offsetWidth);
#tda {width:400px}
#div{width:100px;border: 1px solid red}
<div id="div">DIV</div>
<table id="tda" border="1" cellpadding="5" cellspacing="6">
<tr>
<td>TD</td>
<td>TD</td>
</tr>
</table>
<pre id="log"></pre>
So I still don't know why I get different results between div and td.
However, looking here I was able to find the width property that does the same thing as auto, in my case, called max-content. When I set this CSS width property value on my table, I get the same result in the child as in the parent. See screenshot below:
Again I don't know why auto gives me different results for the child and the parent table but I found a workaround.
In case someone else is still interested, the best information I found for this so far was here.
I have a table that pulls values in an xpage in Lotus notes. I have nowrap set so it doesn't wrap. Currently the value extends the width of my columns when I set it to nowrap. However, I don't need to see the whole value that is pulls. I only need to see if a value is in there. So I need the column size to remain the same size. I have tried to use various width values in the xpage. However, the value still extends the column. So either I need to parse the value to make it smaller or figure out where to add the width value so it doesn't increase with the variable.
Thanks in advance.
<td>
<div>
<xp:text escape="false" style="white-space:nowrap" id="computedFieldStatementNotesDisplay" value="#{auditDoc.StatementNotesDisplay}">
</xp:text>
</div>
</td>
Two quick solutions I can think of:
use a css overflow statement overflow: hidden, overflow: auto or maybe overflow: scroll and apply this to the containing <td> or <div> tags; also you might consider setting the table column's width to some value
limit the amount of characters displayed in column using SSJS.
JS code could be like this:
var limit=20; //test for max allowable chars
var val=auditDoc.getItemValueString("StatementNotesDisplay");
if(val.length>limit){
val=val.left(limit);
}
return val;
CSS solution might be the preferred one
Update:
Just saw Per's comment linking to a css solution which is quite complete
I want to thank everyone for their response. I took the information given and applied it. I had to add the width to the text as well place the settings in the .css. This is what worked.
I added this to the .css
.ellipsis span {
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
display:inline-block;
}
Then inside the xpage I called ellipsis and then set the width in the text area.
<td class="ellipsis">
<xp:text escape="false" id="computedFieldStatementNotesDisplay" value="#auditDoc.StatementNotesDisplay}" style="width:100px">
</xp:text>
</td>
I am facing the issue with html Table element cell width. Width of the table cell is not same in IE8 and IE9. Please find the below code snippet where I set the width for table cell using table colgroup and width for table as 100%.
[Html]
<table id="Grid1_Table" class="Table">
<colgroup>
<col style="width:20px">
<col style="width:20px">
<col style="width:180px">
<col style="width:200px">
</colgroup>
<tbody>
<tr>
<td class="RowHeader"><div> </div></td>
<td class="RecordPlusCollapse" ><div> </div></td>
<td colspan="2" class="GroupCaption">Order ID: 0 - 1 Items</td>
</tr>
</tbody>
[CSS]
.RowHeader
{
background-color : black;
}
.GroupCaption
{
background-color : #868981;
}
.RecordPlusCollapse
{
background-color : red;
}
.Table
{
width:100%;
}
Please refer the below fiddler file to check the issue with IE8 and IE9.
http://jsfiddle.net/KgfsM/21/
Could you please check on this?
First of all, the markup violates the HTML table model; if you try to validate the code snippet using HTML5 doctype (and the missing </table> added), the validator will report the error “Table column 4 established by element col has no cells beginning in it.”
Second, you are setting column widths in pixels and the total table width as 100%. This constitutes a request that cannot be fulfilled except in a very special case where the available width happens to coincide with the sum of the pixel widths plus borders, border spacing, and cell spacing. It’s no wonder that browsers react differently to this.
Thus, you need to specify the widths consistently. Either remove the setting of 100% width, or remove at least one of the column width settings. You might still have a problem (browsers may react differently even to this), and table-layout: fixed might not help (or might introduce new problems), but then there would a new, relatively well-defined problem.
I'm trying to achieve a basic fixed table header effect. For this I'm using two tables with the exact same markup and CSS. The "content" table is in a div with overflow-y set. Everything looks fine except IE7 and Opera where the "header" table has different column widths than the "content" table.
Here is a jsfiddle: http://jsfiddle.net/gEtGW/1/
Please let me know if you have an idea about this.
Thanks!
EDIT:
In your HTML, you have this...
<table class="inner-table">
<colgroup>
<col width="83">
<col width="92">
<col width="123">
<col width="120">
<col width="177">
<col width="84">
</colgroup>
Where the widths above all add up to 679 total.
However, in your CSS, you have this...
.inner-table {
width: 680px;
}
I'm not sure what each browser is supposed to do with the extra/missing pixel or how they decide whether the one pixel discrepancy is one extra pixel or missing one pixel. 679 versus 680... which one takes precedence?
Though, I'm sure every browser will probably render this differently.
Ok problem found (The problem is a text-style one):
'Column' text is making the bounds of the column celd change
For example change 'column' for 'col' and you see it like this:
http://jsfiddle.net/qYnPU/
I had this exact same problem and I first tried to solve it in the same way you are doing it. But that led nowhere -- just because of the kinds of cross-browser issues you're seeing. I spent days and days trying to make it right. I finally gave up on the two-table approach. Instead, I made a div with the table header material, calculating the width of each header element from the first row of the content table. It has worked flawlessly in all browsers. I posed a question like yours over here on SO. You might want to give it a look.
Here is the table using the new scheme.
HTH
What are good practices when selecting column widths in a table?
Let's say I have four columns, name (variable width), description (long content of text), count (max 3 chars), date (fixed format).
What would be a good practice? I'm thinking fixed width for descr., count and width (thus actually also making name "fixed" width).
But my real question is, how to select a particular width size.
For instance, if the date format is yyyy-MM-dd is there some trick to convert those 10 chars to a width which will guarantee that it shows ok in any browser using any font and font-size (without also taking up any excessive space)?
edit: With fixed I mean something akin to "fixed amount of pixels relative to font width"
You can declare white-space: nowrap; on all the cells that you want to stretch as much as they need without using extra space (name, date, count), and then simply give your remaining cell a width of 100%. This way the 100% wide cell will expand as much as possible, without causing the other cells to collapse on multiple lines.
If you want to save yourself lots of markup...
First, if by fixed width you mean a fixed percentage, add the following to your stylesheet:
.width1 {
width: 1%;
}
.width2 {
width: 2%;
}
.width99 {
width: 99%;
}
.width100 {
width: 100%;
}
This gives you the flexibility you need if you decide to apply an odd percentage width for any of them if you wish - for example width23 on one of them, width 27 on another.
Now this is the clever bit. Using the col tag, you can apply widths just once instead of on every cell. I know you can apply widths to just the first row, and they will set the widths for the same cell in every other row - but the col tag can be used for setting other properties too. For example:
<table class="width100">
<col class="width15" style="background-color: #cccccc;" />
<col class="width65" />
<col class="width10" />
<col class="width10" />
<tr>
<td>My Sample Name</td>
<td>My Sample Long Description</td>
<td>5</td>
<td>2010-Oct-08</td>
</tr>
</table>
I generally prefer to use this technique - but if it is a layout I will be using on multiple tables (for example the customers table may be the same layout as the agents table) then I will create a class for each column and set the width etc in that class. I will then apply the relevant class to each cell. I suppose both methods could be combined - the relevant class could be applied to the relevant col, but the fact that the properties are set in one place (the stylesheet) means that you only have to change it in once place.
Hope this helps and that it is what you are looking for.
Richard