Want to start off by saying I have tried this method with no success, it could be because I am doing it wrong idk...
So I have a 7 column table and my issue is that my 2nd column (TX4200) does not have a colspan but the width of that column seems to be bigger than I would like and as a result the other columns are suffering. I am thinking because of the type of layout my table has the auto-width algorithm is having some issues, so I want to try and take this on by brute force.
Things I have tried
table-layout: fixed
Setting the table width: 1000px; but even then the TX column still takes up the most space
min-width & max-width didn't do anything
Here is my fiddle http://jsfiddle.net/8Xy24/1/
Any help is much appreciated! Thanks in advance.
You likely want to look at setting either the overflow to hidden or word-wrap to break-word in conjunction with the max-width for the cells in question depending on the kind of behaviour you want.
There you go:
http://jsfiddle.net/8Xy24/2/
I just added a td width:
td {
width:50px;
}
Related
can you please let me know if there is any chance to make that the label wraps itself and do not go like in the picture ("Change Change Change..."):
I use "no more tables" here and always get that issue with longer labels - they just do not wrap. I understand that the white-space in css is "nowrap", but if I change it to "normal", everything goes wrong and displays badly. Maybe someone had an issue with this "no more tables" technique and word-wrapping?
More about this script can be fuonde here http://elvery.net/demo/responsive-tables/
That example uses absolute positioning to move the generated content to the start of the rows and is a flawed approach as that means that the content cannot wrap because it will overlap the content in the next row. That's why the nowrap rule is in place to stop this happening.
Instead of absolute positioning you could use display:inline-block instead and avoid the issue altogether.
In the code from here change these two rules as follows:
td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
}
td:before {
display:inline-block;
vertical-align:top;
width: 45%;
padding:0 3% 0 1%;
}
Rough example here:
Updated code as per comments below:
td:before {
float:left;
width: 95%;
padding:0 0 0 1%;
margin-left:-100%;
}
td {
padding-left:50%;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
You need to break the words if they are too long. You can make this in css as:
word-wrap:break-word;
Try it.
The main issue here has to do with sizing one HTML element based on another element. This is something that tables are optimized to do - calculating the height and width of TD elements across the entire table to a uniform size dynamically based on content.
By abandoning tables (via changing the display type of THEAD to "block", effectively making it nothing more than a DIV), you've lost this automatic resizing effect that browsers do for you, as evidenced here:
There's no getting around this. The "No More Tables" approach must make a compromise - use absolute height to mimic the way tables are laid out. You are trying to reintroduce this automatic size calculation, but you can't without restructuring your HTML.
If you want to continue to pursue this path, you'd need to "manually" handle resizing of the TD elements - iterate over the cells of the table and resize them yourself whenever the size of table might have changed. While possible, your Javascript won't be nearly as optimized as the browser and anything you implement yourself will likely be buggy and slow.
I'm afraid the only viable solution is to shorten your label names and accept the need for absolute sizing to get around the lack of dynamic sizing in non-TABLE elements.
One possible solution: show an abbreviated label and then show a longer name in a popup on hover or tap: Tooltips for mobile browsers
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've been trying unsuccessfully to set an HTML "select" field size in Bootstrap 3(latest) to normal (not 100% width). Do you know an elegant way of doing this, without hacks like tables around fields.
I also don't want to put a select field in a bootstrap column since then I'll have indent due to borders.
Custom styles with specific sizes is also not pretty in my opinion, because all I want is for the field to be only as long as the longest content (default behavior of a select)
Perhaps there is a really easy way to circumvent this since Bootstrap decided to make all selects (using form-control class) stretch all the way, looking forward to your illuminating suggestions )
Try setting the width to auto or initial?
width: auto;
or
width:initial;
http://www.w3schools.com/cssref/pr_dim_width.asp
select
{
width: auto;
width: inherit;
}
I have a Fixed size table and I have to show the data in a td. The Issue is If I enter the Data with spaces then UI is appearing Perfect because in td data adjust in new line but if i entered 20 characters without space then my UI got disturbed. Any help will be appreciated. I have tried so many option but no one can help, like:-
<td width="200"></td>
and
table-layout: fixed;
width: 100px;
You can use word-break:break-all; on your td example here - JSFiddle
Browser support for word-break - Can I Use
You should give "word-wrap: break-word;" a try.
I have a table with only two columns . i want to make first column is fixed and next column scrollable in all the rows..it should be horizontally scrollable as a whole .. not individual columns
There can be hundreds of rows. .
I have a demo code here in Jsfiddle
I dont have much exposure to css styling.
You could use CSS overflow:auto;, as in http://jsfiddle.net/Yw679/2/
If I understand correctly, you want the entire left column to be static, and the entire right column (including the header) to be horizontally scrollable. Is that correct?
If so, it's not possible with one table. But with a bit of extra code, it's possible with two tables like this: http://jsfiddle.net/Yw679/6/
What you're searching for is called "frozen columns".
See a jqGrid demo here that implements column freezing in version 4.3. It's quite a versatile grid plugin and definitely worth a try(if you haven't already, that is).
You could do something like this:
http://jsfiddle.net/Yw679/3/
th{
display :inline-block;
height: 50px;
width: 100px;
overflow: scroll;
}
th:first-child{
overflow: hidden;
}
I think you want to do something like this example
https://www.datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html
It's better to use a single table along with two column fixed and other are scrollable.
Here is the link.